JQuery的使用

Posted 2020-09-07

一：jQuery简介
jQuery是由javascript编写的框架。jQuery的宗旨：write less,do more.
在页面中引入jQuery:
<script src="jquery-3.1.1.js"></script>

二：jQuery语法：
1.最基本语法
$(document).ready(function(){
// 等DOM结构绘制完毕时就执行
}
);
简写方式：
$(function(){
// 等DOM结构绘制完毕时就执行
});
这种方式与window.onload的区别：
区别一：执行时间：
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready(function(){})是DOM结构绘制完毕后就执行，不必等到加载完毕。
区别二：编写个数：
window.onload不能编写多个，如果编写多个，只会执行一个。
$(document).ready(function(){})可以写多个。
区别三： window.onload没有简写形式。
$(document).ready(function(){})的简写形式是$(function(){});

2.DOM对象与jQuery对象
为了与DOM对象区分，我们经常使用"$变量名"来作为jQuery对象的名称。
jQuery对象转换成DOM对象的方法：
jQuery对象是一个类似于数组的对象，所以，转换成DOM对象有两种方式：
方式一：var DOM对象=jQuery对象[0];
方式二：var DOM对象=jQuery对象.get(0);

DOM对象转换成jQuery对象的方法：
直接将DOM对象用$()括起来就可变为jQuery对象。
var jQuery对象=$(dom对象);

三：jQuery选择器
1. id选择器：#id名
eg: var $div=$("#mydiv")

2. 全选选择器 *
eg: $("*")

3. 类选择器 .class名称
eg: $(".myClass")

4. 动画选择器 :animated 选择所有正在执行动画效果的元素.
eg: $( ":animated" )

5. 按钮选择器 :button 选择所有按钮元素和类型为按钮的元素
$(":button")

6. 获取所有同辈元素（匹配 “prev” 元素之后的所有 兄弟元素。）
$( "prev ~ siblings" )
此选择器可以使用 $("prev").nextAll("siblings")方法替代