Skip to content

JQuery 笔记

Jump to bottom
wanglinzhizhi edited this page Jul 28, 2016 · 2 revisions 
layout: post
title:  "JQuery 笔记"

JQuery 笔记

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。 jQuery对象是jQuery独有的，如果一个对象是jQuery对象，那么久可以使用jQuery里的方法。

在jQuery中无法使用DOM对象的任何方法。同样，DOM对象也不能使用jQuery里的方法。

常用的CSS选择器

  1. 标签选择器

    1.1 语法：

     E{
 	 CSS规则
  }

    1.2. 描述：以文档元素作为选择符

    1.3. 实例：

      	td{
   		font-size：14px;
 	  	width：120px；
   	}

  2. ID选择器

    2.1 语法：

     ```
 #ID{
 	CSS规则
 }
 ```

    2.2 描述： 以文档元素的唯一标识符ID作为选择符

    2.3 实例：

     ```
 #note{
 		        font-size：14px;
 		        width：120px；
 		}

 ```

  3. 类选择器

    3.1 语法：

     	```
 	E.className{
 		CSS 规则
 		}

 	```

    3.2 描述：以文档元素的class作为选择符

    3.3 实例：

     	```
 	div.note{
 									font-size：14px;
 									width：120px；
 	}
 	.dream{
 					font-size:14px;
 	}

 	```

  4. 群组选择器

    4.1 语法：

     	E1，E2，E3{
 		CSS规则
 	}

    4.2 描述：多个选择符应用同样的样式规则

    4.3 实例：

     	td，p，div.a{
 			font-size:14px;
 	}

  5. 后代选择器

    5.1 语法：

     	E F{
 		CSS规则
 	}

    5.2 描述：元素E的任意后代元素F

    5.3 实例：

     #link a{
 	color：red；
 }

  6. 通配选择器

    6.1 语法：

     ```
 *{
 			CSS规则
 }

 ```

    6.2 描述：以文档的所有元素作为选择符

    6.3 实例：

     ```
 	*{
 		font-size:14px;
 	}

 ```

jQuery选择器的写法与CSS选择器的写法十分相似，只不过两者的作用效果不同，CSS选择器找到元素后是添加样式，而jQuery选择器找到元素后是添加行为。

jQuery中涉及CSS样式的部分比单纯的CSS功能更为强大，并且拥有跨浏览器的兼容性。

jQuery的简洁写法:

  1. $("#ID")可以代替document.getElementById(),
  2. $("tagName")可以代替document.getElementByTagName();

选择器 描述 返回 示例 $(“ancestors descendant") 选取ancestors 元素里的所有descent（后代）元素 集合元素 $(“div span")

		选取<div> 里的所有的<span>

