jQuery
- jQuery是js的一个函数库，就是用js写的一堆函数。
jQuery的优点
- 封装了各种DOM操作的API，简化了js的DOM开发。
- jQuery中有各种选择器，能够快速定位DOM。
- 解决了浏览器兼容问题。
- 使用链式编程，隐式迭代简化了js的开发。
- 简化了ajax的开发。
- jQuery有丰富的插件。
引入jQuery
<script src="jQuery文件所在的路径"></script>
window.onload和document.ready的区别
-
1.window.onload：
整个页面加载完毕：包含音频、视频
一个页面只能写一个window.onload，写多次，后写的会覆盖前面的，只显示最后写的。 -
2.document.ready：
整个DOM树绘制/渲染完毕，节点加载完毕
一个页面可以写多个，从上到下依次显示window.onload = function(){ alert("window.onload1"); } window.onload = function(){ alert("window.onload2"); } $(function(){ alert("jq1"); }); $(function(){ alert("jq2"); });
jQuery编程风格
$.(document).ready(function(){
//JQ代码,相当于原生js的：document.ready
})
简写：
$.(function(){
})
JQ对象和JS对象转化
JQ对象：通过jQuery选择器拿到DOM对象，然后对其封装，使其能够调用jQuery的API，
相当于把DOM对象重新包装了一下。
$("选择器"):JQ对象
JQ对象不等于JS对象JQ的函数不能和JS混用
JS对象转换为JQ对象：
var JQ对象 = $(JS对象)
JQ对象转JS对象：
var JS对象 = $("选择器")[0];
jQuery选择器
基本选择器
- id选择器
语法
$("#id")：获取对应id的JQ对象
<h1 id="col" onclick="change()">color</h1>
//页面加载完毕时点击时触发change函数修改样式
<script type="text/javascript">
//document.ready:
//DOM树绘制完毕，即页面所有节点加载完毕
$(document).ready(
function(){
//注册方法
$("#col").click(function(){
//this:触发当前事件的节点
$(this).css("background-color","red");
});
});
</script>
- 标签选择器：
$(“标签名”)
<style type="text/css">
li{list-style: none; line-height: 22px; cursor: pointer;}
.current{background: #6cf; font-weight: bold; color: #fff;}
</style>
<ul>
<li id="current">jQuery简介</li>
<li>jQuery语法</li>
<li>jQuery选择器</li>
<li>jQuery事件与动画</li>
<li>jQuery方法</li>
</ul>
<script type="text/javascript">
$(function(){
//对该页面的所有li添加click事件
//隐式迭代，隐式遍历
$("li").click(function(){
//给id为current添加
$("#current").addClass("current");
});
});
- 类选择器：
$(".类名")
$(".cls").addClass("current");
给类名为cls的添加current样式
层次选择器
-
后代选择器：空格
$(“选择器1 选择器2”); -
子选择器：
$(“选择器1>选择器2”) -
邻兄选择器：>
$(“选择器1+选择器2”) -
后兄选择器：+
$(“选择器1~选择器2”)
只选中后面的兄弟 -
.siblings(“选择器”)：
选择满足选择器的所有兄弟 -
层次选择器API：
扫描二维码关注公众号，回复： 4015058 查看本文章
JQ的方法可以使用链式编程：
.next(“选择器”)：下一个兄弟.prev(“选择器”)：上一个兄弟
.siblings(“选择器”):获取所有兄弟
.children(“选择器”)：获取所有孩子，不包含孩子的后代
.parent(“选择器”):获取父节点
.parents(“选择器”)：获取所有祖先
属性选择器：
- $ ("[属性名]")：获取包含该属性的标签
例如：$(“a[href]”) - $("[属性名=‘属性值’]")：
获取包含该属性，并且属性值=条件的标签 - $("[属性名！=‘属性值’]")：
获取包含该属性，并且属性值!=条件的标签 - $("[属性名^=‘属性值’]")：
获取包含该属性，并且属性值以条件值开头 - $ ("[属性名$=‘属性值’]")：
获取包含该属性，并且属性值以条件值结尾 - $("[属性名*=‘属性值’]")：
获取包含该属性，并且属性值包含条件值 - 属性选择器经常和其它选择器结合使用
过滤选择器
-
基本过滤选择器：从多个中选出一个或者多个
：eq(index):相等
：gt(index):大于
：lt(index):小于
：first:第一个
：last:最后一个
：even:偶数
: odd:奇数
下标从0开头 -
可见性过滤选择器：
选择器：hidden :获取隐藏的元素
选择器：show :获取显示的元素
可见性过滤选择器：
选择器：hidden :获取隐藏的元素
选择器：show :获取显示的元素
绑定事件：
js和jQuery都是基于事件触发
- 1.直接通过事件名绑定
- .click()
点击事件 - .mouseover()
鼠标移入事件 - .mouseout()
鼠标移出事件
- .click()
$().mouseover(function(){
//移入后执行的操作
}).mouseout(function(){
//移出后执行的操作
});
简化写法：
$().hover(function(){
//移入后执行的操作
},function(){
//移出后执行的操作
});
hover=mouseover+mouseout;
- .focus()
focus:获取焦点事件 - .blur();
blur:失去焦点事件
失去鼠标光标 - 2.通过bind()进行绑定
.bind():对节点绑定事件
绑定一个事件：
.bind(“事件名”,function(){})
绑定多个事件：
.bind({
事件名1：function(){},
事件名2：function(){}
...
});
-
JQ如何获取一个元素的innerHTML/innerText和元素的value
js jQuery nnerHTML .html() nnerText .text() value .val() -
JQ创建节点
$(html字符串)：创建节点
$("<li>承宗</li>")
- JQ插入节点
- 往节点内部插：通过父节点插入
插入到最后： - 父节点.append(要插入的节点)
要插入的节点.appendTo(父节点) - 插入到头部：
父节点.prepend(要插入的节点)
要插入的节点.prependTo(父节点) - 往节点外部插入：通过同辈节点插入
- 插如后为弟弟：
节点.after(要插入的节点)
要插入的节点.insertAfter(节点） - 插入后为哥哥节点：
节点.before(要插入的节点);
要插入的节点.insertBefore(节点);
- 往节点内部插：通过父节点插入
注意：
JQ的insertBefore：插入同辈节点
JS的insertBefore：是插入子节点
- JQ删除节点
- .remove(“选择器”):
删除节点，同时删除该节点下的所有子节点，并且解除该节点绑定的所有事件 - .detach(“选择器”)：返回值为删除的节点对象:JQ对象
删除节点，同时删除该节点下的所有子节点，但会保留该节点绑定的所有事件和数据 - .empty()：
清空节点下的元素
- .remove(“选择器”):
注意：
empty()：只是清空子节点，但保留当前节点
remove()/detach()：删除该节点同时删除其子节点
- 删除一般都是先定位节点，再删除；
但也可以通过使用有参函数添加选择器进行删除：删除多个
var $deletedLi = $("li").detach("li.xxoo");
- 替换节点
老节点.replaceWith(新节点)
新节点.replaceAll(老节点) - 克隆节点
节点.clone(true/false):
返回值为克隆的新节点：JQ对象
默认是false:不复制节点上绑定的事件
true:会复制节点绑定的事件 - JQ：each():重点
- 遍历数组、集合
//function无参
$(选择器).each(function(){
//$(this):获取当前元素：JQ对象
})
//function有参
$(选择器).each(function(index,data){
//index:下标
//data:当前元素：JS对象
})
$.each(要遍历的数组,function(index,data){});
一般用于遍历JS数组
$(选择器).each():遍历页面节点
$.each():遍历JS数组