jQuery_day02

day02内容

jQuery技术
封装DOM操作，事件处理，AJAX技术，动画。
DOM操作：对元素进行增删改查，对属性进行增删改查，对样式进行增删改查，对元素内容进行增删改查。
事件处理：事件绑定，解绑，事件代理，event对象，事件冒泡，阻止默认行为。
…
…

jQuery函数
在引入了jquery文件后，会得到一个函数，叫jQuery或者$
函数调用传递实参类型
$(‘div’) 返回一个jQuery对象，类数组对象，存放DOM对象(DOM节点)
$(‘

hello

’) html代码片段字符串，创建好的jQuery对象，内部放的是创建好的DOM对象
$(function(){}) 在文档加载完毕之后执行函数
$(document).ready(function(){
})
window.onload = function(){}
var dom = document.getElementById(‘one’);
$(dom)将DOM对象转换为jQuery对象，才可以调用jQuery对象的方法，css()html()....jQuery对象通过选择器获取jQuery对象，或者$(‘html代码片段’)，或者$(dom)

DOM<–>jQuery对象转换
DOM–>jQuery对象 $(dom)
jQuery对象–>DOM $(‘div’)[0]
在操作节点的时候，务必确保操作对象是jQuery对象还是DOM对象，如果是jQuery对象，使用jQuery对象的属性和方法。如果是DOM对象，可以使用原生DOM操作
var dom = document.getElementById(‘one’);
dom.style.color = ‘red’;
$(dom).css(‘color’,‘red’)
dom.css(‘color’,‘red’); //错误
一般在jQuery内，不用原生DOM操作
复制节点
原生DOM有 cloneNode(true/false) 浅复制false 深复制true。是否复制内部内容，并不涉及事件的复制。默认浅复制
jQuery对象有 clone(true/false) 浅复制false 深复制true。会复制内容，是否复制事件。默认浅复制

找tr内的checkbox
$(‘tr’).find(’[type=checkbox]’)
$(‘tr’).find(‘input[type=checkbox]’)
$(‘tr’).find(’:checkbox’)
$(‘tr :checkbox’)

找div的后代中的class为one的元素
$(‘div’).find(’.one’)
$(‘div .one’)

获取离checkbox最近的祖先tr
$(’:checkbox’).closest(‘tr’)
获取离class one最近的一个祖先div
$(’.one’).closest(‘div’);

过滤出div中带有class one的
$(‘div.one’)
$(‘div’).filter(’.one’)
过滤出索引大于5的div
$(‘div’).filter(function(index,item){
//return index>5;
return $(item).contains(‘hello’);
});

map filter

熟练掌握
原理
熟练使用
工具

表格的增删改查