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:
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数组