jQuery简介
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是为了更加便捷的开发，并且在兼容性方面十分优秀。
jQuery语法
详细参考:http://www.w3school.com.cn/jquery/
jQuery语法也是查找到要操作的标签对象(jQuery对象)并对其执行想要的操作(使用封装的方法)。
基础语法： $(selector).action()
示例：
$(this).hide()---隐藏当前元素 (效果等同于display:none;)
$(this).show()---显示当前元素(和hide相对)
$("p").hide()---隐藏所有的<p>元素
$("p.test").hide()---隐藏所有class="test"的<p>元素
$("#test").hide()---隐藏所有的id="test"的元素
选择器
-
基本选择器
$("*") //选取全部元素 $("element") //通过标签名称查找($("p")查找所有p标签) $("#id") //通过id属性查找元素 $(".class") //通过class属性查找元素 $(".class,p,div") //多钟不同类型元素(组合)查找 -
层级选择器
$(".outer div") // 后代选择器查找 $(".outer>div") // 子代选择器查找 $(".outer+div") // 通过毗邻查找，匹配紧邻的兄弟元素 $(".outer~div") // 向下找所有兄弟元素 -
属性选择器
$("[id="div1"]") //有id属性且值为"div1"的元素 $("[sex]") //有sex属性的元素 $("[sex="male"]") //有sex属性且值为"male"的元素
筛选器
-
基本筛选器
$('li:first') //第一个元素 $('li:last') //最后一个元素 $("tr:even") //索引为偶数的元素，从 0 开始 $("tr:odd") //索引为奇数的元素，从 1 开始 $("tr:eq(1)") //给定索引值的元素 $("tr:gt(0)") //大于给定索引值的元素 $("tr:lt(2)") //小于给定索引值的元素 $(":focus") //当前获取焦点的元素 $(":animated") //正在执行动画效果的元素 -
表单筛选器
$(":input") // 匹配所有 input, textarea, select 和 button 元素 $(":text") // 所有的单行文本框 $(":password") // 所有密码框 $(":radio") // 所有单选按钮 $(":checkbox") // 所有复选框 $(":submit") // 所有提交按钮 $(":reset") // 所有重置按钮 $(":button") // 所有button按钮 $(":file") // 所有文件域 $("input:checked") // 所有选中的元素 $("select option:selected") // select中所有选中的option元素 -
内容筛选器
$("div:contains('test')") // 包含test文本的元素 $("td:empty") // 不包含子元素或者文本的空元素 $("div:has(p)") // 含有选择器所匹配的元素 $("td:parent") // 含有子元素或者文本的元素 -
查找筛选器
$("div").children() // 查找div下的所有儿子标签 $("div").children().first() //查找第一个儿子元素 $("div").children("#test") //查找id等于"test"的儿子元素 $("div").find() // 查找div下的所有后代标签 $("p").next() // 紧邻p元素后的下一个兄弟元素 $("p").nextAll() // p元素之后所有的兄弟元素 $("#test").nextUntil("#test2") // id为"test"元素之后到id为'test2'之间所有的兄弟元素(开区间) $("p").prev() // 紧邻p元素的上一个兄弟元素 $("p").prevAll() // p元素之前所有的兄弟元素 $("#test").prevUntil("#test2") // id为"test"元素之前到id为'test2'之间所有的兄弟元素(开区间) $("p").parent() // 每个p元素的父元素 $("p").parents() // 每个p元素的所有祖先元素,body,html $("#test").parentsUntil("#test2")// id为"test"元素到id为'test2'之间所有的父级元素(开区间) $("div").siblings() // 所有的兄弟元素,不包括自己 $("p").hasClass("test") // 查找p标签有class名字为test
each循环
方式一:
#格式：$.each(obj,function)
arry=[11,22,33,44];
dic={"sex":"male","age":30};
$.each(arry,function(index,v){
console.log(index,v)
});
$.each(dic,function (index,v) {
console.log(index,v)
});
//执行结果：0 11 1 22 2 33 3 44
sex male age 30
#停止当次循环函数和停止当次之后的所有函数
arry=[11,22,33,44];
$.each(arry,function(index,v){
if (index===2) {
return false; //停止信号类似break信号
}
console.log(index,v)
}); //结果为 0 11 1 22
arry=[11,22,33,44];
$.each(arry,function(index,v){
if (index===2) {
return; //停止信号类似break信号
}
console.log(index,v)
}); //结果为 0 11 1 22 3 44
方式二：
#格式：$("p").each(function)
<p>111</p>
<p>222</p>
<p>333</p>
<script>
$("p").each(function () {
console.log($(this).index(),$(this).text());
})
</script>
// 执行结果: 0 "111"
1 "222"
2 "333"
属性操作
-
基本熟悉操作
attr操作： 取值操作：$("").attr(“属性名”); 赋值操作：$("").attr(“属性名”，“属性值”); 删除属性：$("").removeAttr("属性名")； 例如: $("a").attr("href"); //返回所有a标签的href属性值 $("a").attr("href","http://wwww.baidu.com"); //设置（更改）所有a标签的href属性值 $("a").removeAttr("href") //将所有a标签的href属性删除 ############################ prop操作： 取值操作：$("").prop(“属性名”); 赋值操作：$("").prop(“属性名”，“属性值”); 删除属性：$("").removeProp("属性名")； $("input[type='checkbox']").prop("checked", true); // 选中复选框 $("input[type='checkbox']").prop("checked", false); // 取消复选框 $("a").removeProp("href"); // 将所有a标签的href属性删除
总结attr和prop
attr可以找到自定义的属性、prop只能找到固有的属性。checked和selected属性最好使用prop，其它使用attr方法。
-
class操作
$("p").addClass("test"); // 为p元素class属性增加一个"test"值 $("p").removeClass("test"); // 从p元素中class属性删除一个"test"值 $("p").toggleClass("test"); // 如果存在就删除,否则就添加 $("p").hasClass("test"); // 判断有没有 'test' 类,返回布尔值 -
文本操作
$('p').html(); // 返回p元素的html内容 $("p").html("Hello <b>test</b>!"); // 设置p元素的html内容 $('p').text(); // 返回p元素的文本内容 $("p").text("test"); // 设置p元素的文本内容 $("input").val(); // 获取文本框中的值(value的值) $("input").val("test"); // 设置文本框中的内容
CSS操作
1. 返回CSS属性
$("p").css("background-color"); //返回匹配到的p标签的css背景色属性值
2. 设置CSS属性
$("p").css("background-color","yellow");
3. 设置多个CSS属性
$("p").css({"background-color":"yellow","font-size":"200%"});
CSS位置操作
$("div").offset()
$("div").offset().left //获取匹配到的元素当前的左偏移量(相对于文档的偏移)
$("div").offset().top //获取匹配到的元素当前的上偏移量(相对于文档的偏移)
$("div").offset({top:200,left:0}) //更改偏移量大小
$("div").postion() //返回匹配元素相对于第一个已定位的父元素的偏移量(此方法只对可见元素有效)
$(window).scrollTop() //返回滚动条相对滚动条顶部的偏移
$(window).scrollLeft() //返回滚动条相对滚动条左侧的偏移
鼠标拖动图标示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
}
.box{
200px;
height: 200px;
background-color: orange;
}
body{
height: 900px;
}
</style>
</head>
<body>
<div class="box"></div>
<script src="jquery-3.2.1.js"></script>
<script>
var x1;
var y1;
var $mar_left;
var $mar_top;
$(".box").mouseover(function () {
$(this).css("cursor","move");
});
$(".box").mousedown(function (k) {
// $(this).css("cursor","move");
x1=k.clientX;
y1=k.clientY;
$mar_left=$(this).offset().left;
$mar_top=$(this).offset().top;
$(document).mousemove(function (e) {
var x2=e.clientX;
var y2=e.clientY;
// $(".box").offset({left:$mar_left+x2-x1,top:$mar_top+y2-y1});
var $x=$mar_left+x2-x1;
var $y=$mar_top+y2-y1;
if ($x < 0) {
$x=0;
}
if ($y < 0) {
$y=0;
}
if ($x>1545.45) {
$x=1545.45;
}
if ($y>700) {
$y=700;
}
// $(".box").css({"marginLeft":$mar_left+x2-x1,"marginTop":$mar_top+y2-y1});
$(".box").css({"marginLeft":$x,"marginTop":$y});
console.log($mar_left+x2-x1);
console.log($mar_top+y2-y1);
});
});
$(document).mouseup(function () {
$(document).off("mousemove");
})
</script>
</body>
</html>
滚动条示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
100%;
height: 2000px;
background-color: darkgray;
}
#return_top{
80px;
height: 60px;
text-align: center;
line-height: 60px;
background-color: blue;
color: white;
position: fixed;
bottom: 20px;
right: 20px;
display: none;
}
</style>
</head>
<body>
<div class="box"></div>
<div id="return_top">TOP</div>
<script src="jquery-3.2.1.js"></script>
<script>
$(window).scroll(function () {
if ($(window).scrollTop()>200) {
$("#return_top").show();
}
else {
$("#return_top").hide();
}
});
$("#return_top").click(function () {
$(window).scrollTop(0);
})
</script>
</body>
</html>
CSS尺寸操作
$("div").height(); // 返回div内容区域的高度
$("div").width(); // 返回div内容区域的宽度
$("div").innerHeight(); // 返回div的内容区+pading区域后的高度
$("div").innerWidth(); // 返回div的内容区+pading区域后的宽度
$("div").outerHeight(); // 返回div的内容区+pading区域+border区域后的高度
$("div").outerWidth(); // 返回div的内容区+pading区域+border区域后的宽度
$("div").outerHeight(true); // 返回div的内容区+pading区域+border区域+margin区域后的高度
$("div").outerWidth(true); // 返回div的内容区+pading区域+border区域+margin区域后的宽度
节点操作
-
内部插入
#节点元素之间父子关系 $("div").append("<b>Hello World!</b>"); // 每个div元素内后面追加内容 $("b").appendTo("div"); // 将b元素追加到div内后 $("div").prepend("<b>Hello World!</b>"); // 每个p元素内前面追加内容 $("b").prependTo("div"); // 将b元素追加到div内前 -
外部插入
#节点元素之间兄弟关系 $("div").after("<p>after you</p>") //每个div元素同级之后插入内容 $("div").before("<p>before you</p>") //每个div元素同级之前插入内容 $("p").insertAfter("input") //将所有p元素插入到input元素的后面 $("p").insertBefore("input") //将所有p元素插入到input元素的前面 -
替换
$("p").replaceWith("<b>Paragraph</b>"); // 将所有匹配到的p元素替换成指定的新元素 $(document.createElement("div")).replaceAll("p");; // 用新建的div元素替换所有的p元素 -
删除
$("p").remove() //删除被选元素（及其子元素） $("p").empty() //删除被选元素内所有内容(文本内容和子元素)------也就是清空所有内容(保留空标签) -
复制
$("p").clone() //生成匹配到的p元素的副本，包含子节点、文本和属性,还包括事件处理器。
动画效果
-
显示隐藏
$("p").show() // 将匹配到的元素显示 $("p").show(1000); // 参数表示速度,("slow","normal","fast"),也可设置为毫秒 $("p").hide() // 将匹配到的元素隐藏 $("p").toggle(); // 切换，匹配到的元素是隐藏的就显示，是显示的就隐藏 -
滑动
$("p").slideDown("1000"); // 用1000毫秒时间将段落滑动隐藏(以滑动方式隐藏) $("p").slideUp("1000"); // 用1000毫秒时间将段落滑动显示(以滑动方式显示) $("p").slideToggle("1000"); // 切换，匹配到的元素是滑动隐藏的就滑动显示，是滑动显示的就滑动隐藏(滑动方式) -
淡入淡出
$("p").fadeIn("900"); // 淡入已隐藏的元素 $("p").fadeOut("900"); // 淡出显现的元素 $("p").fadeToggle("900"); // 如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。 $("p").fadeTo("slow", 0.6); // 用900毫秒时间将段落的透明度调整到0.6(渐变为给定的不透明度) -
回调函数
由于 JavaScript 语句（指令）是逐一执行的 - 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。 为了避免这个情况，可以以参数的形式添加 Callback 函数。 错误： $("p").hide(1000); alert("The paragraph is now hidden"); 当动画 100% 完成后，即调用 Callback 函数。 语法： $("p").hide(speed,callback) $("p").hide(1000,function(){ alert("The paragraph is now hidden"); });
事件
一些事件
$(document).ready(function) // 页面加载成功之后才执行函数内的事件。--------等价于$(function)
$(window).unload(function) // 用户离开页面时触发函数执行
$(window).scroll(function) // 当用户拖动滚动条时触发事件
$(window).resize(function) // 当浏览器窗口的大小改变时触发事件
$("img").error(function) //当img元素遇到错误(没有正确载入)时，触发error事件
#例如：
$("img").error(function(){
$("img").replaceWith("
Missing image!
");
});
#鼠标相关事件
$("p").click(function) // 鼠标单击时触发
$("p").dbclick(function) // 鼠标双击时触发
$("input").focus(function) // 元素获得焦点时,触发 focus 事件
$(":text").blur(function) // 元素失去焦点时,触发 blur事件
$("div").hover(function,function) // 鼠标移到元素区域触发第一个函数执行，鼠标移出元素区域触发第二个函数执行。
$("div").mousedown(function) //在元素区内鼠标按下时触发
$("div").mouseup(function) // 元素上放松鼠标按钮时触发事件
$("div").mouseover(function) // 当鼠标指针位于元素上方时触发事件
$("div").mouseout(function) // 当鼠标指针从元素上移开时触发事件
$("div").mouseleave(function) // 当鼠标指针从元素上移开时触发事件,(mouseleave和mouseout不同之处是，mouseleave是当鼠标离开被选元素时才会触发，而mouseout是不论鼠标离开被选元素还是任何它的子元素都会触发mouseout事件)
$("div").mousemove(function) // 当鼠标指针在指定的元素中移动时触发事件
#键盘相关事件
$("input").keydown(function) //当用户按下一个按键后触发事件
$("input").keypress(function) //当用户按下一个键并释放(弹起)按键后触发事件
$("input").keyup(function) //当用户释放按键时触发事件
#表单事件
$(":text").focus(function) // 元素获得焦点时,触发 focus 事件
$(":text").blur(function) // 元素失去焦点时,触发 blur事件
$("select").change(function) //元素的value值发生改变时触发change事件(例如：当用户select另一个时)
$(":text").select(function) //当用户选中input元素中的文本时触发
$(":submit").submit(function) //当用户提交表单时触发
on方法绑定事件和事件委派
$("p").on("click",function) // 给p元素绑定一个click事件。------------等价于$("p").click(fucntion)
$("ul").on("click","li",function) // 给ul元素下面的li元素委派一个click事件，事件触发时执行function内逻辑(常用于一个固定的父代元素标签来委派下面的后代元素标签)
$("ul").off("click") //移除通过on()方法绑定的事件，第一个参数event事件是必须要传入的，多个事件用空格隔开
event对象的使用
// 所有的事件函数都可以传入event参数方便处理事件(任何参数名都可以，比如function(e),参数名字是没有影响的)
$("p").click(function(event){
alert(event.type); //"click"
});
#event对象的属性方法
event.pageX // 事件发生时，鼠标距离网页左上角的水平距离(left)
event.pageY // 事件发生时，鼠标距离网页左上角的垂直距离(top)
event.clientX // 事件发生时，鼠标距离网页左上角的水平距离(left)
event.clientY // 事件发生时，鼠标距离网页左上角的垂直距离(top)
event.keyCode //类型: Number, 说明: 最后响应键盘按键的 keyCode 值 (ASCII码值)