jQuery DOM操作方法介绍

以下jQuery方法有什么作用？如何使用？给出范例

1. .append()

• 写法：.append(content[,content])/.append(function(index,html))
• 解释： insert content, specified by the parameter, to the end of each element in the set of matched elements
• 拓展：可以一次添加多个内容，内容可以是DOM对象、HTML string、jQuery对象
• 拓展：如果参数是function,function可以返回DOM对象、HTML string、jQuery对象，参数是集合中的元素位置与原来的html值
  几个小例子

$('.inner').append('<p>Test</p>');
$('body').append($newdiv1,[ newdiv2,existingdiv1 ]);
$('p').append('<strong>Hello</strong>')
$('p').append($('strong'))
$('p').append(document.creaTextNode('Hello'))

2. .prepend()

• 写法：.prepend(content[, content]) / .prepend(function(index,html))
• 解释：向对象头部追加内容，用法和append类似，内容添加到最开始
• 解释：Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.
  几个例子

$('.inner').prepend('<p>Test</p>')// 向class值为inner元素的头部（内部）添加内容'<p>Test</p>'

3. .before()

• 写法：.before([content][,content]) / .before(function)
• 解释：在对象前面（不是头部，而是外面，和对象并列同级）插入内容，参数和append类似
• 解释：Insert content, specified by the parameter, before each element in the set of matched elements.
  几个例子

$('.inner').before('<p>Test</p>')
$('.container').before($('h2'))
$('p').first().before( newdiv1, [ newdiv2, existingdiv1])
$('p').before('<b>Hello</b>')
$('p').before(document.createTextNode('Hello'))

4. .after()

• 写法：.after([content][,content]) / .after(function(index))
• 解释：和before相反，在对象后面（不是尾部，而是外面，和对象并列同级）插入内容，参数和append类似
• 解释：Insert content，specified by the parameter, after each element in the set of matched elements.
  几个例子

$('.inner').after('<p>Test</p>') //在class值为inner的元素后面添加兄弟元素'<p>Test</p>'
$('p').after( document.createTextNode('Hello'))//

5. .remove()

• 写法：.remove([selector])
• 解释：删除被选中的元素（及其子元素），同样也可以添加一个可选的选择器参数来过滤匹配的元素
  举例

$('#div1').remove() //删除id为div1的元素及其子元素
$('div').remove('.test')//删除带有class值为test的div元素

6. .empty()

• 写法即为.empty()
• 作用：清空被选择元素内所有子元素
• 解释：Remove all child nodes of the set of matched elements from the DOM
• 举例：$('body').empty() //清空body内的所有子元素

7. .html()

• 写法：.html([string])
• 解释：这是一个读写两用的方法，用于获取、修改元素的innerHTML
• 解释：当没有传递参数时，返回元素的innerHTML
• 解释：当传递了一个string参数的时候，修改元素的innerHTML为参数值
  几个例子

$('div').html() //获取所选元素的innerHTML
$('div').html('123')//将所选元素的innerHTML设置为‘123’

• 补充：后续这种读写两用的方法很多，原理都类似
• 补充：如果结果是多个进行赋值操作的时候会给每个结果都赋值
• 补充：如果结果多个，获取值的时候，返回结果集中的第一个对象的相应值

8. .text()

• 和html方法类似，操作的是DOM的innerText的值

$node.text()和$node.html()有什么区别？

• $node.html()：获取集合中第一个匹配元素的html内容，或设置每一个元素的html内容。
• $node.text()：获取匹配元素集合中每个元素的合并文本，包括它们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。

介绍以下 jQuery 函数的用法，给出范例

1. .val()

• 解释：这是一个读写双用的方法，用来处理input的value，当方法没有参数的时候返回input的value值，当传递了一个参数的时候，方法修改input的value值为参数值
  举例

$('input').val()
$('input').val('newValue');

2. .attr()

