JQuery的总结

JQuery的概述

jQuery由美国人John Resig于2006年初创建，至今已吸引了来自世界各地的众多javascript高手加入其team。

jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。

jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需使用选择器查找即可。

●JQuery的特点

轻量级：经GZip压缩后传输的代码文件仅14KB，未经压缩传送的代码文件仅26KB

链式语法 ：$("p.surprise").addClass("ohmy").show("slow");

CSS 1-3 选择器：支持CSS选择器选定DOM对象

跨浏览器：支持Internet Explorer 6+、Opera 9+、Firefox 1.5+、Safari 2+

简单：较其它JS库更容易入门，中、英文档很齐全

易扩展： JQuery UI 、 JQuery FX –已经有很完善的基于JQuery的用户界面库 和网页特效库

“写的更少，做的更多” 的轻量级 JavaScript 库。

●主流框架

Vue  渐进式javascript库

React 构建用户界面的库

Angular 现代 Web 开发平台

Electron 构建跨平台桌面应用程序的框架

●入口函数与onload

○入口函数

$(function(){......}) / $(document).ready(function{......})

入口函数可重复执行多次，在文档加载完成就可执行（快）

○onload

window.οnlοad=function(){......}

后添加的onolad会将原来的onolad覆盖掉，需要等待网页的内容加载完再执行。

●JQuery对象与DOM对象转换

定义DOM对象

JavaScript方式

  var id=document.getElementById(“id”);

jQuery方式

  var $id=$(“#id”);

说明：jQuery对象是一个类数组对象，可以通过[index]的方法得到相应的DOM对象

  jQuery对象转换成DOM对象

var $id=$(“.d”);                                 得到一个jQuery数组对象$id

var id=$id[0];                                    得到数组中的第一个DOM对象

另外也可以使用：

var id=$id.get(0);

Dom对象转换为jQuery对象

var id=document.getElementById(“id”);

var $id=$(id);

在jQuery库中，$就是jQuery的一个简写形式。

如：

  $(“#id”)

等价于

  jQuery(“#id”)

在编写JavaScript时应尽量避免使用jQuery和$定义变量或方法，以免在同时使用JavaScript和jQuery时发生冲突。

JQuery的常见方法

1.jquery的核心函数是？

$() 是 jQuery 的核心 函数

2.jquery的入口函数与onload区别？

        原生Js会等到DOM元素加载完毕，并且图片也加载完毕才会执行；

 jQuery会等到DOM元素加载完毕，但不会等到图片加载完毕就会执行。

3.css基  本选择器有哪些？

        ⑴标签选择器（元素选择器）

        ⑵ID选择器（唯一性，一次引用）

        ⑶类选择器（单类选择器，多类选择器）

        ⑷属性选择器（简单属性选择，具体属性选择，部分属性选择， 特定属性选择）

        ⑸派生选择器（后代选择器(descendant selector)，子元素选择器(child selector)，相邻兄弟选择器(Adjacent sibling selector)

4.css有哪些层次选择器？

(1)子元素选择器

(2)后代选择器

(3)下一个兄弟选择器

(4)之后所有兄弟选择器

●选择元素

JQ中选择页面元素和CSS是一致的

$(“#app”)      选择id为app的元素
$(“.sp”)         选择class值为sp的元素
$(“h1”)  选择标签名为h1的元素

●基本过滤选择器

:first 选择第一个元素，返回单个元素

示例：$(“div:first”)选择第1个div元素。

:last 选择最后一个元素，返回单个元素

示例：$(“div:last”)选择最后1个div元素

:not(E1) 去除所有E1选择器匹配的元素，返回集合元素

示例：$(“input:not(.my)”)选择class不是.my的所有input元素

:even 选择索引是偶数的所有元素，索引从0开始，返回集合元素

示例：$(“tr:even”)选择表格中所有偶数的行

:odd 选择索引是偶数的所有元素，索引从0开始，返回集合元素

示例：$(“tr:odd”)选择表格中所有奇数的行

:eq(index) 选择索引值是index的元素，index从0开始，返回单个元素

示例：$(“tr:eq(1)”)选择表格行索引等于1的行

:gt(index) 选择索引值大于index的元素,index从0开始，返回集合元素

示例：$(“tr:gt(1) ”)选择表格行索引大于1的行

:lt(index) 选择索引值小于index的元素,index从0开始，返回集合元素

示例：$(“tr:lt(1)”)选择表格行索引小于1的行

:header 所取所有的标题元素,h1~h6，返回集合元素

示例：$(“:header”)选择网页中所有的<h1>,<h2>…<h6>

:animated 选择当前正在执行动画的所有元素，返回集合元素

示例：$(“div:animated”)选择正在执行动画的div元素

●内容过滤选择器

:contains(text) 选择含有text文本内容的元素 返回集合元素

:empty 选择不包含子元素或文本的空元素 返回集合元素

:has(E1) 选择包含有(E1选择器匹配的元素)的所有元素 返回集合元素

:parent 选择含有子元素或文本的元素 返回集合元素

●可见过滤选择器

:hidden 选择所有不可见元素 返回集合元素

示例：$(“:hidden”)选择所有不可见元素，包括：<input type=“hidden”/>,<div style=“display:none”>和<div style=“visibility:hidden”>等，如果只选择<input>元素，则可以使用 $(“input:hidden”)

:visible 选择所有可见元素 返回集合元素

示例：$(“div:visible”)选取所有可见的div元素

●内容操作

操作元素中的内容：

设置：

.html(“str”)   设置元素的里面的内容 可用带html标签

.text(“str”)    设置元素的里面的内容 可用不带html标签

.val(“str”)     设置表单的值

获取

.html()       .text()        .val()

●内容操作区别

.html(),.text()和.val()的差异总结： 

 .html()是用来读取元素的html内容（包括html标签），

.text()用来读取元素的纯文本内容，包括其后代元素，

.val()是用来读取表单元素的"value"值。

内容操作

jQ 事件和js的事件名称是一致的，事件名不带on
$(“button”).click(function(){
// 事件操作
})

●JQ中显示隐藏对象

// $(".block").hide()      隐藏

// $(".block").fadeOut();    淡出

// $(".block").slideUp();  向上滑出

// $(".block").show();   显示

// $(".block").fadeIn();   淡入

// $(".block").slideDown();  向下滑入

// $(".block").fadeToggle();    切换淡入淡出

$(".block").slideToggle("slow");   //切换滑入滑出

高级用法：速度与回调函数

fadeIn(speed,[callback] )    

●样式操作

设置单条样式

.css(“属性名”，”属性值”)

设置多条样式

.css({“属性名1”:”属性值1”,”属性名2”:”属性值2”,……})

获取样式值

.css(“属性名”)

●类操作

增加类      可增加/删除多个类

.addClass(“类名1 类名2 ……”)   多个类名之间用空格隔开

删除类

.removeClass(“类名”)

.toggleClass(“”)   

.toggleClass(“类名”,true/false)    用来判断样式类添加还是移除的 布尔值

●属性操作

获取属性      获取元素的属性

attr("属性名");    .attr(“title”) 获取元素的title属性

设置属性

.attr(“属性名”,”属性值”)

.attr(“title”,”我爱我的祖国”)   设置元素的title属性为“我爱我的祖国”

●表单属性操作prop

获取属性      获取元素的属性

prop("属性名");    .prop(“checked”) 获取表单的选中属性

设置属性

.prop(“属性名”,”属性值”)

.attr(“disabled”,”true”)   设置表单元素不可用