JQuery笔记

JQuery

一、什么是JQuery？

jQuery 是一个 轻量级的JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

二、JQuery能干什么？

1、快速获取文档元素

2、提供漂亮的页面动态效果

3、创建AJAX无刷新网页

4、提供对JavaScript语言的增强

5、增强的事件处理

6、更改网页内容

三、使用JQuery用什么好处？

1、具有独特的链式语法和短小清晰的多功能接口；

2、具有高效灵活的css选择器，并且可以扩展CSS；

3、拥有便捷的插件扩展机制和丰富的插件；

4、jQuery兼容各种主流浏览器；

四、如何使用JQuery？

（一）、下载JQuery库

1、从 jquery.com 下载 jQuery 库

Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）

2、或者从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

百度CDN示例：
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>

3、使用引用

注意：
不必给 <script> 标签中使用 type="text/javascript" 。
因为在 HTML5 中，JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！

（二）、选择器使用

语法：$(" ");

可用单引号代替

$表示JQuery对象

核心函数：$(function(){ });

例：
 $(function() {
 	$('#btnOne').click(function() {
 		alert('点击了按钮');
 	});
 });

2、介绍几个在JS中是属性，JQuery中是函数的：

JS属性 JQuery函数

value val()
onclick click()
innerHtml html()

1、常用选择器：

基本选择器：

1.标签选择器：在双引号中写入 标签名 即可
2.类选择器：在双引号中写 .类名 即可
3.id选择器：在双引号中写 #id名 即可

例：
//获取标签名为h2的元素
$('h2');

//获取类名为title的元素
$('.title');

