jQuery基础知识梳理（一）

1. jQuery的概念
jQuery是一个快速、简洁的JavaScript库,其设计的宗旨是\”write Less , Do More”, 倡导写更少的代码,
做更多的事情。
jQuery封装了JavaScript常用的功能代码,优化了DOM操作、事件处理、动画设计和Ajax交互。
学习jQuery本质:就是学习调用这些函数(方法)。
jQuery出现的目的是加快前端人员的开发速度,我们可以非常方便的调用和使用它,从而提高开发效率。
2.JQuery的环境配置
1)去下载jquery库文件:（官网：http://www.jquery.com）
通常有两个版本:
未压缩版本：–用在开发和调试。
压缩版本:–产品发布的时候使用，可以提高性能和减少带宽
2).从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery
3.jQuery入口函数与js入口函数区别
jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。可以执行多次，第N次都不会被上一次覆盖，可以简写为$(function(){ });
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。只能执行一次，如果第二次，那么第一次的执行会被覆盖

jQuery入口函数的三种写法**(推荐使用第三种)：

//\'第一种入口函数$(document).ready(function(){alert(\'第一种入口函数\')})//\'第二种入口函数jQuery(document).ready(function(){alert(\'第二种入口函数\')})//第三种入口函数$(function(){alert(\'第三种入口函数\')})

js的入口函数：

window.onload = function () {alert(\'js入口函数\')}

4.选择器
1）基本选择器：
1、#id用法: $(”#myDiv”); 返回值 单个元素的组成的集合
2、Element用法: $(”div”) 返回值 集合元素
3、class 用法: $(”.myClass”) 返回值 集合元素
4、用法: $(””) 返回值 集合元素
5、selector1, selector2, selectorN 用法: $(”div,span,p.myClass”) 返回值 集合元素

2)层次选择器：
1 、ancestor descendant
用法: $(”form input”) ; 返回值 集合元素
2、parent > child 用法: $(”form > input”) ; 返回值 集合元素
3、prev + next用法: $(”label + input”) ; 返回值 集合元素
4、prev ~ siblings用法: $(”form ~ input”) ; 返回值 集合元素

3)过滤选择器：
过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头
按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器.

4）基础过滤选择器：
1、:first
用法: $(”tr:first”) ; 返回值 单个元素的组成的集合
2、:last
用法: $(”tr:last”) 返回值 集合元素
3、:not(selector)
用法: $(”input:not(:checked)”)返回值 集合元素
4、:even
用法: $(”tr:even”) 返回值 集合元素
5、: odd
用法: $(”tr:odd”) 返回值 集合元素
6、:eq(index) 用法: $(”tr:eq(0)”) 返回值 集合元素
7、:gt(index) 用法: $(”tr:gt(0)”) 返回值 集合元素
8、:lt(index) 用法: $(”tr:lt(2)”) 返回值 集合元素
9、:header(固定写法) 用法: $(”:header”).css(”background”, “#EEE”) 返回值 集合元素
10、:animated(固定写法) 返回值 集合元素

5)内容过滤选择器：
1、:contains(text) 用法: $(”div:contains(’John’)”) 返回值 集合元素.
2、:empty 用法: $(”td:empty”) 返回值 集合元素
3、:has(selector) 用法: $(”div:has§”).addClass(”test”) 返回值 集合元素
4、:parent 用法: $(”td:parent”) 返回值 集合元素

6)可见度过滤选择器：
1、:hidden 用法: $(”tr:hidden”) 返回值 集合元素
2、:visible 用法: $(”tr:visible”) 返回值 集合元素

