JQuery

JQuery

1、简介

JQuery:是一个兼容多浏览器的、轻量级的JavaScript库,其宗旨为：WRITE LESS,DO MORE。

2、jQuery的核心函数：$()

$是jQuery的核心函数，jQuery的核心功能都是通过这个函数实现的。

$的四个作用：

1. $(function(){})：相当于window.onload = function(){}
2. $(“选择器”)：根据这个选择器查找元素节点对象
3. $(“html字符串”)：根据这个html字符串创建元素节点对象
4. $(DOM对象)：将DOM对象包装为jQuery对象

2.jQuery选择器

2.1基本选择器

（1）标签选择器

用法: $(“tagName”) （注：tagName标签名）

返回值：根据标签名匹配的一个或多个标签，封装成jQuery对象。

（2）class选择器

用法: $(" .class ")

返回值：根据class属性值匹配一个或多个标签，封装成jQuery对象。

（3）id选择器

用法:$("#id")

返回值：根据id属性匹配一个标签，封装成jQuery对象。

（4）* 选择器

用法: $(*)

返回值: 匹配所有标签，封装成jQuery对象。

（5）并集选择器

用法: $(”div,span,.myClass”)

返回值: 所有匹配选择器的标签， 封装成jQuery对象。

2.2层次选择器

表达式	用法	说明
ancestor descendant	$(”form input”)（注：form和input之间有个空格，不可省略）	在给定的祖先元素下匹配所有后代元素
parent > child	$(”form > input”)	在指定父元素下匹配所有子元素。注意:要区分好后代元素与子元素
prev + next	$(”label + input”)	匹配所有紧接在prev元素后的next元素（兄弟间）
prev ~ siblings	$(”form ~ input”)	匹配prev元素之后的所有 siblings元素，不包含该元素在内，并且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配

2.3过滤选择器

2.3.1基本过滤选择器

该选择器都以 “:” 开头。

表达式	用法	说明
:first	$(”tr:first”)	匹配找到的第一个元素
:last	$(”tr:last”)	匹配找到的最后一个元素，与 :first 相对应
:not(selector)	$(”input:not(:checked)”)	去除所有与给定选择器匹配的元素
:even	$(”tr:even”)	匹配所有索引值为偶数的元素，从0开始计数。js的数组都是从0开始计数的
:odd	$(”tr:odd”)	匹配所有索引值为奇数的元素，和:even对应,从 0 开始计数
:eq(index)	$(”tr:eq(0)”)	匹配一个给定索引值的元素。eq(0)就是获取第一个tr元素。括号里面的是索引值，不是元素排列数
:gt(index)	$(”tr:gt(0)”)	匹配所有大于给定索引值的元素
:lt(index)	$(”tr:lt(2)”)	匹配所有小于给定索引值的元素

2.3.2内容过滤选择器

表达式	用法	说明
:contains(text)	$(”div:contains(’John’)”)	匹配包含给定文本的元素
:empty	$(”td:empty”)	匹配所有不包含子元素或者文本的空元素
:has(selector)	$(”div:has§”).addClass(”test”)	匹配含有选择器所匹配的元素的元素，给所有包含p元素的div标签加上class=”test”
:parent	$(”td:parent”)	匹配含有子元素或者文本的元素

2.3.3可视化过滤选择器

表达式	用法	说明
:hidden	$(”tr:hidden”)	匹配所有的不可见元素
:visible	$(”tr:visible”)	匹配所有的可见元素

2.3.4属性过滤选择器

表达式	用法	说明
[attribute]	$(”div[id]“)	匹配包含给定属性的元素，例子中是选取了所有带id属性的div标签
[attribute=value]	$(”input[name=‘newsletter’]“).attr(”checked”, true)	匹配给定的属性是某个特定值的元素，例子中选取了所有name属性是newsletter的 input 元素
[attribute!=value]	$(”input[name!=‘newsletter’]“).attr(”checked”, true)	匹配所有不含有指定的属性，或者属性不等于特定值的元素。此选择器等价于:not([attr=value])，要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value])
[attribute^=value]	$(”input[name^=‘news’]“)	匹配给定的属性是以某些值开始的元素
[attribute$=value]	$(”input[name$=‘letter’]“)	匹配给定的属性是以某些值结尾的元素
[attribute*=value]	$(”input[name*=‘man’]“)	匹配给定的属性是以包含某些值的元素

2.3.5子元素过滤选择器

（1）:nth-child(index/even/odd/equation)

用法： $(”ul li:nth-child(2)”)

说明： 匹配其父元素下的第N个子或奇偶元素（这个将为每一个父元素匹配子元素）。

（2）:first-child