//获取id为oneDiv的元素
$(#oneDiv);

复合选择器：

1.并集选择器：采用 逗号(,) 分隔
2.交集选择器：采用 小数点(.) 分隔
3.全局选择器：采用 星号(*) 分隔

例：
//1、并集：class=oneSpan 或者 class=oneP 的第一个元素的值
console.log($('.oneSpan,.oneP')[0].value);
//2、交集:
// console.log("交集的标签名：" + $('div.oneSpan')[0].value);
//3、全局:
console.log("全局选择器之所有的标签名：" + $('*')[0].tagName);

层次选择器：

1.后代选择器：采用 空格( ) 分隔
2.子选择器：采用 右尖括号(>) 分隔
3.相邻元素选择器：采用 加号(+) 分隔
4.同辈元素选择器：采用 波浪线(~) 分隔
5.兄弟(同辈)元素选择器：包含所有兄弟 采用

注意：相邻和同辈都是取当前元素 后面的元素

例：
//1、后代选择器
console.log($('body .oneSpan').html());
//2、子选择器
console.log(".oneDiv的子标签.oneP的文本值=" + $('.oneDiv>.oneP').html());
//3、相邻元素选择器
console.log("span标签的相邻元素标签p标签的文本值=" + $('span+p').html());
//4、同辈元素选择器
var sumbiaoJian = $('span~p');

属性选择器：

$([属性内容])

1.含有某属性的：在中括号里写 属性名
2.属性等于某值的：在中括号里写 属性名=‘属性值’
3.属性不等于某值的：在中括号里写 属性名！=‘属性值’
4.属性值以某个字符串 开头的：在中括号里写 属性名^=‘匹配字符’
5.属性值以某个字符串 结尾的：在中括号里写 属性名$=‘匹配字符’
6.属性值 包含某个字符串的：在中括号里写 属性名*=‘匹配字符’
7.以上几种还还可以结合使用

例：
 //1、含有某种属性的 - [属性名]
 for(var i=0; i<$('[href]').length; i++) {
     console.log("获取具有href属性的标签的内容：" + $('[href]')[i].innerHTML);
 }

 //2、属性值相等的 - [属性名='值']
 console.log("查找oneDiv=oneDiv的标签名:" + $('[class="oneDiv"]')[0].tagName)

 //7、交集的 - [][]多个中括号
 console.log("有href属性且属性值为#的：" + $('[href][href="#"]')[0].href);
 console.log("href属性既是www开头，又是com结尾的：");
 var wwwAndCom = $('[href^="www"][href$="com"]');

注意：1、JQuery选择器，除了Id选择器外，返回值都是数组。（没手动使用，默认使用第一个）
2、相邻和同辈选择器都是获取自己的后面的

(三)、过滤器使用

过滤器语法：
冒号（：）后面跟过滤器内容

语法： :过滤器

基本过滤器：

例：
//选择第一个元素
$('div:first');	或	$('div').first();

//选择最后一个元素
$('div').last();	或 $('div:last');

//选择不为id不为one的元素
$('div:not("#one")')	或	$('div').not("#one");

//选择所有的偶数元素
$('div:even');	仅此一种

//选择所有奇数元素
$('div:odd'); 	仅此一种

1、等于索引的：$(":eq(索引)");
2、大于索引的：$(":gt(索引)")；
3、小于索引的：$(":lt(索引)")；

2、当前正在 执行动画的元素：$(“:animated”)；

例：
//当前正在执行动画的元素个数
console.log($(":animated").length);

3、当前 焦点元素：$(“:focus”);

可见性过滤器：

表单过滤器：

2、不可用：$(“:disabled”)

内容过滤器：

例：
//获取含有clss为mini元素的父元素
$('.mini').parents("div");
或
$("div:has('mini')");

//选取含有子元素（或者文本元素的div元素）
$("div:parent");

2、父元素：.parents();或$(‘:has()’)

3、含有子元素（或文本元素的）：$(“:parent”)

4、内容为 空的元素：$(“:empty”);

例：
//内容为空的div 
console.log($("div:empty").length);

四、JQuery和JS对象互转

JS对象转换为JQuery对象：使用 $(JS对象) ,得到JQuery

例：
var jsA = document.getElementById("oneDiv");
var JqueryA = $(jsA);	//注意不要加双引号，加了就是取标签了

JQuery对象转换为JS对象：1.使用数组形式：JQuery对象[0]

2.使用get()方法：Jquery对象.get(0)

例：
//数组形式
var JQA = $('.oneP');
var JSA = JQA[0];

//get()方法形式
var JQA = $('.oneP');
var JSA = JQA.get(0);

注意：JQuery和JS对象可以同时存在，但是不能混用。

五、JQuery的事件使用：

Click()：点击事件

Bind()：绑定事件

Blur()：失去焦点

Focus()：获得焦点

Scroll()：滚动事件

Change()：改变事件

注意：submit事件 和 submit函数的关系和区别：

• 点击form表单的提交按钮 - > 调用submit()方法 - > 触发submit事件(带参数，参数为匿名function)

关系：1、无论是submit事件还是函数，都可以手动调用

区别：

1、submit()函数，是真正的提交表单

2、可以在submit()事件，添加匿名函数，对表单的内容进行检查，以便进行拦截

（submit()事件返回true，则会执行真正的提交表单。submit()事件返回false，则不会提交表单）

六、Jquery的选择函数使用：

find()函数：获取指定的后代元素

例：
var lis = $('#ul1 li:eq(1)').find("li");
lis.css("color", "red");

each(匿名函数)函数：增强循环

 例：
 //选取id为ul1的所有后代li元素，并使用each遍历
 $('#ul1 li').each(function() {
 //在控制台打印当前innerHtml值
 	console.log($(this).html());	
 })

parents([expr]) 获得祖辈元素

parent()：获取父元素

children()函数：获取子元素

next() 获取下一个兄弟元素

prev() 获取前一个兄弟元素

七、JQuery的属性函数使用：

text()函数：取出文本值

css()函数：获取/设置 样式属性的属性值（样式属性）

例：$('li').css("color", "red"); //给li标签设置为红色

attr()函数： 获取/设置 功能属性的属性值（功能属性）

removeAttr(name)函数： 从元素中删除属性

prop()函数：获取/设置 selected和checked的属性值转换成boolean类型

总结：

1、要设置多个属性时，采用 大括号包裹，键值对形式书写

例：
单个参数(“属性名”);					//获取该属性名的值
两个参数("属性名"，"属性值")；		//给属性赋值
多个参数({"name","psw","value":"呵呵"});		//同时设置多个属性

2、HTML的属性包括：功能属性(attr) 样式属性(css) 属性值为boolean类型的(prop)，根据不同的情况选择不同的函数。

3、属性值为boolean类型的，即checked selected

八、JQuery的dom操作：

append()函数：追加到 子元素末尾

例：$('ul').append("<li>万佛宝塔</li>");

appendTo()函数：append函数的被动语态，即反过来

例：$("<li>万佛宝塔</li>").appendTo('ul');

remove()函数：移除元素

empty()函数：把元素变为空元素，即无文本或子元素的元素

clone()函数：克隆一份JQuery对象并返回

prepend()函数：添加到 子元素最前面

例：$('ul').prepend("<li>雷音寺</li>")

prependTo()函数：被动语态

after()函数：插入 某个元素 的后面

before()函数：插入 某个元素 的前面

insertBefore()函数：被动语态

insertAfter()函数：被动语态