7)属性过滤选择器：
1、[attribute] 用法: $(”div[id]“) ; 返回值 集合元素
2、[attribute=value] 用法: $(”input[name=‘newsletter’]“).attr(”checked”, true); 返回值 集合元素
3、[attribute!=value] 用法: $(”input[name!=‘newsletter’]“).attr(”checked”, true); 返回值 集合元素
4、[attribute^=value] 用法: (”input[name=‘news’]“)返回值集合元素5、[attribute(”input[name^=‘news’]“) 返回值 集合元素5、[attribute(”input[name=‘news’]“)返回值集合元素5、[attribute=value] 用法: (”input[name(”input[name(”input[name=‘letter’]“) 返回值 集合元素
6、[attribute*=value] 用法: $(”input[name*=‘man’]“) 返回值 集合元素
7、[attributeFilter1][attributeFilter2][attributeFilterN] 用法: (”input[id][name(”input[id][name(”input[id][name=‘man’]“) 返回值 集合元素

8)子元素过滤选择器：
1、:nth-child(index/even/odd/equation) 用法: $(”ul li:nth-child(2)”) 返回值 集合元素
2、:first-child 用法: $(”ul li:first-child”) 返回值 集合元素
3、:last-child 用法: $(”ul li:last-child”) 返回值 集合元素
4、: only-child 用法: $(”ul li:only-child”) 返回值 集合元素

9)表单对象属性过滤选择器：
1、:enabled 用法: $(”input:enabled”) 返回值 集合元素
2、:disabled 用法: $(”input:disabled”) 返回值 集合元素.
3、:checked 用法: $(”input:checked”) 返回值 集合元素
4、:selected 用法: $(”select option:selected”) 返回值 集合元素

10)表单选择器：
1、:input 用法: $(”:input”) ; 返回值 集合元素
2、:text 用法: $(”:text”) ; 返回值 集合元素
3、:password 用法: $(”:password”) ; 返回值 集合元素
4、:radio 用法: $(”:radio”) ; 返回值 集合元素
5、:checkbox 用法: $(”:checkbox”) ; 返回值 集合元素
6、:submit 用法: $(”:submit”) ; 返回值 集合元素
7、:image 用法: $(”:image”) 返回值 集合元素
8、:reset 用法: $(”:reset”) ; 返回值 集合元素
9、:button 用法: $(”:button”) ; 返回值 集合元素
10、:file 用法: $(”:file”) ; 返回值 集合元素
11、:hidden 用法: $(”input:hidden”) ; 返回值 集合元素

11）混淆选择器
1、.escapeSelector(selector)用法:.escapeSelector(selector) 用法:.escapeSelector(selector)用法:.escapeSelector() 获取 类选择器或者ID选择器中包含一些CSS特殊字符 (如# .)的元素
注意： 3.0以后才支持，使用的时候注意jquery的版本

5.jquery样式操作
1、操作行间样式
格式1：DOM元素.css(‘样式名’，‘值’)
格式2：DOM元素.css({‘样式名1’：‘值1’，‘样式名2’：‘值2’})

//单个样式设置$(\'div\').css(\'width\',\'200px\');$(\'div\').css(\'height\',\'200px\');$(\'div\').css(\'border\',\'2px solid\');//链式设置样式$(\'div\').css(\'width\',\'200px\').css(\'height\',\'200px\').css(\'border\',\'2px solid\')//一次性设置样式$(\'div\').css({\'width\':\'200px\',\'height\':\'300px\',\'border\':\'2px solid\',});//获取指定样式的值var  width = $(\'div\').css(\'width\');var  height = $(\'div\').css(\'height \');

特别注意 :选择器获取的多个元素，获取信息获取的是第一个，比如：$(“div”).css(“width”)，获取的是第一个div的width。

2、操作样式类名
1）$(\”#div1\”).addClass(“divClass2”) //为id为div1的对象追加样式divClass2

//添加一个类$(\"div\").addClass(\"divClass1\");//追加一个类$(\"div\").addClass(\" divClass2\");//一次添加多个类$(\"div\").addClass(\"divClass1 divClass2\");

2）$(\”#div1\”).removeClass(“divClass”) //移除id为div1的对象的class名为divClass的样式

//移除一个类$(\"div\").removeClass(\"divClass1\");//再移除一个类$(\"div\").removeClass(\" divClass2\");//一次移除多个类$(\"div\").removeClass(\"divClass1 divClass2\");

3）$(\”#div1\”).toggleClass(“anotherClass”) //重复切换anotherClass样式

// 切换一个类$(\"div\").toggleClass(\"divClass1 \");// 切换多个类$(\"div\").toggleClass(\"divClass1 divClass2 \");