Jquery它是javascript的一个轻量级框架,对javascript进行封装,它提供了很多方便的选择器。供你快速定位到需要操作的元素上面去。还提供了很多便捷的方法。
怎么使用jquery
Jquery它是一个库(框架),要想使用它,必须先引入!
jquery-1.8.3.js:一般用于学习阶段。
jquery-1.8.3.min.js:用于项目使用阶段
Jquery的简单入门
<script>
//整个文档加载完毕后执行
function init(){
alert("张三");
}
//整个文档加载完毕后(包括图片)执行
window.onload= function(){
alert("老王");
}
//dom树绘制完毕后执行,可能DOM元素关联的东西并没有加载完
jQuery(document).ready(function(){
alert("李四");
});
//jquery的简写方法(页面加载)
$(function(){
alert("王五");
});
</script>
获取元素
JS:document.getElementById();
JQ:$(“#id”);
Jquery对象与DOM对象转换
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
function JSWrite(){
//document.getElementById("span1").innerHTML="美美哒!";
var spanEle = document.getElementById("span1");
$(spanEle).html("美美哒!");
}
$(function(){
/*document.getElementById("btn1").onclick = function(){
document.getElementById("span1").innerHTML="帅帅哒!";
}*/
$("#btn1").click(function(){
//JQ对象转换成DOM对象的第一种方式
//$("#span1")[0].innerHTML="呵呵哒!";
//JQ对象转换成DOM对象的第二种方式
$("#span1").get(0).innerHTML="呵呵哒!";
});
});
</script>
</head>
<body>
<input type="button" value="JS写入" onclick="JSWrite()"/>
<input type="button" value="JQ写入" id="btn1"/><br /><br />
<span id="span1">sssss</span>
</body>
</html>
注意:JQ对象只能操作JQ里面的属性和方法
JS对象只能操作JS里面的属性和方法。
jquery的选择器
基本选择器
id选择器:KaTeX parse error: Expected 'EOF', got '#' at position 3: (“#̲id名称”); 元素选择器:(“元素名称”);
类选择器:$(“.类名”);
通配符:*
多个选择器共用(并集)
<script>
$(function(){
//选择为one的元素
$("#btn1").click(function(){
$("#one").css("background-color","pink");
});
//选择样式为mini的元素
$("#btn2").click(function(){
$(".mini").css("background-color","pink");
});
//选择所有的div元素
$("#btn3").click(function(){
$("div").css("background-color","pink");
});
//选择所有元素
$("#btn4").click(function(){
$("*").css("background-color","pink");
});
//选择id为two并且样式为mini的元素
$("#btn5").click(function(){
$("#two .mini").css("background-color","pink");
});
});
</script>
层级选择器
ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)
parent > child :在给定的父元素下匹配所有的子元素(儿子)
prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的,同桌)
prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)
<script>
$(function(){
//选择body中的所有的div元素
$("#btn1").click(function(){
$("body div").css("background-color","pink");
});
//选择body中的第一级的孩子
$("#btn2").click(function(){
$("body>div").css("background-color","pink");
});
//选择id为two的元素的下一个元素
$("#btn3").click(function(){
$("#two+div").css("background-color","pink");
});
//选择id为one的所有的兄弟元素
$("#btn4").click(function(){
$("#one~div").css("background-color","pink");
});
});
</script>
基本过滤选择器
(
′
l
i
′
)
.
f
i
r
s
t
(
)
等
价
于
:
('li').first()等价于:
(′li′).first()等价于:(“li:first”)
<script>
$(function(){
//body中的第一个div元素
$("#btn1").click(function(){
$("div:first").css("background-color","pink");
});
//body中的最后一个div元素
$("#btn2").click(function(){
$("div:last").css("background-color","pink");
});
//选择body中的奇数的div
$("#btn3").click(function(){
$("div:odd").css("background-color","pink");
});
//选择body中的偶数的div
$("#btn4").click(function(){
$("div:even").css("background-color","pink");
});
});
</script>
属性选择器
<script>
//选择有id属性的div
$(function(){
$("#btn1").click(function(){
$("div[id]").css("background-color","pink");
});
//选择有id属性的值为two的div
$("#btn2").click(function(){
$("div[id='two']").css("background-color","pink");
});
});
</script>
表单选择器
<title>表单选择器</title>
<link rel="stylesheet" type="text/css" href="../../css/style.css"/>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
//选择所有input元素
$("#btn1").click(function(){
$(":input").css("background-color","pink");
});
//选择文本框
$("#btn2").click(function(){
$(":text").css("background-color","pink");
});
});
</script>