jQuery 使用
1. jQuery 是一个JS库,封装了原生的JS,得到一套完整的方法.
核心 :write less, do more
版本 :
1.xx.x 版本的jQuery兼容IE6,7,8
2.xx.x 版本的jQuery不再兼容IE 6,7,8
优点 :
1. 简化DOM操作,像操作css一样操作DOM
2. 直接通过选择器设置样式
3. 简化JS事件操作
4. 采用链式调用操作JS节点
-------------------------------
5. Ajax技术更加完善
6. 提供各种便捷的动画处理
7. 基于jQuery的插件使用更便捷
8. 可以通过jQuery自定义插件
2. jQuery使用
1. 引入jQuery文件
<script src=""></script>
2. 如果想要使用jQuery语法,必须将文件引入操作放在
代码前面
3. 使用jQuery
1. jQuery对象 :实际上是对原生的JS对象进行封装,
封装之后可以使用jQuery提供的方法
注意 :
1. jQuery对象可以使用jQuery提供的方法,
原生JS对象可以使用原生JS方法,方法不能混用
2. jQuery对象和原生JS对象可以共存,也可以
互相转换
2. 工厂函数 $()
jQuery对象可以使用 jQuery或者 $表示
使用 :
$('div'); //获取div对象
3. 原生对象与jquery对象互相转换
1. DOM -> jquery
var h1 = document.get...;
var $h1 = $(h1);
2. jq -> dom
var h1 = $h1[0];
var h1 = $h1.get(0);
3. jQuery选择器
1. 根据提供的选择器到页面获取元素,返回都是jquery对象
组成的数组
2. $("选择器");
3. 选择器分类 :
1. 基础选择器
1. id选择器
$("#id");
2. 类选择器
$(".className");
3. 标签选择器
$("tagName");
3. 群组选择器
$("selector1,selector2,..");
2. 层级选择器
1. 后代选择器
$("selector1 selector2");
2. 子选择器
$("selector1>selector2");
3. 相邻兄弟选择器
$("selector1+selector2");
匹配紧跟在selector1后,满足selector2的元素
只匹配紧邻selector1的第一个兄弟元素,
如果紧邻的第一个兄弟元素不满足selector2,
就匹配失败
4. 通用兄弟选择器
$("selector1~selector2");
匹配selector1后面所有满足selector2的兄弟元素
3. 筛选选择器
也叫过滤选择器,需要结合其他选择器使用
1. :first
匹配一组元素中的第一个
et:
"p:first"
2. :last
匹配一组元素中的最后一个
selector:last;
3. :not
否定筛选,将selector匹配的元素过滤在外,
匹配其他元素
:not(selector)
4. :odd
匹配偶数行对应的元素
5. :even
匹配奇数行对应的元素
6. :eq(index)
匹配下标等于index的元素
7. :lt(index)
匹配下标小于index的元素
8. :gt(index)
匹配下标大于index的元素
4. 属性选择器
1. 根据属性名筛选元素
[attribute]
2. 根据属性名和属性值筛选元素
[attribute=value]
3. 匹配属性值以指定字符开头的元素
[attribute^=value]
^表示以...开头
4. 匹配属性值以指定字符结尾的元素
[attribute$=value]
$表示以...结尾
5. 匹配属性值中包含指定字符的元素
[attribute*=value]
6. 匹配属性名不等于指定属性值的元素
[atttibute!=value]
5. 子元素过滤选择器
1. :first-child
匹配属于父元素中的第一个子元素
2. :last-child
匹配父元素中最后一个子元素
3. :nth-child(n)
匹配父元素中第n个子元素
6. jquery操作DOM
1. 内容操作
1. html()
设置或读取jquery对象中的HTML内容
类似于原生JS innerHTML
2. text()
设置或读取jquery对象中的文本内容
类似原生JS innerText
3. val()
设置或读取表单对象的value值
2. 属性操作
1. attr()
读取或设置jquery对象的属性
et :
$('div').attr("id");
$('div').attr('class','c1');
2. removeAttr()
移除指定属性
et :
$('div').removeAttr('id');
3. 样式操作
1. attr()
为元素添加id或class属性,对应选择器样式
2. addClass('className')
为元素的class属性赋值,匹配选择器样式
3. removeClass('')
移除指定的class属性值
参数可以省略,省略之后表示清空类选择器
4. toggleClass()
切换样式,给出class属性值,如果元素存在指定的
类名,则移除,不存在则添加
5. css()
设置或读取元素CSS属性
1. css('width')
读取元素的宽度
2. css('width',"300px")
设置元素的样式
3. css(JSON对象)
为元素设置一组CSS样式
css({
"color":"red",
"width":"300px"
})
4. 节点查询
1. children() / children('selector')
获取jquery对象的所有子元素或者
获取指定选择器匹配的所有子元素
注意 :只包含直接子元素,不考虑后代子元素
2. find('selector')
获取满足selector的所有后代元素
3. prev() / prev('selector')
获取前一个兄弟元素或者
获取前一个兄弟元素,必须满足selector
4. next() / next('selector')
获取后一个兄弟元素或者
获取后一个兄弟元素,必须满足selector
5. siblings() / siblings('selector')
获取前后所有的兄弟元素或者
满足selector的所有兄弟元素
6. parent()
获取jquery对象的父元素
5. 节点操作
1. 创建节点
var $h1 = $("<h1>一级标题</h1>");
var $h2 = $("<h1></h1>");
h2.html();
h2.attr();
h2.css();
2. 添加节点
1. 以子元素的形式插入到页面中
1. $parent.append($h1);
将新创建的对象作为最后一个子元素插入
2. $parent.prepend($h2);
将新创建的对象作为第一个子元素添加
2. 以兄弟元素的形式插入到页面中
1. $obj.after($h1);
将新创建的对象作为$obj的下一个兄弟元素插入
2. $obj.before($h2);
将新创建的对象作为$obj的前一个兄弟元素插入
3. 删除节点
$obj.remove();
移除$obj
6. 事件操作
1. 页面加载完毕之后再执行
原生JS :
window.onload = function(){};
jquery :
1. $(document).ready(function(){
});
2. $().ready(function(){});
3. $(function(){});
原生onload事件与jquery的ready()方法区别 :
1. 原生的onload事件多次使用时,前面的会被覆盖
不执行,需要做特殊判断和处理,而ready方法没有
此问题,可以重复调用多次,按顺序依次执行
2. 原生的onload事件会等待文档中DOM树及所有
资源都加载完毕之后才执行,而ready方法会等文档
DOM树加载完毕后就执行
2. jquery事件绑定
1. 使用bind()
$obj.bind('事件函数名',function(){});
注意 :省略on前缀
et :
$('div').bind("click",function(){});
2. 使用事件函数
$obj.事件名称(function (){});
注意 :省略on前缀
et :
$('div').click(function(){});
3. 事件对象及属性
1. 获取事件对象与原生方法一致
都是以参数形式自动传入
$('div').click(function(evt){
console.log(evt);
});
2. 事件对象的属性保持一致
target
offsetX
...
4. this对象
当前函数或方法的调用对象
想要看更多的课程请微信关注SkrEric的编程课堂