JQuery的超详细解读之刁钻版

---

前端技术中的JQuery

做项目的时候发现Jquery的内容又忘记了…今天来温习一波

JQuery是一个JavaScript函数库，它的出现是为了简化javascript的代码。说白了，它就是当下比较流行的JS框架。那么它有哪些功能呢？

1.HTML 元素选取
2.HTML 元素操作
3.CSS 操作
4.HTML 事件函数
5.JavaScript 特效和动画
6.HTML DOM 遍历和修改
7.AJAX
8.Utilities

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、jQuery语法结构

那么有了JQuery怎么使用呢？我们就得去学习它得语法结构。JQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()
这边说明一下这个基础语法：美元符号相当于 jQuery 选择符,（selector）是你想要查找的HTML 元素， 而“ .action()” 相当于执行对元素的操作。

好了，基础语法我们已经知道了，接下来就可以用这个基础语法去编写JQuery代码了。但这之前，我们还需要知道另一个知识点，文档就绪事件。文档就绪事件，实际上就是文件加载事件。
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM进行操作。
如果在文档没有完全加载之前就运行函数，操作可能失败。
所以我们尽可能将所有的操作都在文档加载完毕之后实现。
写法1：

$(document).ready(function(){ 
// 开始写 jQuery 代码...
 });

写法2：简介写法-推荐

$(function(){ 
// 开始写 jQuery 代码... 
});

二、jQuery选择器

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

三、 元素/标签选择器

jQuery 元素选择器基于元素/标签名选取元素。下面语法和具体案例：

语法：$(“标签名称”)

<div>div1</div> 
<div>div2</div> 
<div>div3</div>
 <script type="text/javascript" src="js/jquery-1.11.1.js" ></script> 
 <script> 
 //文档就绪事件：
  $(document).ready(function(){ //编写jQuery });
   $(function(){ 
   //1、标签选择器：
    //获取所有的div元素（集合）
     var divList=$("div"); console.log(divList);
     //jQuery的对象 
     console.log(divList.length); 
     for(var i=0;i<divList.length;i++){ 
     console.log(divList[i]);
     //js的对象 
     //将js对象转换为jQuery的对象 
     console.log($(divList[i])); 
     } 
     });
  </script>

---

四、#id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下：

$("#p1")

五、.class 选择器

jQuery类选择器可以通过指定的 class 查找元素。

$(".mydiv")

六、全局选择器

匹配所有元素

$("*")

七 、并集选择器

将每一个选择器匹配到的元素合并后一起返回

$("div,ul,li,.mydiv")

八 、后代选择器

在给定的祖先元素下匹配所有的后代元素

$("form input")

九 、子选择器

在给定的父元素下匹配所有的子元素

$("form > input")

十 、相邻选择器

匹配所有紧接在 prev 元素后的 next 元素

$("label + input")

十一、同辈选择器

匹配 prev 元素之后的所有 siblings 元素

$("form ~ input")

十二、属性选择器

匹配包含给定属性的元素

$("div[id]");//获取所有有id属性的div的元素集合 
$("div[class]");//获取所有有class属性的div的元素集合 
$("input[name='userName']");//获取所有input标签中name属性是userName元素的集合
$("input[name^='user']");//获取所有input标签中name属性是user开头的元素的集合 
$("input[name$='user']");//获取所有input标签中name属性是user结尾的元素的集合 
$("input[name*='user']");//获取所有input标签中name属性包含了user的元素的集合 
$("input[id][name^='user']");