jQuery

jQuery概述

什么是jQuery

• jQuery：JavaScript Query JS查询
• jQuery是一个轻量的、免费开源的JS函数库，可以极大地简化JS代码

jQuery优点

1. 可以极大地简化JS代码

   document.getElementById(id值);
   $("#id值")
   document.getElementsByTagName(元素名);
   $("元素名")
   $(".class值")
   

2. 可以像CSS选择器一样获取元素
   $(“元素名”)
   $(".class值")
   $("#id值")

3. 可以通过操作CSS属性来控制页面的效果
   $("").css({属性:值});

   $("div").css({
   	"width" : "100px",
   	"height" : "80px",
   	"border" : "1px solid red"
   });
   

4.可以兼容常用的浏览器

• 在JS中提供的某些函数或者属性没有做到兼容常用浏览器
  JS：removeNode、replaceNode、innerText
• jQuery中提供函数和属性可以做到兼容常用的浏览器
  谷歌、火狐、IE、欧朋、苹果浏览器

jQuery版本

• jQuery版本有很多个
  1.x – 支持IE6+ 和常用的浏览器
  2.x – 支持IE9+ 和常用的浏览器
  3.x – 支持IE9+ 和常用的浏览器
• jQuery有一个缺点：jQuery高版本不兼容低版本，jQuery在升级的过程中，除了会做一些内部优化之外，还会增删一些方法，如果升级jQuery，可能会导致之前的部分代码无法执行！

jQuery引入

• jQuery的引入和引入一个普通的JS文件是一样的

<script src="jquery-1.4.2.js"></script>

jQuery语法

1. $符号介绍
   $ 等价于 jQuery, 参见源码：

   window.jQuery = window,$ = jQuery;
   

   调用 $() 等价于 调用 jQuery(), 该函数会返回一个jQuery对象(注意不是JS对象!)，其中包含了若干html元素（JS对象），通过jQuery提供的属性和方法，可以对这些元素进行操作！

   $("div").remove();
   $("div").css("background":"red");
   

