jQueryDom

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基本相同

$node.text()和$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没有简化写法
$(document).ready(function())可以简写成$(function(){});

点击 icon 后会切换播放和暂停两种状态

https://jsbin.com/?html,output

.find 后面选择class需要加上’.’