首页 > 代码库 > JQuery的使用

JQuery的使用

一:jQuery简介
jQuery是由JavaScript编写的框架。jQuery的宗旨:write less,do more.
在页面中引入jQuery:
<script src="http://www.mamicode.com/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")方法替代

 

 


JQuery的使用