一、jquery介绍
它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
核心特性: 具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，完全开源免费。
1、概述
1.1优势和缺陷
简化JavaScript代码操作 像CSS那样访问和操作DOM 修改CSS控制页面外观 事件处理更加容易 各种动画效果使用方便 让Ajax技术更加完美
不能向后兼容。每一个新版本不能兼容早期的版本。 插件兼容性不是太好，与上一点类似。
1.2下载和引用jQuery
引用jQuery与引用其他外部js文件一样
<script type="text/javascript" src="js/jQuery.min.js"></script>
2、jQuery库的核心方法——$()
其实“$()”方法是jQuery库中最重要、最核心的方法jQuery()的简写。如下代码：
$(function() {} ) 相当于 jQuery(function() {} )
$(“#box”) 相当于 jQuery(“#box”)
$(“p”).hide() 相当于 jQuery(“p”).hide()
2.1文档就绪事件
如果希望jQuery代码在html文档加载完之后立即执行，那么可以将代码放置在一个 document ready 函数中：
$(document).ready(function(){ // 在这里编写在DOM准备就绪后执行的代码... });
2.2jQuery链式编程（链式语法）
如果一直对同一个元素或元素的其他关系元素（兄弟元素，父子元素）进行操作，那么可以使用 .语法(点语法)，一直写下去。链式编程的意思是对象不停的调用方法，如：
$("#div").css('color','red').css(‘font-size',‘30px’).show(200);
2.3jQuery对象和DOM对象之间的转换
DOM对象转换成jQuery对象
DOM对象转换成jQuery对象比较简单，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象。
$(DOM对象)
示例如下：
var dom = document.getElementById("username");//dom对象
alert(dom.value);//获取用户名
var $jquery = $(dom);//dom对象转jquery对象
alert($jquery.val());//获取用户名
jQuery对象转换成DOM对象
jQuery对象是一个特殊的数组对象，即使只有一个元素， jQuery对象仍然是一个数组。 jQuery对象的数组里保存的是DOM对象，因此可以通过索引的方式将jQuery对象转换成DOM对象。
var jq = $("#div");//jq为jQuery对象
//获取ID为div的元素内的html代码。其中html()是jQuery里的方法
alert(jq.html());
var dom1 = jq.get(0);//dom1为DOM对象
alert(dom1.innerHTML);//获取dom1元素内的html代码。
var dom2 = jq[0];//dom2为DOM对象，与dom1是同一个元素
alert(dom2.textContent);//获取dom2元素内的文本内容
3、jQuery选择器简介
jQuery也需要先选取所需的DOM元素，然后再针对这些元素进行操作。我们先来看看jQuery如何获取所需的元素。在jQuery中，我们一般通过一个字符串来标识匹配的元素，例如：
$(“#uid”); //选取id属性为“uid”的单个元素
$(“p”); //选取所有的p元素
$(“.test”); //选择所有带有CSS类名为"test"的元素
$("[name=books]"); //选择所有name属性为"books"的元素
3.1选择器
1、标签选择器
按照指定的标签名称进行选择。
如:$("p")/选取所有的<p>元素
2、id选择器
选取文档中指定id值的元素。
如:$("#div1")W选取id="div1"的元素
如:$("p#div1")/W选取所有id=“div1"的<p>
3、类选择器
选取文档中所有指定class值的元素。
如:$(".c1")
/选取所有的class:="c1"的元素
如:$("p.c1")/选取所有class="c1"的<p>元素
4、全局选择器
选择所有元素。
如:$("*")∥选取所有元素
5 selector1,selector2,...
通过使用多个选择器的组合,可以同时选中选择器选中
的元素。
$("div,span,.one").css("color","blue")
3.2层次选择器
如果想通过DOM元素之间的层次关系来获取特定元素。
例如子元素、兄弟元素等。则需要通过层次选择器
1、后代选择器
在给定的祖先元素下匹配所有后代元素。
如:$("div span").css("color'","blue")
2、父子选择器
在指定父元素下匹配所有子元素。
如:$("div>span").css("color'","blue")
3、相邻选择器
匹配所有紧接在指定元素后的指定兄弟元素。
如:$("div+p").css("color'","blue")
4、平级选择器
匹配指定元素之后的所有指定兄弟元素。
如:$("div~span").css("color'","blue")
3.3基本过滤选择器
基本过滤选择器也可以称为简单过滤选择器,它是过滤选择器中使用较多的一种。它主要用来选择首、尾、指定索引、奇数或偶数位的元素等。
1、:first
匹配找到的第一个元素。
如:$("tr:first")
2、:last
匹配找到的最后一个元素。
如:$("tr:last")
3、:not(selector)
去除所有与给定选择器匹配的元素。
如:$("tr:not('.one)")
4、:even
匹配所有索引值为偶数的元素,从0开始计数。
如:$("tr:even")
5、odd
匹配所有索引值为奇数的元素,从0开始计数。
如:$("tr:odd")
6、:eq(index)
匹配一个给定索引值的元素。eq(0)就是获取第一个
元素,括号里面的是索引值,不是元素排列数。
如:$("tr:eq(0)")
7、gt(index)
匹配所有大于给定索引值的元素。
如:$("trgt(4)")
8、It(index)
匹配所有小于给定索引值的元素。
如:$("trt(2)")
3.4内容过滤选择器
内容过滤选择器可以根据HTML文本内容进行过滤选择。
1、:contains(text)
匹配包含给定文本的元素。
如:$("td:contains('张')")
2、:empty
匹配所有不包含子元素或者文本的空元素。
如:$("td:empty")
3、:has(selector)
匹配含有选择器所匹配的元素的元素。
如:$("td:has(p)")
4、parent
匹配含有子元素或者文本的元素,与:empty相反
如:$("td:parent'")
4.[attribute^=value]
匹配给定的属性是以某些值开始的元素。
如:$('div[idn="the"])
5,[attributes=value]
匹配给定的属性是以某些值结尾的元素。
如:$('div[id$="be"]')
6、
[attribute*=value]
匹配给定的属性是以包含某些值的元素。
如:$('div[id*="er"])
7、
[attributeFilter1][attributeFilter2]
[attributeFilterN]
3.5 复合属性选择器,需要同时满足多个筛选条件。
如:$('div[id*="e"][name])
1.:nth-child(index/even/odd/equation)
匹配其父元素下的第N个子元素或奇偶元素。这个选择
器和基本过滤选择器中的eq()有些类似,不同的地方就是
前者是从1开始,后者是从0开始。
如:$("tr td:nth-child(2)")
2、:first-child
匹配第一个子元素。:fist只匹配一个元素,此选择符
将为每个父元素匹配一个子元素。
如:$("table tr:first-child")
3、:last-child
匹配最后一个子元素。ast只匹配一个元素,此选择
符将为每个父元素匹配一个子元素。
如:$("table tr:last-child")
3.6 子元素过滤选择器
1 nth-child(index/even/odd/equation)
匹配其父元素下的第N个子元素或奇偶元素。这个选择
器和基本过滤选择器中的eq()有些类似,不同的地方就是
前者是从1开始,后者是从0开始。
如:$("tr td:nth-child(2)")
2、:first-child
匹配第一个子元素。:fist只匹配一个元素,此选择符
将为每个父元素匹配一个子元素。
如:$("table tr:first-child)
3、last-child
匹配最后一个子元素。ast只匹配一个元素,此选择
符将为每个父元素匹配一个子元素。
如:$("table tr:last-child)
4、only-child
如果某个元素是父元素中唯一的子元素,那将会被匹配。
如果父元素中还含有其他元素,那将不会被匹配。
如:$("td span:only-child")
719
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
