jQuery Dom
创建元素
只需要把DOM字符串传入$方法即可返回一个jQuery对象
var obj = $('<div class="test"><p><span>Done</span></p></div>');
Question
以下 jQuery 方法有什么作用？如何使用？给出范例
- .append()
- .prepend()
- .before()
- .after()
- .remove()
- .empty()
- .html()
- .text()
append
$('body').append($('<p>hello</p>'))
在body的最后面添加了一个p标签hello
prepend
$('body').prepend($('<p>xixi</p>'))
在body的最前面添加一个p标签xixi
before
$('#hello').before($('<p>在前面添加一个标签</p>'))
在#hello前面添加一个标签
after
$('.wrap').after($('<p>cyw</p>'))
//输出1，cyw,2
remove
删除被选定的元素及其子元素
$('.wrap').remove()
empty
清空被选中的子元素
$('.wrap').empty()
没有删除wrap元素，但删除了他所有的子元素
html
把元素里面的内容换成html标签里面的内容
text
和innerText基本相同
%E5%92%8C)
node.html()有什么区别？
html()
- 无参html（）：取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档，返回的是一个String
<div><p>Hello</p></div>
$("div").html();
结果：Hello
- 有参html（val）：设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。返回一个jquery对象
<div></div>
$("div").html("<p>Nice to meet you</p>");
结果：[ <div><p> Nice to meet you</p></div> ]
text()
- 无参text（）：取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。返回的是一个String
<p><b>Hello</b> fine</p>
<p>Thank you!</p>
$("p").text();
结果：HellofineThankyou!
- 有参text（val）：设置所有匹配元素的文本内容, 与 html() 类似, 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体).返回一个jquery对象
<p>Test Paragraph.</p>
$("p").text("<b>Some</b> new text.");
结果:[ <p><b>Some</b> new text.</p> ]
jQuery核心方法
jQuery的对象转化
jQuery的对象转化为原生DOM对象
$('#p1')[0]
jQuery对象选择jQuery对象
$p.eq(2)
原生DOM对象转化为jQuery对象
$(document.querySelector('#p1'))
查看jQuery对象是否为空
jQuery.length是否为0
小技巧
当不知回调函数的参数是多少的时候
console.log(arguments)
回调函数中this ==== node
jQuery === $
.each
遍历一个对象，为每一个匹配元素执行一个函数
jQuery.each(collection,function)
一个调用的迭代函数，它可以用来无缝迭代对象和数组
.map(callbaxk(index,domElements))
通过一个函数匹配当前集合中的每个元素,产生一个包含新的jQuery对象
jQuery.extend([deep,] target [, object1 ] [, objectN ] )
通过extend()进行合并操作
原生DOM对象是什么
原生DOM对象是指document.querySelector()所选择的对象
.ready
$(function(){})
$.ready(function(){})
window.onload()和$(ducument).ready()的不同
window.onload是等待所有的资源加载完成之后再进行加载函数
$(document).ready是等待节点的布局完成以后再加载函数
button.disabled 和 button.getAttribute('disabled') 有什么区别？
- 「node.property」的方式不能获取自定义属性，
- 「node.getAttribute()」的方式可以获取自定义属性
- 「node. getAttribute()」获取自定义属性忽略属性的大小写
「node.getAttribute()」获取自定义属性得到的值的类型总是字符串
介绍以下 jQuery 函数的用法，给出范例
.val
<input type="text" value="1234" class='box'>
$('input').val('newvalue')
//输出input的框内value变为newvalue
.attr
<input type="text" value="1234" class='box'>
console.log($('input').attr('type'))
//输出 text
removeAttr
<input type="text" value="1234" class='box'>
$('input').removeAttr('value')
//输出value为空的input框
pop
与attrivute方法类似
css
var color = $(this).css('background')
$( this ).css( "background-color", "yellow" );
addClass
为元素添加class，不是覆盖原class，是追加，也不会检查重复
removeClass
移除元素单个/多个/所有class
.hasClass(className)
检查元素是否包含某个class，返回true/false
toggleClass
toggle是切换的意思，方法用于切换
jQuery 对象和原生 Dom 对象有什么区别？如何相互转换？
jQuery对象是通过$符号获得的符号，而原生Dom对象是通过document.querySelector()获得的对象
jQuery的对象转化为原生DOM对象
$('#p1')[0]
jQuery对象选择jQuery对象
$p.eq(2)
原生DOM对象转化为jQuery对象
$(document.querySelector('#p1'))
介绍以下 jQuery 方法的用法，给出范例
.each
$('p').each(function( idx, node){
console.log($(node).text(idx + ':' + 'hello'))
})
//在每一个p后面加上hello
$.extend()
当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）。
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 );
console.log(object1)
输出两个Obj所有属性的参数
clone()
通常我们将页面上一个元素插入到DOM里另一个地方，它会被从老地方移走，类似剪切的效果
但是我们如果需要的是复制而不是剪切，我们可以像下面这样写代码：
<div class="container">
<div class="goodbye">
Goodbye
<div class="hello">Hello</div>
</div>
</div>
<script>
$('.hello').clone().appendTo('.goodbye');
</script>
index
$('p').eq(20).index()
输出20
.ready
$(function(){})
$.ready(function(){})
$(document).ready是等待节点的布局完成以后再加载函数
window.onload和$(document).ready有什么区别？document.onDOMContentLoaded呢?
window.onload和$(document).ready都是页面加载时我们就去执行一个函数或者动作，具体细节上还是有区别的
最基本区别
1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后再去执行。
$(document).ready()时DOM结构回执完毕后就执行，不必等到加载完毕。
2.编写个数不同
window.onload不同同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且可以得到执行
3.简化写法
window.onload没有简化写法
(function(){});
点击 icon 后会切换播放和暂停两种状态
https://jsbin.com/?html,output
.find 后面选择class需要加上'.'
