jQuery学习归纳总结
常用版本:jQuery-1.12.4.js(未压缩) jQuery-1.12.4.min.js(已压缩)
// 引入jQuery
<script src = 'jQuery-1.12.4.js'></script>
一.jQuery与DOM
1.DOM与jQuery相比:
(1)获取元素名字太长
(2)代码冗余(for)
(3)onclick注册事件存在覆盖问题,addEventListener()注册事件不存在覆盖问题,但有兼容性问题
(4)没有动画效果,如果需要,就必须手动封装
2.dom对象与jQuery对象的转换
dom对象和jQuery对象不能混用,转换
(1)dom对象转成jQuery对象
$(dom对象)
(2)jQuery对象转成dom对象
① 通过中括号[]
② get()方法
3.this的使用
this是个dom对象,所以this要使用jQuery的方法,一定要先转成jQuery对象 $(this)
二.$符号
$的来源:jQuery
类型:函数
作用:根据参数的不同,作用不同
1.选择器:可以获取元素 $(‘div’)
2.函数:入口函数的作用 $(function(){})
3.dom对象:将dom对象转成jQuery对象 $(document)
4.HTML字符串:创建节点 $(‘HTML字符串’)
多库共存:jQuery释放$符号的控制权
// 释放$符号,并且把$符号的能力给C
var c = $.noConflict();
三.选择器
1.CSS选择器(将js中的选择器放入jQuery的$里面)
(1)id选择器 $(’#ZhangSan’)
(2)标签选择器 $(‘li’)
(3)类选择器 $(’.rendering’)
(4)并集选择器 $(’.xiaoming, #ZhangSan’)
(5)交集选择器 $(’.xiaoming.handsome’)
(6)子代选择器 $(’.xiaoming>ol>li’)
(7)后代选择器 $(‘xiaoming li’)
2.过滤选择器
(1):odd 从获取到的元素中过滤出下标为奇数的元素
(2):even 从获取到的元素中过滤出下标为偶数的元素
(3):first 从获取到的元素中过滤出第一个元素
(4):lase 从获取到的元素中过滤出最后一个元素
(5):eq 从获取到的元素中过滤出指定下标的元素
$('li:odd')
$('li:even')
$('li:first')
$('li:last')
$('li:eq(4)') // 获取到里li里面的第5个元素
3.筛选选择器
(1)children()
jq提供的children()方法,可以获取元素内的所有子元素,支持传参,参数为选择器,可以根据选择器筛选出指定的子元素
$(this).children('ul').show();
$(this).chileren('ul').hide();
(2)find() 找后代元素
$(this).find('li')
(3)sibilings() 获取当前元素的所有兄弟元素,不包含自己
// 排他,突出等
$(this).css('opacity', 1);
$(this).sibings().css('opacity', 5);
// 简化上面俩行代码,链式编程
$(this).css('opacity', 1).sibings().css('opacity', 5)
(4)next()和nextAll()
下一个兄弟元素和后面所有兄弟元素
(5)prev()和prevAll()
上一个兄弟元素和前面所有兄弟元素
(6)parent() 查找父元素
(7)eq() 查找指定下标元素
// 获取li的第三个元素
$('li').eq(2); // 相当于$('li:eq(2)');
四.样式操作和属性操作
1.css()操作
(1)获取样式
css(name) // 只能获取第一个
(2)设置样式
① css(name, value):
参数:name:样式名 value:样式值
② css(obj)
参数:包含多个样式的对象
// 给li标签设置样式
$('li').css('fontSize', '50px');
$('li').css('color':'red', 'fontSize':'50px');
2.class操作
添加类选择器:addClass()
移除类选择器:removeClass()
判断是否有该选择器:hasClass()
切换类名(有就移除,没有就添加):toggleClass()
3.属性attr操作
获取属性:attr(name)
设置单个属性:attr(name, value)
设置多个属性(参数为对象):attr(obj)
移除属性:removeAttr(name)
$(selector).attr(attribute)
$(selector).attr(attribute,value)
$(selector).attr({
attribute:value, attribute:value ...})
prop方法和attr方法
① 对于表单元素的checked,selected,disable属性,使用prop操作
② 除了表单元素的三个属性使用prop方法外,其它都可以使用attr方法
③ 对于自定义属性,使用attr方法(abc, index)
④ 对固有属性,使用prop方法(title, id, style, checkd, selected, disable)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>全选案例</title>
<style>
<style>
* {
padding: 0;
margin: 0;
}
tbody tr