jQuery插件
插件使用的步骤
1.用户编写插孔
2.设计者提供插件
3.根据插件提供的文档连接插孔和插件
选择器插件
如果一个类的某个方法,不需要使用到this,则该方法建议设置为静态方法
通过static关键字修饰,被static修饰的方法,只能通过类名来调用,不能通过对象调用
<!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.0">
<title>Document</title>
</head>
<body>
<div id="box">
123456
</div>
<div class="box">
666666
</div>
<p>99999</p>
</body>
</html>
<script src="2.选择器插件.js"></script>
<script>
// 静态方法的调用
// console.log(Select.$("#box").innerHtMl);
// console.log(Select.$(".box").innerHtMl);
// console.log(Select.$("p").innerHtMl);
</script>
class Select{
static $(str){
if(str.charAt(0)=="#"){
// 得到box,字符串截取
return document.getElementById(str.slice(1,str.length));
}else if(str.charAt(0)=="."){
return document.getElementsByClassName(str.slice(1,str.length))[0]; //返回的是数组
}else{
return document.getElementsByTagName(str)[0];
}
}
}
jQuery的引入
1.本地引入
<script src="jQuery.js"></script>
2.在线cdn引入
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
jQuery的延迟加载
1.原生的延迟加载
window.onload=function(){
}
-
jQuery的延迟加载
$是jQuery核心对象的简写
$==jQuery
1.简写形式
$(function(){ console.log("hello word"); })
-
完全体
jQuery(document).ready(function(){ console.log("hello jQuery"); });
jQuery和原生代码之间到相互转换
-
jQueryDom和原生Dom有不同的API,所以经常需要进行转换
-
包装集:所有的jQueryDom都存在包装集中(包装集类似于数组).也就是无论单个还是多个元素,都放在包装集中
-
原生Dom转jQueryDom
$(原生dom):返回jQueryDom
let oBox=document.getElementById("box");
console.log(oBox.innerHTML);
//$(原生dom):返回jQueryDom
console.log($(oBox).html());
4.jQueryDom转原生Dom
let oBox=$("#box").get(0);
//将下标为0的jQueryDom的原生dom返回
console.log(oBox.innerHTML);
let oBox1=$("div")[1]; //等价于$("div").get(1);
console.log(oBox1.innerHTML);
jQuery选择器
基础选择器
1.id选择器
$("#box1").css("backgroundColor","red");
$("#box1").css({
backgroundColor:"red",
color:"yellow"
});
2.类选择器
$(".box").css("backgroundColor","red");
3.标签选择器
$("p").css("backgroundColor","pink");
4.群组选择器
$("span,strong").css("backgroundColor","blue");
5.通用选择器
$("*").css("backgroundColor","green");
//整个页面变绿,包括根节点
层次选择器
1.子代选择器
$("body>div").css({backgroundColor:"red"});
2.后代
$("body div").css({backgroundColor:"pink"});
3.相邻
$("#box2+div").css({backgroundColor:"red"});
4.兄弟选择器
$("#box2~div").css({backgroundColor:"blue"});
属性选择器
1.通过属性名来选择
$("div[class]").css({backgroundColor:"red"});
2.通过属性值来选择
$("div[id=box1]").css({backgroundColor:"red"});
3.通过组合属性名来获取元素
$("div[class] [id]").css({backgroundColor:"red"});
内容选择器
1.contains(内容):根据元素的内容查找来查找
$("div:contains('hello world')").css({backgroundColor:"red"});
2.empty:找内容为空的元素
$("div:empty").css({backgroundColor:"red"});
3.根据子元素来查找has(子元素)
$("div:has(#s)").css({backgroundColor:"red"});
伪类选择器
1.even:获取偶数元素
$("div:even").css({backgroundColor:"red"});
2.odd:获取奇数
$("div:odd").css({backgroundColor:"yellow"});
3.first:获取第一个元素
$("div:first").css({backgroundColor:"blue"});
4.last:获取最后一个元素
$("div:last").css({backgroundColor:"pink"});
5.eq(n):获取下表对应的元素
$("div:eq(3)").css({backgroundColor:"green"});
//下标从零开始
$("div").eq(3).css({backgroundColor:"green"});
//eq可以写外面
-
遍历
for(let i=0;i<$("div").length;i++){
// $("div:eq("+i+")").css({backgroundColor:"green"});
// 等价于下面这一句
$("div").eq(i).css({ backgroundColor:"orange" });
}
6.not:除了某个元素都选
$("div:not(#box1)").css({backgroundColor:"green"});
$("div").not("#box1").css({backgroundColor:"pink"});
7.lt(n):选中小于n的元素,但是不包含n
$("div:lt(3)").css({backgroundColor:"green"});
8.gt(n):选中大于n的元素
$("div:gt(2)").css({backgroundColor:"hotpink"});