2. 文档就绪事件函数
   window.onload = function(){ //在整个html文档加载完之后立即触发执行}
   jQuery也提供了相应的文档就绪事件函数：

   $(function(){
   	//在整个html文档加载完之后立即触发执行
   })
   

   上面写法等价于下面的写法：

   $(document).ready(function(){
   	//在整个html文档加载完之后立即触发执行
   })
   

3. JS对象和jQuery对象的互相转换

   • JS对象只能调用JS提供的属性和方法

   • jQuery对象只能调用jQuery提供的属性和方法，不能和JS提供的属性及方法混用，否则就会报错！！

   • JS对象转成jQuery对象：
     $(JS对象) – 返回的就是一个jQuery对象

     $(function){
     	var div = document.getElementById(" ");
     	alert($(div).html() );
     }
     

     $().html == JS.innerHTML

   • jQuery对象转成JS对象：

     jQuery对象[num] – 返回jQuery对象中的一个JS对象
     jQuery对象.get(num) – 返回jQuery对象中的一个JS对象

jQuery选择器

各种选择器可以结合使用

基本选择器

• $(".class"):类选择器
• $("#id"):id选择器
• $("tagname "):标签选择器
• $(".class1,.class2,#id"):同时选择多个，逗号隔开

层级选择器

• $(".class #id"):后代选择器 空格隔开
• $(".class>#id"):子代选择器 >号隔开
• $(".class+tag"):后面紧邻的tag +号隔开
• $(".class+tag"):后面所有的tag ~号隔开
• $(“标签”).next(“tag”):后面紧邻的tag，tag为可选
• $(“标签”).nextAll(“tag”):后面所有的tag，tag为可选
• $(“标签”).prev(“tag”):前面紧邻的tag，tag为可选
• $(“标签”).prevAll(“tag”):前面所有的tag，tag为可选
• $(“标签”).siblings(“tag”):前后所有tag，tag为可选
• $(“标签”).parent(""):当前所有选中标签的父元素
• $(“标签”).parents(""):当前选中标签的所有祖先元素
• $(“标签”).find(“tag”):所有的子代tag，tag为可选

基本过滤选择器

• $(“tag:first”):获取所有tag中的第一个tag元素
• $(“tag:eq(index)”):获取所有tag中的第index个元素，从0开始
• $(“tag:not(.one)”):获取tag中class值不为one的tag

内容选择器

$("tag:内容选择器").css();

• first 第一个
• last 最后一个
• not(.no1) 类名不是.no1的元素
• contains(“aaa”) 匹配包含aaa文本的该类元素
• empty 匹配所有内容为空的元素
• has(标签) 匹配所有包含子标签的该类元素
• parent 匹配所有内容不为空的元素

可见选择器

• hidden 匹配所有隐藏的元素
• visible 匹配所有可见的元素

  $("tag:hidden")
  $("tag:visible")
  

属性选择器

• $(“tag[attribute]”) 匹配所有具有id属性的元素
• $(“tag[attribute=‘att’]”) 匹配具有attribute属性并且值为att的元素
• $(“tag[attribute!=‘att’]”) 匹配具有attribute属性并且值不为att的元素
• $(“tag[attribute^=‘att’]”) 匹配具有attribute属性并且值以att开头的元素
• $(“tag[attribute$=‘att’]”) 匹配具有attribute属性并且值以att结尾的元素

子元素选择器

• $(“div span:first-child”) 匹配div后代所有的第一个tag并且为span的元素
• $(“div>span:first-child”) 匹配div子代的第一个tag并且为span的元素
• $(“div span:first-child(n)”) 匹配div后代所有第n个tag并且为span的元素
• $(“div>span:first-child(n)”) 匹配div子代第n个tag并且为span的元素

表单选择器

• $(":input"):所有的表单元素(input,select,textarea)
• $(":possword"):所有的密码框元素
• $(":radio"):所有的单选框元素
• $(":checkbox"):所有复选框
• $(":checked"):所有被选中的radio，checkbox，option选项
• $(":selected"):匹配所有被选中的option选项

文档操作

1.文档操作

• 创建元素

$("<div></div>") -- 创建一个div元素
$("<div>xxx</div>") -- 创建一个包含文本内容的div元素
$("<div><span>xxx</span></div>") -- 创建一个包含子元素的div元素

• 添加元素

parent.append(child);//在父元素中添加子元素
var $span = $("<span></span>");
$div.append($span);
$div.append("<span></span>");

• 删除元素

$("tag").remove(); // 删除所有的tag元素

• 替换元素

$("div").replaceWith("p");//p替换div
$("div").replaceWith("<p>这是一个p</p>");

2.html内容和属性内容

1. html()

   $("div").html() -- 获取所有div中的第一个div的html内容
   $("div").html("替换的内容");-- 给所有div设置html内容
   

2. text()

   $("div").text() -- 获取所有div的文本内容
   $("div").text("替换的内容") -- 给所有div设置文本内容
   

3. attr()

   $("div").attr("属性") -- 获取所有div中的第一个div的该属性的属性值
   $("div").attr("属性","属性值") -- 给所有div的该属性设置属性值
   

3.CSS属性操作

1. 获取所有匹配元素中的第一个元素的width.

   $("div").css("width");
   

2. 给所有匹配的元素设置单个属性width为200px

   $("div").css("width","200px");
   

3. 给所有匹配的元素设置多个属性值

   $("div").css({
   "width" : "200px",
   "height" : "100px",
   "background" : "red"
   });
   

4.其他相关

1. parent()

   $("div").parent() -- 获取所匹配元素的父元素
   

2. parents()

   $("div").parents() -- 获取所匹配元素的祖先元素
   

3. find()

   $("div span")
   $(this).find("span") -- 都是获取div内部的所有span元素
   

4. next()

   $("div+span")
   $(this).next() -- 获取所匹配元素的下一个紧邻的兄弟元素
   $("div").next("span") -- 获取所匹配元素的 下一个金陵 span兄弟元素
   

5. nextAll()

   $("div").nextAll() -- 获取所匹配元素的后面所有的兄弟元素
   $("div").nextAll("span") -- 获取所匹配元素的后面所有的span兄弟元素
   

6. siblings()

   $("div").siblings() -- 获取所匹配元素的前后所有的兄弟元素
   $("div").siblings("span") -- 获取所匹配元素的前后所有的span兄弟元素
   

常用方法

• hide()，show()：隐藏和显示

  $("").show();//显示
  $("").hide();//隐藏
  show(number),hide(3000)：  毫秒值
  

• toggle()：切换隐藏和显示
  可加参数 ： 毫秒值

  $("").toggle();
  

• fadeIn(), fadeOut() 淡入，淡出 ： 参数毫秒值
• slideDown(), slideUp(), slideToggle() 收缩 展开 切换 ，参数：毫秒值
• each(): 遍历选中的每一个对象
• val():获得表单元素的value值
• length():获得集合长度
• animate():自定义动画

  $("div").animate({
  "width" : "150px",
  "height" : "150px"	
  }, 2000);
  // 2000毫秒时间后到达指定属性值
  

• remove():删除选中对象

常用事件和效果

1. click()：点击事件

   在jQuery中为元素绑定点击事件：
   	$("tag").click(function(){ // xxx });
   在js中为元素绑定点击事件：
   	document.getElementById("b1").onclick = function(){ //xxx }
   

2. change(): onchange或者change是在表单项内容发生变化时触发执行
   在jQuery中绑定change事件

   $("#select").change(function(){ //xx  });
   

   在js中绑定onchange事件

   document.getElementById('select").onclick = function(){ //xxx }
   

3. ready 文档就绪事件

   $(document).ready(function(){
   	//在整个html文档加载完之后立即触发执行
   })
   简写：
   $(function(){
   	//在整个html文档加载完之后立即触发执行
   });
   

• onblur 输入框失去输入焦点事件
• onfocus 输入框获得输入焦点事件
• onchange 下拉框选项切换事件