首页 > > 网页制作 > Javascript >

jQuery

2019-05-13 07:13:53来源：博客园阅读 ()

　　什么是jQuery？jQuery是一个快速、简洁的JavaScript框架，jQuery设计的宗旨是“write Less，Do More”。

　　简单来说，就是封装了我们常用的Js操作，让我们调用的时候大大大的减少代码量，使用更少的代码做更多的事情。

　　好记性不如烂笔头，下面我将根据常用操作进行笔记，本篇比较适合刚刚入手的兄弟们和我在写代码的时候，对忘记的常用操作进行快速查看操作，不大适合新入门的学习（因为不够精深，粗少）。

　　我将根据以下的顺序进行笔记：

　　1、常用选择器；

　　2、常用函数；

　　3、常用事件；

　　废话已多说，go~go~go~

　　在我们使用jQuery之前，首先我们需要将jQuery的库文件加入应用

<head>
    <title>jQuery</title>
　　 <!-- 导入jQuery库-->
    <script type="text/javascript" src="jquery/jquery.min.js"/>
</head>

　　我们使用的js对象和jquery对象不能够一概而论，他们之间的方法是不能够相互调用的，所以我们要明白一个东东，-----》》》》 $

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

  　　$的四个作用:

  　　$(function(){})

 　　　　 相当于window.onload = function(){} 

  　　$(“html字符串”)

  　　　　根据这个html字符串创建元素节点对象 

 　　 $(“选择器”)

 　　　　 根据这个选择器查找元素节点对象

 　　 $(DOM对象)

  　　　　将DOM对象包装为jQuery对象

　　dom对象和jquery对象向之间的转换

使用jQuery核心函数包装DOM对象
　　var $btnEle = $(btnEle)
jQuery对象转DOM对象
　　使用数组下标：$btnEle[0]
　　使用get(index)方法：$btnEle.get(0)

1、常用选择器

　　基本类型选择器

　　1、id选择器

　　用法:$(‘#id’)

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

　　2、class选择器

　　用法: $(‘tagName’)

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

　　3、标签选择器　　

　　用法: $(‘tagName’)

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

　　4、*选择器

　　用法: $(*)

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

　　5、以上多个选择器组合

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

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

　　层次选择器

　　6、后代选择器

　　用法:$(”form input”)

　　说明:在给定的祖先元素下匹配所有后代元素

　　7、父子选择器

　　用法: $(”form > input”)

　　说明: 在指定父元素下匹配所有子元素.注意:要区分好后代元素与子元素

　　8、近邻选择器

　　用法: $(”label + input”)

　　说明: 匹配所有紧接在prev元素后的next元素

　　9、邻居选择器（同辈）

　　用法: $(”form ~ input”)

　　说明: 匹配prev元素之后的所有 siblings元素, 不包含该元素在内,并且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配.

　　基本过滤选择器

　　过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素, 该选择器都以 “:” 开头

　　按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤, 表单过滤和表单属性过滤选择器.

　　10、 :first

　　用法: $(”tr:first”) ;

　　说明: 匹配找到的第一个元素

　　11、:last

　　　用法: $(”tr:last”)

　　说明: 匹配找到的最后一个元素.与 :first 相对应

　　12、:not(selector)

　　用法: $(”input:not(:checked)”)

　　说明: 去除所有与给定选择器匹配的元素.有点类似于”非”,意思是没有被选中的input(当input的type=”checkbox”).

　　13、:even,:odd:eq(index),:gt(index),:lt(index)

　　用法: $(”tr:even”) 　说明: 匹配所有索引值为偶数的元素，从0开始计数.js的数组都是从0开始计数的.

　　用法: $(”tr:odd”) 　　说明: 匹配所有索引值为奇数的元素,和:even对应,从 0 开始计数.

　　用法: $(”tr:eq(0)”) 　说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数.

　　用法: $(”tr:gt(0)”) 　　说明: 匹配所有大于给定索引值的元素.

　　用法: $(”tr:lt(2)”) 　　说明: 匹配所有小于给定索引值的元素.

　　内容过滤选择器内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上

　　14、:contains(text)

　　　　用法: $(”div:contains(’John’)”)

　　　　说明: 匹配包含给定文本的元素.这个选择器比较有用，当我们要选择的不是dom标签元素时,它就派上了用场了,它的作用是查找被标签”围”起来的文本内容是否符合指定的内容的.

　　15、:empty

　　　　用法: $(”td:empty”)

　　　说明: 匹配所有不包含子元素或者文本的空元素

　　16、:has(selector)

　　　用法: $(”div:has(p)”).addClass(”test”)

　　　　说明: 匹配含有选择器所匹配的元素的元素.这个解释需要好好琢磨,但是一旦看了使用的例子就完全清楚了:给所有包含p元素的div标签加上class=”test”.

　　可见过滤选择器　　根据元素的可见和不可见状态来选择相应的元素

　　17、 :hidden

　　　　用法: $(”tr:hidden”)

　　　说明: 匹配所有的不可见元素，input 元素的 type 属性为“hidden” 的话也会被匹配到.意思是css中display:none和input type=”hidden”的都会被匹配到.同样,要在脑海中彻底分清楚冒号”:”, 点号”.”和逗号”,”的区别.

　　18、:visible

　　　　用法: $(”tr:visible”)

　　　　说明: 匹配所有的可见元素.

　　属性过滤选择器　属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素

　　19、[attribute]

　　　　用法: $(”div[id]“)

　　　　说明: 匹配包含给定属性的元素. 例子中是选取了所有带id属性的div标签.

　　20、[attribute!=value]

　　　　用法: $(”input[name!='newsletter']“).attr(”checked”, true)。

　　　　说明：匹配所有不含有指定的属性，或者属性不等于特定值的元素.此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value]).之前看到的 :not 派上了用场.