• 写法：.sttr(sttributeName)
• 作用：获取元素特定属性的值
• Get the value of an attribute for the first element in the set of matched elements
  var title = $( "em" ).attr( "title" );
• 扩展写法：.attr(attributeName,value) / .attr(attributesJson) / .attr( attributeName, function(index, attr) ).
• 作用：为元素属性赋值 Set one or more attributes for the set of matched elements.

$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );
$( "#greatphoto" ).attr({
alt: "Beijing Brush Seller",
title: "photo by Kelly Clark"
});
$( "#greatphoto" ).attr( "title", function( i, val ) {
  return val + " - photo by Kelly Clark";
});

3. .removeAttr()

• 为匹配的元素集合中的每个元素中移除一个属性（attribute）
• .removeAttr()方法使用原生的 JavaScript removeAttribute() 函数,但是它的优点是可以直接在一个 jQuery 对象上调用该方法，并且它解决了跨浏览器的属性名不同的问题。
  $('div').removeAttr('id');

4. .prop()/.removeProp()

• 这两个方法是用来操作元素的property的，property和attibute是非常相似的概念，用法类似

5. .css()

• 写法：.css(propertyName,value) / .css( propertyName, function(index, value) ) / .css( propertiesJson )
• 作用：Set one or more CSS properties for the set of matched elements.
  设置元素style特定property的值

$( "div.example" ).css( "width", function( index ) {
    return index * 50;
});
$( this ).css( "width", "+=200" );
$( this ).css( "background-color", "yellow" );
$( this ).css({
  "background-color": "yellow",
  "font-weight": "bolder"
});

6. .addClass()

• 写法：.addClass(className) / .addClass(function(index,currentClass))
• 作用：为元素添加class，不是覆盖原有class，是追加，也不会检查重复
  adds the specified class(es) to each of the set of matched elements.

$( "p" ).addClass( "myClass yourClass" );
$( "ul li" ).addClass(function( index ) {
  return "item-" + index;
});

7. .removeClass()

• 写法：removeClass([className]) / ,removeClass(function(index,class))
• 作用：移除元素单个/多个/所有class`
  remove a single class, multiple classes, or all classes from each element in the set of matched elements.

$( "p" ).removeClass( "myClass yourClass" );
$( "li:last" ).removeClass(function() {
  return $( this ).prev().attr( "class" );
});

8. .hasClass()

• 检查元素是否包含某个class，返回true/false，Determine whether any of the matched elements are assigned the given class.
• 举例：$( "#mydiv" ).hasClass( "foo" )

9. .toggleClass()

• toggle是切换的意思，方法用于切换，switch是个bool类型值，这个看例子就明白

<div class="tumble">Some text.</div>`
第一次执行
$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble bounce">Some text.</div>
第二次执行
$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble">Some text.</div>

jQuery 对象和原生 Dom 对象有什么区别？如何相互转换？

• jQuery对象是一个类数组对象，对象原型封装了许多jQuery自定义的方法。在jQuery对象中无法使用DOM对象的任何方法

1. DOM 对象===>jQuery,加$符号

var dom = document.getElementById("id");//DOM对象
var $dom = $(dom);//jq对象

2. jQuery==>DOM对象,后面加[0]即可完成转换

var $dom = $("#id");//jq对象
var dom = $dom[0];//DOM对象

介绍以下 jQuery 方法的用法，给出范例

1. .each()

• 写法：.each(function(index,Element))
• 作用：遍历一个jquery对象，为每个匹配元素执行一个函数
• S('li').each(function(index){console.log(index + ":" + $(this).text())})
• 写法：jQuery.each(collection,callback(indexInArray, valueOfElement))
• 作用：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length-1.其他对象通过其属性名进行迭代

var obj = { "flammable":"inflammable", "duh":"no duh"};
$.each(obj,function(key,value){alert(key + ":" +value);})

2. $.extend()

