Jquery是一个JavaScript库,封装了开发过程中我们常用的功能
在使用Jquery之前,我们需要先拿到Jquery的文件,可以去Jquery官网下载,看到DownloadJquery字样的点击就可以了。
- 在html页面进行引入操作<script src = "Jquery路径"><script>
- 书写Jquery入口函数 $(function (){ //在此书写功能 });
- 接下来书写功能就可以了
这块我们要了解一下Jquery入口函数与window.onload的区别
一般常见的Jquery入口函数有两种
- $(document).ready(function (){ //功能实现代码 });
- $(window).ready(function (){ //功能实现代码 });
- $(funtion (){ //功能实现代码 });
看起来第一个和第二个特别相似是把,但是有一定细微差别,$(document) 和$( ) 这种入口方式是不用等页面所有资源加载完成就去执行功能代码,他是加载完成整个dom树之后开始执行功能代码 , 而$(window)这种方式是等页面所有资源(
这些文件资源包括:页面文档、外部的js文件、外部的css文件、图片等。)加载完成之后才开始执行功能代码,这种情况和window.onload是一样的
Jquery对象和dom对象的相互转换
为什么我们要让两个不同对象之间进行转换呢?
jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法. 乱使用会报错。
他们之间如何转换呢?
Jquery对象转DOM有两种方法
例如 var $box = $(".box");
var box = box[索引值];
或者 var box = box.get(索引值)
经过转换之后就可以随意使用dom对象的方法了
DO对象转Jquery对象的方法
例如 var box = document.getElementByTagName("div" );
var $box = $(box);
此时$box就可以随意使用Jquery对象中的方法了。
Jquery的常用选择器
基本选择器
符号(名称) | 说明 | 用法 |
# | Id选择器 | $(“#btnShow”).css(“color”, “red”); 选择id为btnShow的一个元素(返回值为jQuery对象,下同) |
. | 类选择器 | $(“.liItem”).css(“color”, “red”); 选择含有类liItem的所有元素 |
element | 标签选择器 | $(“li”).css(“color”, “red”); 选择标签名为li的所有元素 |
层级选择器
符号(名称) | 说明 | 用法 | |
层级选择器 | |||
空格 | 后代选择器 | $(“#j_wrap li”).css(“color”, “red”); 选择id为j_wrap的元素的所有后代元素li | |
> | 子代选择器 | $(“#j_wrap > ul > li”).css(“color”, “red”); 选择id为j_wrap的元素的所有子元素ul的所有子元素li | |
基本过滤选择器 | |||
:eq(index) | 选择匹配到的元素中索引号为index的一个元素,index从0开始 | $(“li:eq(2)”).css(“color”, ”red”); 选择li元素中索引号为2的一个元素 | |
:odd | 选择匹配到的元素中索引号为奇数的所有元素,index从0开始 | $(“li:odd”).css(“color”, “red”); 选择li元素中索引号为奇数的所有元素 | |
:even | 选择匹配到的元素中索引号为偶数的所有元素,index从0开始 | $(“li:odd”).css(“color”, “red”); 选择li元素中索引号为偶数的所有元素 |
筛选选择器
符号(名称) | 说明 | 用法 |
find(selector) | 查找指定元素的所有后代元素(子子孙孙) | $(“#j_wrap”).find(“li”).css(“color”, “red”); 选择id为j_wrap的所有后代元素li |
children() | 查找指定元素的直接子元素(亲儿子元素) | $(“#j_wrap”).children(“ul”).css(“color”, “red”); 选择id为j_wrap的所有子代元素ul |
siblings() | 查找所有兄弟元素(不包括自己) | $(“#j_liItem”).siblings().css(“color”, “red”); 选择id为j_liItem的所有兄弟元素 |
parent() | 查找父元素(亲的) | $(“#j_liItem”).parent(“ul”).css(“color”, “red”); 选择id为j_liItem的父元素 |
eq(index) | 查找指定元素的第index个元素,index是索引号,从0开始 | $(“li”).eq(2).css(“color”, “red”); 选择所有li元素中的第二个 |