什么是jQuery和jQuery选择器

一、什么是jQuery

1.1什么是jQuery

流行的Javascript类库

为了简化JavaScript的开发，一些JavsScript,库就涎生了。JavaScript库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的Web2.0特性的富客户端页面。并且兼容各大浏览器。

1.2jQuery特点

• 轻量级：封装后的库只有不到100K，下载很快
• 强大的选择器：方便快速查找DOM元素
• 隐式遍历（迭代）：一次操作多个元素
• 读写合一：读数据/写数据用的是一个函数
• 链式调用：可以通过不断调用jQuery对象的方法
• 事件处理
• DOM操作
• 样式操作
• 动画
• 浏览器兼容
• 丰富的插件支持

1.3如何使用jQuery

使用jQuery的三个步骤

1. 引入jQuery文件
2. 入口函数
3. 功能实现

jQuery文件下载地址：jQuery

jQuery的入口函数：

        // 第一种
        $(document).ready(function(){

        })
        // 第二种
        $().ready(function(){

        })
        // 第三种
        $(function(){
            
        })

jQuery入口函数与JavaScript入口函数的对比：

1. JavaScript的入口函数要等到页面中所有资源加载完成才开始执行
2. jQuery的入口函数只会 等待文档树加载完成就开始执行，并不会等待图片、文件的加载

二、jQuery选择器

2.1什么是jQuery选择器

jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。

注意：jQuery选择器返回的是jQuery对象

2.2基本选择器

名称	用法	描述
ID选择器	$("#id");	获取指定ID的元素
类选择器	$(".class");	获取同一类的class的元素
标签选择器	$("div");	获取同一类标签的所有元素
并集选择器	$("div,p,li");	用逗号分隔，只要符合条件之一就可
交集选择器	$("div.redClass");	获取class为redClass的div元素

总结：跟css的选择器用发一样，外层加$()

2.3基本属性选择

名称	用法	描述
[attribute]	$('input[checked]').attr("checkde",false);	匹配包含给定属性的元素。常用于单选或复选的checked
[attribute=value]	$("input[name='username']").val("");	匹配给定的属性是某个特定值的元素。常用于选择指定的input标签。
[attribute!=value]	$("div[name!='box']").html("");	匹配给定的属性是不包含某个特定值的元索。
[attribute^=value]	$("div[class^='b']").css("background-class","red")	匹配给定的属性是以某些值开始的元素。
[attribute*=value]	$("div[class*='b']").css("background-class","red")	匹配给定的属性是以包含某些值的元素,

2.4操作标签的属性

名称	用法	描述
标签属性方法	attr(name)/ attr(name, value)	读/写非布尔值的标签属性
标签属性方法	prop(name)/ prop(name, value)	读/写布尔值的标签属性
删除属性方法	removeAttr(name)/removeProp(name)	删除指定名字的属性
自定义属性	data()	读写标签的附加数据(data-*属性)

 2.5过滤选择器

注意：这类选择器都带着冒号

名称	用法	描述
:eq (index)	$("li:eq(2y").css("color" , "red");	获取到的li元素中，选择索引导号为2的元素，索引号index从0开始
:odd	$("li:eq(2y").css("color" , "red");	获取到的li元素中，选择索引号为奇数的元素
:even	$("li:even").css("color", "red"");	获取到的li元素中，选择索引号为偶数的元素
:first	$('tr:first').css('backgroundColor';'red');ckgroundColor','red');	匹配找到的第一个元素
:last	$(td:last').css('backgroundColor';'red');	匹配找到的最后一个元素
:gt(index)	$('li:gt(3)).css('backgroundColor",'red');	匹配所有大于给定索引值的元素
:lt(index)	$("1i:lt(3)).css('backgroundColor','red');	匹配所有小于给定索引值的元素
:not(selector)	$(li:gt(3):not(":last")).css('backgroundColor';"red');	去除所有与给定选择器匹配的元素