• 写法：jQuery.extend([deep,] target [, object1 ] [, objectN ] )
• 当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）。
• 如果只有一个参数提供给$.extend()，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。这样，我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的
• 目标对象（第一个参数）将被修改，并且将通过.extend({}, object1, object2);`
• 在默认情况下，通过$.extend()合并操作不是递归的;
• 如果第一个对象的属性本身是一个对象或数组，那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。如果将 true作为该函数的第一个参数，那么会在对象上进行递归的合并。

var object1 = {
apple: 0,
banana: { weight: 52, price: 100 },
cherry: 97
};
var object2 = {
banana: { price: 200 },
durian: 100
}; // Merge object2 into object1
$.extend( object1, object2 );

3. .clone()

• 写法.clone([withDataAndEvents])
• .clone()方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点
• 通常我们将页面上一个元素插入到DOM里另一个地方，它会被从老地方移走，类似剪切的效果

$('.hello').appendTo('.goodbye');
<div class="container">
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

• 但是我们如果需要的是复制而不是剪切，我们可以像下面这样写代码：
  $('.hello').clone().appendTo('.goodbye');

4. .index()

• 写法 .index() / .index(selector)/ .index(element)
• 作用：从给定集合中查找特定元素index
  Search for a given element from among the matched elements.
• 没参数返回第一个元素index
• 如果参数是DOM对象或者jQuery对象，则返回参数在集合中的index
• 如果参数是选择器，返回第一个匹配元素index，没有找到返回-1
  举个例子

var listItem = $( "#bar" );
alert( "Index: " + $( "li" ).index( listItem ) );

5. .ready()

• 当DOM准备就绪时，指定一个函数来执行。
• 虽然JavaScript提供了load事件，当页面呈现时用来执行这个事件，直到所有的东西，如图像已被完全接收前，此事件不会被触发。
• 在大多数情况下，只要DOM结构已完全加载时，脚本就可以运行。传递处理函数给.ready()方法，能保证DOM准备好后就执行这个函数，因此，这里是进行所有其它事件绑定及运行其它 jQuery 代码的最佳地方。
• 如果执行的代码需要在元素被加载之后才能使用时，（例如，取得图片的大小需要在图片被加载完后才能知道），就需要将这样的代码放到 load 事件中。
  下面两种语法全部是等价的：

$(document).ready(handler)
$(handler)

• 我们也经常这样使用
  $(function(){ console.log('ready');});

window.onload和$(document).ready有什么区别？document.onDOMContentLoaded呢?

1. 执行时间

• window.onload必须等到页面内包括图片的所有元素加载完毕后再去执行。
• $(document).ready()时DOM结构回执完毕后就执行，不必等到加载完毕。

2. 方法个数

• window.onload不同同时编写多个，如果有多个window.onload方法，只会执行一个
• $(document).ready()可以同时编写多个，并且可以得到执行

3. 简化写法

• window.onload没有简化写法
• (function(){});
• document.onDOMContentLoaded在页面中触发[DOMContentLoaded]事件时触发。此时，文档被加载和解析，并且DOM被完全构造，但链接的资源（例如图像，样式表和子帧）可能尚未被加载。

jQuery实现点击icon后切换播放和暂停两种状态

<!DOCTYPE html>
<html lang='en'>
<head>
    <link rel='stylesheet' href='http://unpkg.com/font-awesome@4.7.0/css/font-awesome.min.css'>
    <script src='http://cdn.bootcss.com/jquery/3.3.1/jquery.js'>
    <meta charset="UTF-8">
    <title>icon-change</title>
    <style>
        .fa{
            color:red;
            font-size: 40px;
            margin: 100px;
        }
    </style>
</head>
<body>
    <div class="fa fa-pause"></div>
    <script>
        $('.fa').on('click',function(){$('.fa').toggleClass('fa-play')})
        $('.fa').on('click',function(){$('.fa').toggleClass('fa-pause')})
    </script>
</body>
</html>