jQuery是一个对网页DOM元素的操作进行封装的库
jQuery 如何获取元素?
$(元素) 等同于jQuery(元素) 。 这里的“元素”可以是类选择器.div1,也可以是id选择器#div1,还可以是div标签名,也可以是文档对象document。
这样就获取了这个元素,然后可以进行后续操作。
jQuery还提供了过滤器,筛选要获取的元素
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').first(); //选择第1个div元素
$('div').eq(5); //选择第6个div元素
也可以根据这个元素来找其他元素
$('div').next('p'); //选择div元素后面的第一个p元素
$('div').parent(); //选择div元素的父元素
$('div').closest('form'); //选择离div最近的那个form父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素
jQuery 的链式操作是怎样的?
链式操作就是选择一个元素后,后面可以接着调用API的方法,像链条一样一直调用下去
例如:
$('div').addClass('col').removeClass('col') 先添加class=col,再删除class=col
每调用一次方法,都会返回最近选择的jQuery对象,这个对象再调用一个方法。
jQuery 如何创建元素?
可以直接用jQuery函数创建一个新对象
$('<div></div>') 这里就创建了一个新的div元素
jQuery 如何移动元素?
$('div').append($('div.div1')) 把class=div1的元素添加到div元素内部最后一个位置
$('div.div1').appendTo($('div')) 也是把class=div1的元素添加到div元素内部最后一个位置
$('div').prepend($('div.div1')) 把class=div1的元素添加到div元素的内部的第一个位置
$('div.div1').prependTo($('div')) 把class=div1的元素添加到div元素的内部的第一个位置
$('div').after($('div.div1')) 把class=div1的元素放到div元素的后面
$('div.div1').insertAfter($('div')) 同上
$('div').before($('div.div1')) 把class=div1的元素放到div元素的前面
$('div.div1').insertBefore($('div')) 同上
jQuery 如何修改元素的属性?
$('div').attr('abc','123') 将div元素得abc属性的值修改为'123'
$('div').prop('checked',true) 给div元素设置checked属性