jQuery学习笔记

jQuery

---

函数>对象>方法

jQuery简介

---

1、概念:jQuery是一个优秀的JavaScript库 ,而非JavaScript。它是轻量级的库。

2、容性:兼容css3 ,以及各种浏览器。3、版本:

1.x---------容低端浏览器 2.x---------兼容从IE9开始以及高端浏览器

4、jQuery使用户能更方便的处理HTML、events、 实现动画效果,并且方便的为网站提供Ajax交互。

5、优势:它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。

6、理念: write less , do more !

引入jQuery

---

1.官网: http://jquery.com

2.Download——Download the compressed,production jQuery 2.2.1-拷贝到工程中

用法

---

一、作为一般函数调用$( )

1、参数为函数：当DOM加载完成后，执行此回调函数。

2、参数为选择器字符串：查找所有匹配的标签，并将它们封装成jQuery对象。

3、参数为DOM对象：将DOM对象封装成jQuery。

4、参数为html标签字符串.

二、作为对象使用 $.XXX( )

例、$.each( ) 隐式遍历数组

$.trim( ) 去除两端空格

jQuery语法

---

基础语法: $ ( selector ) .action( )

(1)元符号$定义jQuery

(2)选择符( selector )“查询”和“查找”HTML元素

(3)jQuery的action( )执行对元素的操作。

$(doucment).ready(founction(){

​

Alert(“文档加载完毕”)；

​

}

基础选择器

---

1、$（"") 选择所有元素 由于使用选择器获取的是全部元素，因此，有些浏览器将会比较缓慢，这个选择器也需要谨慎使用。

2.、$( ".class" ) 选择给定样式类名的所有元素

3、$( "element") 根据给定( html)标记名称选择所有的元素

4、$( "#id" ) 选择一个具有给定id属性的单个元素

5、$( "selector1, selector2, selectorN" ) 将每一个选择器匹配到的元素合并后一起返回

层次选择器

---

1、后代选择器 ：只要是后代都可以选择到

$("父元素 指定元素")

2、子代选择器：只能选择到后代第一代元素

$("父元素 > 指定元素")

3、同辈选择器 选择该元素下面的所有指定元素

$("某元素 ~ 同辈某元素")

4、相邻选择器 ：只能选择到该元素下一个指定元素

$("某元素 + 相邻元素")

表单选择器

---

1、表单选择器：会找到所有 input、textarea、select、button 标签的元素

$(:input)

2、文本选择器

$(:text)

3、密码框选择器

$(:password)

4、单选按钮选择器

$(:radio)

5、多选按钮选择器

$(:checkbox)

6、提交按钮选择器

$(:submit)

7、图片按钮选择器

$(:image)

8、重置按钮选择器

$(:reset)

9、文件域选择器

$(:file)

10、按钮选择器

$(:button)

属性选择器

---

1、$( "[属性名='属性值']")

描述∶选择指定属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“ ”)的元素。

注意:引号是可选的.可以是一个不带引号的一个单词或带一个引号的字符串。

2、$( "[属性名*= '属性值']" )

描述︰选择指定属性具有包含一个给定的子字符串的元素。（选择给定的属性是以包含某些值的元素)

3、$( "[属性名~ ='属性值']" )

描述︰选择指定属性用空格分隔的值中包含一个给定值的元素。

4、$( "[属性名='属性值']")

描述:选择指定属性是给定值的元素。

5、$("[属性名!= '属性值']")

描述︰选择不存在指定属性，或者指定的属性值不等于给定值的元素。

6、$( "[属性名$='属性值']" )

描述∶选择指定属性是以给定值结尾的元素。这个比较是区分大小写的。

7、$( "[属性名个='属性值']" )

描述︰选择指定属性是以给定字符串开始的元素。

8、$( "[属性名]" )

描述∶选择所有具有指定属性的元素，该属性可以是任何值。

9、$( "[属性名Filter1] [属性名Filter2] [属性名FilterN]" )

描述∶选择匹配所有指定的属性筛选器的元素。

属性操作

---

一、属性分类

1、固有属性

2、Boolean值类型的属性

3、自定义属性

二、获取属性

1、$("元素名").attr("属性名") 固有属性、自定义属性 支持

2、$("元素名").prop("属性名") 固有属性、Boolean值类型的属性 支持

三、设置属性 能获取什么值就赋什么值

1、$("元素名").attr("属性名","属性值")

2、$("元素名").prop("属性名","属性值")

四、移除属性

$("元素名").removeAttr("属性名")

样式操作

---

一、添加样式名称

$("元素名").addClass("样式名")

二、添加具体样式

1、$("元素名").css("样式名","样式值")

2、$("元素名").css({"样式名1":"样式值","样式名2":"样式值"})

三、移除样式名称

$("元素名").removeClass("属性名")

元素内容操作

---

1、$("元素名").html() 获取元素内容、包含html内容(非表单元素)

$("元素名").html(“内容”) 设置元素内容、包含html内容(非表单元素)

2、$("元素名").text() 获取元素的纯文本内容，不识别html标签(非表单元素)

$("元素名").text(“内容”) 设置元素的纯文本内容，不识别html标签(非表单元素)

3、$("元素名").val() 获取元素的值(表单元素)

$("元素名").val(”内容“) 设置元素的值(表单元素)

创建元素与添加元素

---

一、创建元素

$("把添加的元素源码放在这里面")

二、添加元素

1、前添加子元素 $("元素名").prepend("内容") / $("内容").prependTo(元素)

2、后添加子元素 $("元素名").append("内容") / $("内容").appendTo(元素)

3、前添加同级元素 $("元素名").before("内容") / $("内容").beforeTo(元素)

4、后添加同级元素 $("元素名").after("内容") / $("内容").afterTo(元素)

如果所添加元素是原本已经存在的元素相当于直接剪切到指定位置。

删除元素

---

1、$("元素名").remove() 删除元素及其对应的子元素，标签和内容一起删除

2、$("元素名").empty() 清空元素内容，保留标签

遍历元素

---

$("元素名").each(function(index,element){

});

事件

---

加载事件

1、预加载事件，当页面DOM结构加载完毕后执行

$(domcument).ready(function(){ })

简写 $(function(){ })

2、绑定事件

$(”元素名“).bind(事件类型[,事件值],事件触发执行的函数)

bind绑定单个函数

1)、$("元素名").bind("事件类型"，function(){ })

bind绑定多个函数

1)、$("元素名").bind("事件类型1，事件类型2....."，function(){ })多事件对应一个函数。

2)、$("元素名").bind("事件类型1"，function(){ }).bind("事件类型2"，function(){ })多事件有多函数一一对应。

3)、$("元素名").bind({

"事件类型1":function(){

},

"事件类型2":function(){

}

}); 多事件有多函数一一对应。

直接绑定

1)、$("元素").事件类型(function(){

})

直接绑定多个函数

$("元素").事件类型1(function(){

}).事件类型2(function(){

}); 多事件有多函数一一对应。