2、常用方法

　　内部插入：

　　.append;向元素内部结尾处追加内容

<script type="text/javascript">
	$(function () {
		$("#isSpan ").append($("<a></a>").append("我是超链接").attr("href","www.baidu.com"));
		})
</script>

<span id="isSpan"></span>


等同于向span里添加超链接标签

　　.appenTo 把所有匹配的元素追加到另一个指定的元素集合中

<script type="text/javascript">
			$(function () {
				$("<a></a>").append("我是超链接").attr("href","www.baidu.com").appendTo($("#isSpan"));
			})
</script>
这个和上面有一样的结果。

　　还有prepend和prepengdTo，他们和append的区别就是插入的位置不同，append插入在内容后，prepend插入到内容前

　　外部插入：

　　after(content)　　在元素后插入元素

		<script type="text/javascript">
　　　　　　　　　　　　$(function(){
			$("#button1").click(function(){
				$("#li1").after("hahhah");
			})	
		})
	　　　　</script>

		<ul id="ul1">
			<li id="li1">1</li>
			<li id="li2">2</li>
			<li id="li3">3</li>
			<li id="li4">4</li>
			<li id="li5">5</li>
		</ul>
　　　　　　　　<button id="button1" >after</button>

　　before（content）在匹配的元素前插入内容

　　append和afeter的区别就是内部和外部的插入区别，append插入的是标签内部<>这里<>的内容，aftercharity 的是<><>这里的内容其他几个类似不多举例

　. insertAfter(content) . insertBefore(content)　　

　　把所有匹配的元素插入到另一个、指定的元素集合的前后面　　

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

　　.each(function(index, itemDom){ })

reuslt:是我门想要遍历的元素，function内，item为当前遍历的对象，为形式参数，index为索引

	var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td>");
				var empIdTd = $("<td></td>").append(item.empId);
				var empNameTd = $("<td></td>").append(item.empName);
				var genderTd = $("<td></td>").append(item.gender=='M'?"男":"女");
				var emailTd = $("<td></td>").append(item.email);
				var deptNameTd = $("<td></td>").append(item.department.deptName);

　创建节点

　　 $(htmlString).

　删除节点

　　.empty()　　清空子节点

　　.remove　　清空子节点的同时删除自身

　属性操作

　　.attr(key,value)　　value值可选，如果只写kjey值为获得属性内容，包含value值得时候为覆盖或者设置属性。

　 removeAttr(key)　　删除属性

　　内容插入

　　。html（value）　　value值选填，不填写为获得元素内容，填写为设置内容

　　。val（value）　　获得匹配元素的当前值或者设置其值

　class操作