JQuery总结

JQuery简介

• jQuery 是一个 JavaScript 库。
• jQuery 极大地简化了 JavaScript 编程。
• jQuery 很容易学习。

JQ库类型说明

完全版jquery-1.4.js 用于测试和开发（未压缩，可读代码）
压缩版jquery-1.4.min.js 用于实际的网站中，已被精简和压缩

JQ引入

可以在线引入
也可以下载本地引入

image.png

页面载入

$(document).ready(function(){});
可以简写：$(function(){});

与window.onload的区别

image.png

DOM对象转换为Jquery对象

$(dom对象) ==》 jquery对象

jq选择器

image.png

• 基本选择器

  
  
  image.png

• 层次选择器

  
  
  image.png

• 过滤选择器
  过滤选择器主要是通过特定的过滤规则来筛选出需要的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即过滤选择器都是以冒号(:)开头。

• 过滤选择器分类：
  1.基本过滤选择器

  
  
  image.png

  2.内容过滤选择器

  
  
  image.png

  3.可见性过滤选择器

  
  
  image.png

  4.属性过滤选择器

  
  
  image.png

  5.子元素过滤选择器

  
  
  image.png
  
  
  image.png

6.表单对象属性过滤选择器

image.png

• 表单选择器

  
  
  image.png

• 特殊选择器this
  this是JavaScript中的关键字，指的是当前的上下文对象。在js中this是动态的，可以通过call(),apply()等方法改变指向。
  在jquery中需要把this加工成jquery对象。
  $this=$(this)
  this表示当前的上下文对象是一个html的DOM对象，可以调用html对象所拥有的属性和方法。$(this)代表的上下文对象是一个jquery的上下文对象，可以调用jquery的方法和属性。

jQuery中的方法

• show()
  显示隐藏的匹配元素，可带整数参数表示时间， 单位是毫秒。

• hide()
  隐藏显示的匹配元素。可带整数参数表示时间， 单位是毫秒。

• css(name, value)
  给匹配的元素设置css

• text(string)
  获取或设置匹配元素的文本内容， 不含html标签

• filter(expr)
  刷选出与指定表达式匹配的元素集合，其中expr可以是多个选择器的组合。

• addClass(class)
  为匹配的元素增加一个类样式

• removeClass(class)
  为匹配的元素移除一个类样式

• html()
  获取或设置匹配元素的内容，包含html标签

• siblings()
  $(".abc").siblings()匹配得到class = abc的其它兄弟元素

• 设置单条样式
  .css(“属性名”，”属性值”)

• 设置多条样式
  .css({“属性名1”:”属性值1”,”属性名2”:”属性值2”,……})

• 获取样式值
  .css(“属性名”)

• 增加类 可增加/删除多个类
  .addClass(“类名1 类名2 ……”) 多个类名之间用空格隔开
  .removeClass(“”)
  .toggleClass(“”)
  .toggleClass(“类名”,true/false) 用来判断样式类添加还是移除的 布尔值

• 操作元素中的内容：
  设置：
  .html(“str”) 设置元素的里面的内容 可用带html标签 js中的innerHTML
  .text(“str”) 设置元素的里面的内容 可用不带html标签 js中的innerText
  .val(“str”) 设置表单的值 js中的value

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

1 .html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素的html内容（包括html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读取表单元素的"value"值。其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上

2.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。

3 .html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。

4 .html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。

例如：
$('li').html(function(n){ return "被点击的元素的索引值是"+n });
将会把所有li元素内的内容替换为返回值，并会把n值变成每个li对应的索引值.

• show(speed,[callback]) / hide( speed,[callback] ) / toggle(speed,[callback])
  参数：
  speed： 设置显示/隐藏时的速度值，可为fast，slow或毫秒值
  callback：显示或隐藏动作完成后调用的函数
  toggle()方法：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明
  display:none 的元素（但不适用于 visibility:hidden 的元素）

slideUp(speed,[callback] )
slideDown(speed,[callback] )
slideToggle()

fadeIn(speed,[callback] )
fadeOut(speed,[callback] )
fadeTo(speed,opacity,[callback]) //设置淡入淡出效果到一定的不透明度
fadeToggle()

filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。
例如：

$("ul li").filter(":contains('A1'), :contains('A2'), :contains('A3')").addClass("ABC");