jQuery续写
一、筛选器方法
1、下一个元素
$("#id").next() 下一个
$("#id").nextAll() 下一个所有与
$("#id").nextUntil("#c1") 下一个id为c1的标签
2、上一个
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#c2")
3、父亲元素
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
4、子级与兄弟元素
$("#id").children(); // 儿子们
$ ("#id").siblings() // 兄弟们
5、查找
$("div").filter(".c1") //从结果集中过滤出有c1样式类的
等价于 $("div.c1")
二、左侧菜单栏
1、代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>左侧菜单示例</title> <style> .left { float: left; left: 0; top: 0; width: 20%; height: 50%; background-color: rgb(47, 53, 61); } .right { float: right; left: 0; top: 0; width: 20%; height: 50%; background-color: rgb(47, 53, 61); } .menu { color: white; } .title { text-align: center; padding: 10px 15px; border-bottom: 1px solid #23282e; } .items { background-color: #181c20; } .item { padding: 5px 10px; border-bottom: 1px solid #23282e; } .hide { display: none; } </style> </head> <body> <div class="left"> <div class="menu"> <div class="item"> <div class="title">菜单一</div> <div class="items"> <div class="item">111</div> <div class="item">222</div> <div class="item">333</div> </div> </div> <div class="item"> <div class="title">菜单二</div> <div class="items hide"> <div class="item">111</div> <div class="item">222</div> <div class="item">333</div> </div> </div> <div class="item"> <div class="title">菜单三</div> <div class="items hide"> <div class="item">111</div> <div class="item">222</div> <div class="item">333</div> </div> </div> </div> </div> <div class="right"> <input type="button" id="c1" value="切换"> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script> $(".c").onclick(function (){ // jQuery绑定事件 // 隐藏所有class里有.items的标签 // $(".items").addClass("hide"); // 批量操作 // $(this).next().removeClass("hide"); // jQuery链式操作 $(".title").next().removeClass('hide').parent().siblings().find('.items').addClass('hide') }); </script>
三、样式操作
1、操作css
addClass();// 添加指定的CSS类名。 removeClass();// 移除指定的CSS类名。 hasClass();// 判断样式存不存在 toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
实例
css("color","red")//DOM操作：tag.style.color="red"
$("p").css("color", "red"); //将所有p标签的字体设置为红色
2、位置操作
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置 position()// 获取匹配元素相对父元素的偏移 scrollTop()// 获取匹配元素相对滚动条顶部的偏移 scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
注意：.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。和.position()的差别在于：.position()是相对于相对于父级元素的位移。
3、尺寸操作
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
$("button").click(function(){
var txt="";
txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
4、文本操作
文本操作 HTML代码： html()// 取得第一个匹配元素的html内容 html(val)// 设置所有匹配元素的html内容 文本值： text()// 取得所有匹配元素的内容 text(val)// 设置所有匹配元素的内容 值： val()// 取得第一个匹配元素的当前值 val(val)// 设置所有匹配元素的值 val([val1, val2])// 设置多选的checkbox、多选select的值
代码演示：
<input type="checkbox" value="ball1" name="hobby">球1 <input type="checkbox" value="ball2" name="hobby">球2 <select multiple id="s1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> 设置值： $("[name='hobby']").val(['ball1', 'ball2']); $("#s1").val(["1", "2"]) 示例： 获取被选中的checkbox或radio的值： <label for="c1">女</label> <input name="gender" id="c1" type="radio" value="0"> <label for="c2">男</label> <input name="gender" id="c2" type="radio" value="1"> 可以使用： $("input[name='gender']:checked").val()
5、属性操作
attr(attrName) // 返回第一个匹配元素的属性值 attr(attrName, attrValue) // 为所有匹配元素设置一个属性值 attr({k1: v1, k2:v2}) // 为所有匹配元素设置多个属性值 removeAttr() // 从每一个匹配的元素中删除一个属性 用于checkbox和radio prop() // 获取属性 removeProp() // 移除属性
//注意：处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。 <input type="checkbox" value="1"> <input type="radio" value="2"> <script> $(":checkbox[value='1']").prop("checked", true); $(":radio[value='2']").prop("checked", true); </script> prop和attr的区别： attr全称attribute(属性) prop全称property(属性) 虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。
6、文档操作
添加到指定元素内部的后面 $(A).append(B)// 把B追加到A $(A).appendTo(B)// 把A追加到B 添加到指定元素内部的前面 $(A).prepend(B)// 把B前置到A $(A).prependTo(B)// 把A前置到B 添加到指定元素外部的后面 $(A).after(B)// 把B放到A的后面 $(A).insertAfter(B)// 把A放到B的后面 添加到指定元素外部的前面 $(A).before(B)// 把B放到A的前面 $(A).insertBefore(B)// 把A放到B的前面 移除和清空元素 remove()// 从DOM中删除所有匹配的元素。 empty()// 删除匹配的元素集合中所有的子节点。 例子： 点击按钮在表格添加一行数据。 点击每一行的删除按钮删除当前行数据。 替换 replaceWith() replaceAll() 克隆 clone()// 参数
7、克隆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
button {
height: 50px;
width: 100px;
background-color: orange;
}
</style>
</head>
<body>
<button>快速克隆</button>
<script>
// var butEle = document.getElementsByTagName('button')[0];
// butEle.onclick = function () {
// // $(this).after($(this).clone(true))
// // clone只克隆标签和文本 不克隆事件 加参数true即可克隆事件
// $(this).clone(true).insertAfter(this);
// }
$('button').on('click',function () {
$(this).clone(true).insertAfter(this);
})
</script>
</body>
</html>
8、事件
1、常用事件
click(function(){...}) hover(function(){...}) blur(function(){...}) focus(function(){...}) change(function(){...}) keyup(function(){...})
2、事件绑定
.on( events [, selector ],function(){}) events： 事件 selector: 选择器（可选的） function: 事件处理函数
3、事件移除
.off( events [, selector ][,function(){}]) off() 方法移除用 .on()绑定的事件处理程序。 events： 事件 selector: 选择器（可选的） function: 事件处理函数
4、阻止事件后续执行
return false; // 常见阻止表单提交等 e.preventDefault();
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <div> <a id="myhref" href="http://www.cnblogs.com">博客园</a> </div> <script type="text/javascript" src="js/jQuery1.11.1.js"></script> <script type="text/javascript" > $(function(){ $("#myhref").click(function(event){ //能力检测 event=event||window.event; if(event.preventDefault){ //非IE下内核 webkit引擎，此时这样设置就不能跳转a标签，如果不符合window event.preventDefault(); }else{ event.returnValue=false; //IE引擎 } }); }); </script> </body> </html>
5、阻止事件冒泡：冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。
return：false 和 e.stoppropagation()
代码演示：当点击span时，会触发div与body 的点击事件。点击div时会触发body的点击事件。此时就需要阻止
<body> <div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div> <div id="msg"></div> </body> 对应jQuery代码 <script type="text/javascript"> $(function(){ // 为span元素绑定click事件 $('span').bind("click",function(event){ var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>"; $('#msg').html(txt); event.stopPropagation(); // 阻止事件冒泡 }); // 为div元素绑定click事件 $('#content').bind("click",function(event){ var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>"; $('#msg').html(txt); event.stopPropagation(); // 阻止事件冒泡 }); // 为body元素绑定click事件 $("body").bind("click",function(){ var txt = $('#msg').html() + "<p>body元素被点击.<p/>"; $('#msg').html(txt); }); }) </script>
6、页面的载入
第一种
$(document).ready(function(){
// 在这里写你的JS代码...
})
第二种（简写）
$(function(){
// 你在这里写你的代码
})
第三种
直接写在body内最下方
注意：
window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用,后面可以跟函数
jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）
例子：没有使用unload
#没有使用unload报错 <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>没有使用</title> <style type="text/css"> #bg{ width:120px; height:120px; border:4px solid blue; } </style> <script type="text/javascript"> document.getElementById("bg").style.backgroundColor="#F00"; </script> </head> <body> <div id="bg"></div> </body> </html> 注意：以上实例我们要实现的效果是将 div 的背景颜色设置为 #F90，但是并没有实现此效果，因为代码是顺序执行的，当执行到 document.getElementById("#bg").style.backgroundColor="#F00" 的时候，还没有加载到此 div 对象，所以背景颜色没有设置成功。
使用onload
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>使用</title> <style type="text/css"> #bg{ width:120px; height:120px; border:4px solid blue; } </style> <script type="text/javascript"> window.onload=function(){ document.getElementById("bg").style.backgroundColor="#F00"; } </script> </head> <body> <div id="bg"></div> </body> </html>
7、委托事件
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <button>点我</button> <button>点我</button> <button>点我</button> <button>点我</button> <script> // $('button').on('click',function () { // alert(123) // }) // 事件委托 // 将点击事件委托给body内所有的button按钮 $('body').on('click','button',function () { alert(123) }) </script> </body> </html>
8、动画效果
1、jQuery animate() 方法用于创建自定义动画。
语法：
$(selector).animate({params},speed,callback); 必传：params 参数定义形成动画的 CSS 属性。 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。 可选的 callback 参数是动画完成后所执行的函数名称。 $("button").click(function(){ $("div").animate({left:'250px'}); }); 此代码演示 animate() 方法的简单应用；它把 <div> 元素移动到左边，直到 left 属性等于 250 像素为止：
2、操作多个属性
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); }); }); </script> </head> <body> 注意：默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div>
3、jQuery hide()如何隐藏部分文本。使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
语法：
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
例子：
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
4、滑动：
语法：
$(selector).slideToggle(speed,callback);
jQuery 拥有以下滑动方法：
- slideDown() 方法用于向下滑动元素。
- slideUp() 方法用于向上滑动元素。
- slideToggle() 在 slideDown() 与 slideUp() 方法之间进行切换
演示：
<script src="/jquery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideToggle("slow"); #切换 }); }); </script>
5、淡入浅出
jQuery 拥有下面四种 fade 方法：
- fadeIn() 显现
- fadeOut() 褪色
- fadeToggle() 切换
- fadeTo() 到达某个程度
语法：
$(selector).fadeIn(speed,callback);
注意：fadeTo()
$(selector).fadeTo(speed,opacity,callback);
演示：
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
9、each和data
1、each：一个通用的迭代函数，它可以用来无缝迭代对象和数组。
jQuery.each(collection, callback(indexInArray, valueOfElement))：
演示：
li =[10,20,30,40]
$.each(li,function(i, v){
console.log(i, v);//index是索引，ele是每次循环的具体元素。
})
输出结果为：
自建索引 值
0 10
1 20
2 30
3 40
2、.each(function(index, Element))：遍历一个jQuery对象，为每个匹配元素执行一个函数。
3、data：在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
.data(key, value):
描述：在匹配的元素上存储任意相关数据。
$("div").data("k",1);//给所有div标签都保存一个名为k，值为1