用法：$(”ul li:first-child”)

说明：匹配第一个子元素。’:first’ 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素。

（3）:last-child

用法： $(”ul li:last-child”)

说明： 匹配最后一个子元素。’:last’只匹配一个元素，而此选择符将为每个父元素匹配一个子元素。

（4）: only-child

用法：$(”ul li:only-child”)

说明： 如果某个元素是父元素中唯一的子元素，那将会被匹配；如果父元素中含有其他元素,那将不会被匹配。意思就是：只有一个子元素的才会被匹配！

2.3.6表单元素选择器

用法	说明
$(":input")	选择所有的表单输入元素，包括input, textarea, select 和 button
$(":text")	匹配所有的单行文本框
$(":password")	匹配所有密码框
$(":radio")	匹配所有单选按钮
$(":checkbox")	匹配所有复选框
$(":submit")	匹配所有提交按钮
$(":image")	匹配所有图像域
$(":reset")	匹配所有重置按钮
$(":button")	匹配所有按钮。这个包括直接写的元素button
$(":file")	匹配所有文件域
$(":hidden")	匹配所有不可见元素，或者type为hidden的元素

2.3.7表单对象属性过滤选择器

$(":enabled")	说明
$(":enabled")	匹配所有可用元素。意思是查找所有input中不带有disabled=”disabled”的input
$(":disabled")	匹配所有不可用元素
$(":checked")	匹配所有被选中的元素(复选框、单选框等，不包括select中的option)
$(“select option:selected”)	匹配所有选中的option元素

3.DOM操作

3.1DOM查询

• eq():
• first()
• last()
• filter():筛选出与指定表达式匹配的元素集合。(相当于过滤器)
• has():
• add():把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。
• children():查询子元素
• find():查询后代元素
• parent():查询父一代
• parents():查询父N代
• next():查询下一个兄弟元素
• prev():查询前一个兄弟元素

3.2DOM增删改

1. 增加

   *内后

   *append() a.append(b):将b追加到a的后面

   *appendTo(): a.appendTo(b)：将a添加到b的后面

2. 内前

   *prepend()

   *prependTo()

3. 外后

   *after()

   *insertAfter()

4. 外前

   *before()

   *insertBefore()

5. 删除

   *empty():掏空指定元素（删除指定元素的子元素）

   *remove()：删除指定元素

6. 修改

   *replaceWith()

   *replaceAll()

3.3事件

3.3.1文档的加载

window.onload与$()的区别？

*触发时机：前者是整个文档完全加载后执行，后者是在整个文档绘制成功后执行。

*书写数量：前者在整个文档中只可以书写一次，如果书写多次，后面的将会将前面的覆盖。后者可以书写多次，按书写的顺序执行。

*语法格式：前者只有一种语法格式，后者有两种

$()：是$(document).ready(function(){}）的缩写,其实ready是一种事件

3.3.2事件的冒泡

事件冒泡：当触发内部节点元素时，同时也会触发外部与之相关联的节点事件。

*取消冒泡事件

采用：return false；

3.3.3常用的事件

• ready(fn)

• click(fn)

• bind(fn):为每个匹配元素的特定事件绑定事件处理函数。

  $(selector).bind(event,data,function)
  even:必需，规定添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
  data 可选。规定传递到函数的额外数据。
  function  必需。规定当事件发生时运行的函数。
  var obj = { id: 5, name: "王五" };
  
  //为n5绑定mouseenter mouseleave两个事件，并为其传入附加数据obj
  // 附加数据可以是任意类型
  $("#n5").bind("mouseenter mouseleave", obj, function(event){
  	var $me = $(this);
  	var obj = event.data; // 这就是传入的附加数据
  	if( event.type == "mouseenter"){
  		$me.html( "你好，" + obj.name + "!");
  	}else if(event.type == "mouseleave" ){
  		$me.html( "再见，" + obj.name + "!");		
  	}			
  } );
  bind()函数的参数eventsMap是一个对象，可以"属性-值"的方式指定多个"事件类型-处理函数"。对应的示例代码如下：
  
  var eventsMap = {
  	"mouseenter": function(event){
  		$(this).html( "Hello!");		
  	},
  	
  	"mouseleave": function(event){
  		$(this).html( "Bye!");
  	}
  };
  
  //为n5绑定mouseenter mouseleave两个事件
  $("#n5").bind( eventsMap );
  

• live(“事件名”,fn)

• delegate(“子元素”,“事件名”,fn)

• blur(fn):失去焦点事件

• change(fn):文本改变且失去焦点时触发

• mouseover():鼠标移入时触发（了解）

• mouseout():鼠标移出时触发

HTML代码

.html()

.text()