$(“parent &gt; child") 选取parent元素下的child（子元素），与$(“ancestor descendant”）有区别，$(“ancestor descendant”）选择的是后代元素 集合元素 $(“div > span"）

		选取<div>元素的下元素名<span>的子元素

$(“prev+next") 选取紧接着prev元素后的next元素 集合元素 $(“.one+div"）

		选取class为one的下一个<div>元素

$("prevsiblings") 选取prev元素之后的所有sibling元素 集合元素 $（“#twodiv“）选取id为two的元素后面的所有

兄弟元素

$(".one + div") 等价 $(".one").next("div");

$("#prev~div")等价于$("#prev").nextAll("div");

$("div:hidden").show(1500);

过滤选择器 主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号（：）开头。按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象属性过滤选择器。

选择器中含有特殊符号的注意事项

  1. 转义符转义
  2. 1.3.1版本彻底放弃1.1.0 版本遗留下来的@符号，如果你使用1.3.1以上的版本，那么不能再属性前添加@符号。
  3. 选择器中含有空格的注意事项。

几个jQuery方法：

  1. show（）：显示隐藏的元素
  2. css（name，value）：给元素设定样式
  3. text（string）：设置所有匹配元素的文本内容
  4. filter（expr）：筛选出与指定表达式匹配的元素集合，其中expr可以是多个选择器的组合。注意区分它和find（）方法。find（）方法会在元素内寻找匹配元素，而filter（）则是筛选元素。一个是对它的子集操作，一个是对自身集合元素进行筛选。
  5. addClass（class）：为匹配的元素添加指定的类名
  6. removeClass（class）：从匹配的元素中删除类名

text（）方法

类似于JavaScript 中的innerText属性，可以用来读取或设置某个元素中的文本内容。

val（）方法

类似于JavaScript中的value属性，可以用来设置和获取元素的值。无论元素是文本框，下拉列表还是单选框，都可以返回元素的 值。如果元素为多选，则返回一个包含所有选择的值的数组。

遍历节点

  1. children（） 该方法用于匹配元素的子元素集合
  2. next() 用于获取匹配元素后面紧邻的同辈元素
  3. prevent（） 用于获取匹配元素前面紧邻的同辈元素
  4. sibling（） 用于获取匹配元素前后所有的同辈元素

jQuery中有一个方法能够给一个按钮添加一组交互式事件。而不需要判断：

	toggleBtn.click(function(){
	        If(true){
	                //元素隐藏
	        }else{
	                //元素显现
	        }
	})


	toggleBtn.toggle(function(){
	        If(true){
	                //元素隐藏
	        }else{
	                //元素显现
	        }
	})

Node:

toggle（）方法的作用是是交替执行代码，如果原来是显示的，则隐藏它；如果原来是隐藏的，则显示它。 toggle（）方法主要是控制行为上的重复切换。

DOM 文档对象模型

根据W3C DOM规范，DOM是一种与浏览器，平台，语言无关的接口，使用该接口可以轻松地访问页面中的所有标准组件。 DOM的分类：DOM Core ，HTML—DOM，CSS—DOM

toggleClass（）控制样式上的重复切换。如果类名存在则删除它，如果类名不存在则添加它。 $("p").toggleClass("another");

html()方法

html()方法，类似于JavaScript中的innerHTML属性，可以用来读取或设置某个元素中的HTML内容。

html（）方法可以用于XHTML文档，但不能应用于XML文档。

CSS-DOM技术简单来说就是读取和设置style对象的各种属性。style属性很有用处，但是最大的不足是无法通过它来提取到通过外部CSS设置的样式信息。然而在jQuery中这个很容易办到。 可以直接用css（）方法来获取元素的样式属性 $（“p“）.css（”color“）； 无论color属性是外部CSS导入，还是直接拼接在HTML元素里（内联），css（）方法都可以获取到属性style里的其他属性的值。

window.onload() and $(document).ready()

以浏览器装载文档为例，在页面加载完毕后，浏览器会通过JavaScript为DOM元素添加事件。在常规的JavaScript代码中，通常使用window.onload()方法，而在jQuery中，使用的是$(document).ready()来代替传统的JavaScript的window.onload()。$(document).ready()是事件模块中最重要的一个函数，可以极大地提高web应用程序的响应速度。通过该方法，可以在DOM载入就绪时就对七进行操纵并调用执行它所绑定的函数。

执行时机

$(document).ready()和window.onload方法在执行时机上有区别。 window.onload()方法是在网页中所有元素（包括元素的所有关联文件）完全加载到浏览器之后才执行，即JavaScript此时才可以访问网页中的任何元素。而通过jQuery的$(document).ready()烦啊烦注册时间处理程序，在DOM完全就绪时就可以被调用。此时，网页的所有元素对jQuery而言都是可以访问的，但是这并不意味着这些元素关联的文件都已经下载完毕。

举个例子，有一个大型的图库网站，为网页中所有图片添加某种行为，例如单击图片后让它隐藏或显示。如果使用window.onload（）方法来处理，那么用户必须等到每一幅图片加载完毕后，才可以进行操作。如果使用jQuery中 的$(document).ready()来进行设置，只要DOM就绪就可以操作了，不需要等待所有的图片下载完毕。很显然，把网页解析为DOM树的速度比把页面中的所有关联文件加载完毕的速度快很多。

另外需要注意一点，由于在$(document).ready()内注册的事件，只要DOM就绪就会被执行，因此可能此时元素的关联文件还未下载。例如与图片有关的HTML下载完毕，而且已经解析为DOM树了，但可能图片还未加载完毕，所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题，可以使用jQuery中另外一个关于页面加载的方法——load（）方法。load（）方法会在元素的onload事件中绑定一个处理函数。如果处理函数绑定在window上，则会在所有内容（包括窗口，框架，对象和图像等）都加载完毕后触发，如果处理函数绑定在元素上，这会在元素的内容加载完毕后触发。

	$(window).load(function(){
		//ToDo
	}


	window.onload=function(){
				//ToDo
			}

简写方式：

	$(document).ready(function（）{
		  //ToDo
	})


	$(function({
	    //ToDo
	})

note： $(document)可以简写成$( )。当$()不带参数时，默认就是”document“。

当发现相同的选择器在你的代码里出现多次时，请用变量把它缓存起来。有利于性能优化。

version3.0

	```
	/*version 3.0*/
	$(function(){
		$("#panel h5.head")
		.bind("click",function(){
			var $content=$(this).next();
			if ($content.is(":visible")) {
				$content.hide("fast");
			}else{
				$content.show();
			}

		})
	})

	```

version2.0

```
/*version 2.0*/
$(function(){
	$("#panel h5.head")
	.bind("click",function(){
		if ($(this).next().is(":visible")) {
			$(this).next().hide(3000);
		}else{
			$(this).next().show();
		}

	})
})

```

toggle（fn1,fn2,fn3….fnN)

toggle（）方法用于模拟鼠标连续单击事件。第一次单击元素，触发指定的第一个函数fn1，当再次单击同一个元素时，则触发指定的第二个函数fn2，如ugoyou更多的函数则依次触发，知道最后一个。随后，的每次单击都重复对这几个函数轮番调用。

阻止事件冒泡

		$("element").bind("click",function(event){
		        //….
		        event.stopPropagation();
		});

  1. 阻止默认行为，event.preventDefault（）；

  2. 停止事件冒泡，event.stopPropagation（）；

可简写为

	 return false；

jQuery中的动画

show（）和hide（）方法是jQuery中最基本的动画方法。在HTML文档里，为一个元素调用hide（）方法，会将该元素的display样式改为“none”

$("element").hide()	$("element").css("display","none")

Sample

  1. 网页选项卡

  2. 表格内容筛选器

  3. 表格展开关闭

  4. 网页自动换肤

Ajax

  1. load（） 是jQuery中最为简单和常用的 Ajax方法，能载入远程HTML代码并插入DOM中。结构为：

     load（url    [，data]   [,callback] )

  2. $.get() 使用GET方式来进行异步请求.结构为：

     $. get(url  [,data]   [,callback]   [.type])

Clone this wiki locally