jQuery=JavaScript+Query 是JavaScript的开发库,对其的一个功能封装
一、引入方式
描述:jQuery相当于是一个补丁,外部引入js的方式使用
1. 在线引入
说明:在js中”https://code.jquery.com/jquery-3.1.1.js”
2. 离线引入
说明:下载后导入本地”jquery-3.1.1.min.js”
二、语法
$(选择器).action()
说明:选择器中除了this、document不加引号,其他的都要加引号。
三、选择器
基本选择器
说明:和CSS的选择器基本相同(1)元素选择器:标签名
(2)id选择器:#id名
(3)class选择器:.class名
(4)群组选择器:A选择器,B选择器
(5)*选择器:全选(通常用它来去除所有的外边距)层次选择器
(1)后代选择器:M N
说明:选中M后代中所有的N(2)子代选择器:M>N
说明:选中M子一代中所有的N(3)兄弟选择器:M~N
说明:选中M之后所有的同级N(4)相邻选择器:M+N
说明:选中M之后相邻的一个N
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<script src="https://code.jquery.com/jquery-3.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#first p").css("background-color", "green");
$("#second>p").css("background-color", "gray");
$("#third_h~p").css("background-color", "yellow");
$("#fourth_h+p").css("background-color", "red");
});
</script>
</head>
<body>
<div id="first">
<h5>后代选择器</h5>
<p>子一代p</p>
<a>子一代a</a>
<div>
<p>子二代p</p>
</div>
</div>
<hr/>
<div id="second">
<h5>子一代选择器</h5>
<p>子一代p</p>
<a>子一代a</a>
<div>
<p>子二代p</p>
</div>
</div>
<hr/>
<div id="third">
<h5 id="third_h">兄弟选择器</h5>
<p>子一代p1</p>
<a>子一代a</a>
<div>
<p>子二代p</p>
</div>
<p>子一代p2</p>
</div>
<hr/>
<div id="fourth">
<h5 id="fourth_h">相邻选择器</h5>
<p>子一代p1</p>
<p>子一代p2</p>
<a>子一代a</a>
<div>
<p>子二代p</p>
</div>
<p>子一代p3</p>
</div>
</body>
</html>
3.属性选择器
(1)属性:$(“a[name]”)
说明:选中含有name属性的所有a元素
(2)属性值:$(“a[name=’night_light’]”)
说明:选中name为指定的值的所有a元素(“!=”表示不等于)
四、文档就绪
window.onload = function(){}
等价于
$(“document”).ready(function(){})
等价于
$(function(){})
五、获取内容
- html内容:$(选择器).html
- 纯文本内容:$(选择器).text
- 表单内容:$(选择器).val
六、动作
修改内容:$(选择器).html(“content”)
说明:将选中的元素的内容改为content修改样式:
说明:当CSS也设定了样式的时候,CSS优先(1)$(选择器).css(“color”,”red”);
说明:当只有一个的时候,中间用逗号隔开(2)$(选择器).css({“color”:”red”,”font-size”:”50px”});
说明:当有多个样式时,每一个属性与属性值用冒号隔开,属性之间用逗号隔开,并且要加上大括号3.修改属性: $(选择器).attr()
七、常用事件
click(点击)、dblclick(双击)、mouseenter(鼠标移入)、mouseleave(鼠标移出)、keyup(放开按键)、submit(提交)、change(改变)、focus(获取焦点)、blur(失去焦点)
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动作</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#first p").click(function(){/*点击改变内容*/
$(this).html("<h3>新的内容</h3>");
});
$("#second_p1").click(function(){/*点击改变颜色*/
$(this).css("color","red");
});
$("#second_p2").click(function(){/*点击改变样式*/
$(this).css({"color":"gray","font-size":"50px"});
});
$("#third input").dblclick(function(){/*双击改变属性*/
$(this).attr({"type":"password","readOnly":"true"});
});
});
</script>
</head>
<body>
<div id="first">
<p>点我改变内容</p>
</div>
<hr/>
<div>
<p id="second_p1">点我改变颜色</p>
<p id="second_p2">点我改变样式</p>
</div>
<hr/>
<div id="third">
<input type="text" value="双击改变属性"></input>
</div>
</body>
</html>