jQuery基础

1. jQuery 概述

jQuery 是一套兼容多浏览器的 javascript 脚本库. 核心理念是写得更少，做得更多，
使用 jQuery 将极大的提高编写 javascript 代码的效率,帮助开发者节省了大量的工作,让
写出来的代码更加优雅, 更加健壮。

1. 下载
   http://jquery.com/ 下载
2. 版本
   （1）完整版 : jquery-2.1.4.js -->学习版本
   （2）压缩版 : jquery-2.1.4.min.js -->开发版本(压缩版，减少传输)
3. 优点
   （1）提供了强大的功能函数
   （2）解决浏览器兼容性问题
   （3）实现丰富的 UI 和插件
   （4）纠正错误的脚本知识
4. 安装
   在页面引入即可，推荐放在body的下面

2. DOM 对象和 jQuery 包装集对象

"$"符号在 jQuery 中代表对 jQuery 对象的引用, "jQuery"是核心对象，通过该对象
可以获取 jQuery 对象，调用 jQuery 提供的方法等。只有 jQuery 对象才能调用 jQuery 提供
的方法。

1.通过原生JS的ID选择器获取DOM对象
​ var mydivdom=document.getElementById(“mydiv”);
​ console.log(mydivdom);

2.通过Jquery的Id选择器获取Jquery包装集对象
​ var mydivJquery=$("#mydiv");
​ console.log(mydivJquery);

3.将Dom对象转换为Jquery包装集对象

​ 只需要在dom对象外面包装Jquery即可 $(dom对象)vardomtoJquery=$(mydivdom);
​ console.log(domtoJquery);

4.将Jquery包装集对象转换为Dom对象

（1）Jquery包装集取下标 jquery包装集对象[0]
​ var Jquerytodom=mydivJquery[0];
​ console.log(Jquerytodom);

（2）Jquery中的each()函数，会将遍历的jquery对象变成dom对象

​ mydivJquery.each(function(index,element){
​ console.log(index);
​ console.log(element);
​ console.log(this);
​ console.log($(this));
​ });

​ each(fucntion)

​ 语法：

​ jquery对象.each(fucntion([当前下标,当前被遍历到的元素]){

​ });

​ this：谁调用函数，this指代谁

5.获取的节点不存在的情况

（1）通过原生JS获取节点，如果节点不存在，返回null。

（2）如果通过Jquery获取节点，如果节点不存在，会返回空包装集对象。所以判断Jqury对象是否存在需要使用length。

3.jQuery 的选择器—基本选择器

1.Id选择器

$("#id属性值")

选择id为指定值的元素 （如果有多个同名Id，只会获取第一个）

​ var mydiv = $("#mydiv");
​ console.log(mydiv);

2.类选择器

$(".class属性值")

选择所有class属性为指定值的元素

​ var cls = $(".cls1");
​ console.log(cls);

3.元素选择器

$(“元素名/标签名”)

选择指定标签的元素

​ var divs = $(“div”);
​ console.log(divs);

4.选择所有选择器

$("*")

选择所有标签的元素

​ var all = $("*");
​ console.log(all);

5.组合选择器

$(“选择器1,选择器2…”)

选择器指定选择器选中的元素

​ var group = $("#mydiv,span,.cls1");
​ console.log(group);

4. jQuery 的选择器—属性选择器

$("[属性名]") $("[name]") 选择所有设置过