1 为什么要使用jQuery
jQuery是一个JavaScript函数库、jQuery极大地简化了JavaScript编程。
jQuery设计的宗旨是“ write Less，Do More”，即倡导写更少的代码，做更多的事情。
它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery兼容各种主流浏览器。
2 第一个jQuery案例
2.1. 引入jquery函数库。
jQuery 可以从官方其网站 https://jquery.com/download/ 下载相应版本的函数库，并且在要使用的HTML页面引入即可。
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>2.2. 写jquery代码。
Jquery的语法：
Jquery元素.方法名(参数);3 jQuery元素
Jquery调用函数时都要使用jquery元素。
以前我们学习过dom元素。Jquery元素跟dom元素很像。都表示一个html中的标签。
dom元素和jquery元素的区别：
- js获取到的元素是dom元素。有两种方式，一种是根据id获取dom元素，Document.getElementById();
另一种是根据name获取到元素数组。 - Jquery获取到的是jquery元素。$(“标签名”)
- 两种元素都表示一个标签，但是不会混用方法。Jquery元素有jquery元素的方法。Dom元素不能调用。Dom元素有dom元素的方法，jquery元素调用不了。
<script type="text/javascript">
/* window.οnlοad=function(){
document.getElementById("div1").innerHTML="hello world";
} */
//等价于，上面和下面的效果是一样的
$(function(){
//给div添加内容为hello world
$("#div1").html("hello world");
});
</script>
</head>
<body>
<div id="div1" class="test">111</div>
</body>
</html>获取jquery元素的方式有很多。
$ (“标签名”)这个是获取元素的一种方式。Jquery中获取元素的方式有很多。但是他的语法都是$(“选择器”);
Jquery元素和dom元素的相互转换
- jquery转dom----------jquery元素.get(0);
- Dom转jquery---------$(dom元素)
例如：
<script type="text/javascript">
$(function(){
//jquery元素转换为dom元素
//$("div").get(0).innerHTML="hello world";
//dom元素转换为jquery元素
/* $(document.getElementById("div1")).html("hello world");
$(".test").html("hello world"); */
var content=$(".test").html();
alert(content);
});
</script>
</head>
<body>
<div id="div1" class="test">111</div>
</body>
</html>4 选择器
4.1 基本选择器
$ (“标签”) ：标签选择器
$ ("#id") : id选择器
$ (".class") ：Class选择器
交集选择器：两个选择器都满足的。$ (“input.test”)选择到class为test的input标签
并集选择器：$ (“input,div”)两个选择器用逗号分隔。表示选中input标签和div标签。
4.2 表单选择器
$(“:text”):选择到type=”text”的文本框。
$(“:button”):选择到type=”button”的按钮。
$(“:checked”):处于选中状态的复选框。
$(“:checkbox”):获取到type为checkbox的表单元素
4.3 属性选择器
$(“[属性名=属性值]”)
4.4 过滤性选择器
$(“input:first”):第一个input标签。
$(“input:eq(0)”)：索引为0的input标签
$(“input:eq(5)”):索引为5的input标签
$(“input:last”)：最后一个input标签
$(“tr:gt(0)”):选中索引大于0的所有tr标签。
$(“tr:not(:first)”)选中不是第一个的tr标签。
4.5 层次选择器
后代选择器 $(“form .test”):选择到form标签里面class为test的所有标签。
注意：
空格不能乱加，有空格了就是后代选择器。没有空格就是交集
子选择器
$(“form > .test”)：找到form标签的class为test的子标签。
5 Jquery元素的方法
5.1 Dom操作相关的方法
Html():获取或者设置标签的内容。带参表示设置，无参表示获取
当赋值时，jquery元素被选中几个，这些元素都会被正常赋值。但是，如果是取值，只能取到第一个元素的值。
Prop()：获取或者设置元素的属性值。Prop(“src”)：获取元素的src属性，两个参数表示给src属性赋值。
Css():可以设置元素的样式。一个参数是获取样式，两个参数是设置样式。
Size()：可以获取到选择器选中的元素的个数
Is():参数是一个选择器。Jquery元素.is(“选择器”)：判断jquery元素是否满足了is参数里面的选择器
Prev():找元素的紧邻的哥哥。
Next():找元素的紧邻的弟弟。
Children():找元素的亲儿子。
Val()等价于prop(“value”):表示获取文本框的value属性。
Parent():找当前元素的父元素。
Remove();删除掉当前元素。
5.2 事件
- 把js中的事件去除掉on
- 在jquery中事件都是函数，在js中事件是属性。
Jquery元素.click(function(){});
Click(function(){
});
Mouseover(function(){
});
//第一个参数对应mouseover，第二个参数对应mouseout
Hover(function(){},function(){});
5.3 动画
Show():显示元素,改变元素的高度，宽度，透明度
Hide()：隐藏元素
slideDown():显示元素,改变元素的高度
slideUp()：隐藏元素
fadeIn():显示元素，改变元素的透明度。
fadeOut()：隐藏元素
他们三组函数都可以添加时间类型的参数。
6 This关键字在jquery中的应用
- This表示的是调用这个函数的元素。在上面的案例中this就表示$(“input:checkbox:first”).
- 在jquery中this表示的是dom元素，不是jquery元素。所以我们使用this时需要将他转换为jquery元素。$(this)是jquery元素。
this的使用：
<script type="text/javascript">
//页面加载
$(function(){
//页面加载完后，给全选框添加一个点击事件
$("input:checkbox:first").click(
function(){
//var t=$("input:checkbox:first").prop("checked");
//this表示当前元素，谁调用了这个函数，谁就是当前元素。
//this但是他表示的dom元素
var t=$(this).prop("checked");
$("[name=f]").prop("checked",t);
}
);
});
function test(){
//处于选中的状态的复选框
if($("[name=f]:checked").size()==$("[name=f]").size()){
$("input:checkbox:first").prop("checked",true);
}else{
$("input:checkbox:first").prop("checked",false);
}
}
</script>
</head>
<body>
<input type="checkbox"/>全选<br/>
<input type="checkbox" name="f" onclick="test()"/>1<br/>
<input type="checkbox" name="f" onclick="test()"/>2<br/>
<input type="checkbox" name="f" onclick="test()"/>3<br/>
</body>
</html>注意
js中如果使用byName方法获取到多个dom元素，我们需要遍历数组，一个个的给元素的属性赋值。而在jquery中我们可以直接调用方法给所有的元素属性赋值。不需要遍历。
