javascript的封装jQuery
来源：互联网 发布：app store付费软件 编辑：程序博客网 时间：2024/06/10 20:45
注意:(我们上课用的jquery库的版本是1.8.3,不同版本的jquery库会对其实的函数或者属性做不出不同程度的修改或者添加、删除,所以在之后的具体的操作中,最终还是要以当前版本的测试结果为准,但是它们的操作方式和思路几乎都是一样的,同时注意浏览器的兼容性问题)
1.发展历程:javascript到jQuery：
javascript
是Netscape公司开发的一种脚本语言，
其出现使得网页和用户之间实现了一种
实时的，动态的和交互的关系使网页包含更多活跃的元素。
弊端：
1.复杂的文档对象模型（DOM）
2.不一致的浏览器实现
3.缺乏便捷的开发调试工具
AJAX （Asynchronous javascript and xml,异步的javascript和XML）
javascript库的作用：为了简化javascript的开发，
javascript库封装了很多预定义的对象和使用函数。
JQuery就是js的一个库(其实就是别人给我们封装好的js文件,简化我们平时的js中的代码操作)
JQuery 简洁的语法和跨平台的兼容性，极大的简化了javascript开发人员遍历HTML文档，操作DOM，处理事件，执行动画和开发AJAX(javascript + xml + json )，其理念：write less,do more
优势：
1，轻量级
2，强大的选择器
3，出色的DOM操作的封装
4，可靠的事件处理机制
5，完善的Ajax,$.ajax()无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用
6，不污染顶级变量，只建立一个名为jQuery对象，其所有函数方法都在这个对象之下
7，出色的浏览器兼容性
8，链式操作方式，发生在同一个jquery对象上的一组动作，可以直接连写而不用重复获取对象
9，基于jquery可以开发出各种各样优秀的jquery插件
注意:我们自己可以使用jquery提供给我们的各种函数对页面中的dom元素来进行操作从而完成我们想要的功能和效果。同时我们也可以针对页面中的某一种功能效果,使用jquery来开发基于jquery的插件,那么这个插件将来就可以在不同的项目中使用从而实现和我们之前一样的效果(就像我们使用java开发框架在不同的项目中使用一样的道理).
jquery库类型
完整版本： 主要用于测试，学习和开发
mini版本： 主要用于产品和项目
jquery官网下载地址:http://jquery.com/download/
jquery库有俩种版本
jquery 1.x 兼容所有IE浏览器的
jquery 2.x 不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
jquery 3.x 不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本;最新版本：3.2.1（2017年3月20日）
2.jQuery的使用
jQuery不需要安装，想要在某个页面上使用jQuery时，只需要在相关的html中引入jQuery的库文件即可。
注意:jQuery库中只提供了一个【名字为jQuery】的对象,但是这个对象有很多方法以及属性,同时还提供了方法可以把我们平时使用的普通页面元素【转换】为jQuery类型的对象来使用,这样我们就可以在拿到页面元素后转成jQuery对象并使用jQuery使用的方法和属性了。
例如:
var d1 = document.getElementById("my_div");
//出错,因为d1是dom模型中的对象而不是jQuery的对象,而hide是jQuery中的函数
d1.hide();
//注:jQuery对象一般用$开头的变量接收,当然也使用一般的变量名字
var $d2 = jQuery("#my_div");
//正确的把div隐藏了,因为$d2是一个jQuery的对象,所以调用jQuery提供的方法
$d2.hide();
强调:jQuery库只提供了一个叫jQuery的对象,但是我们可以使用jQuery库中提供的方法把我们的普通dom对象转换为jQuery的对象,从而使用其提供的方法.
$是jQuery的一个简写形式
$("#my_div")等价于jQuery("#my_div")
之后的代码中我们一般都会使用jQuery的简写
如何判断一个对象是不是jQuery的对象?
var $d2 = jQuery("#my_div");
alert($d2 instanceof jQuery);//返回true则是jQuery对象
alert(typeof($d2));//Object 这个判断不出来
window对象的onload事件:当某个元素加载完毕的时候触发
例如:
<html>
<head>
<script type="text/javascript">
//给window对象的onload事件绑定一个匿名函数
window.onload = function(){
// ....
}
</script>
</head>
<body>
.....
.....
.....
</body>
</html>
注:这里表示当网页中所有的内容加载完毕后（包含图片）才能执行代码中的匿名函数
jQuery中的有一个函数可以代替这种情况:
例如:
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
//...dosomething
});
</script>
</head>
<body>
.....
.....
.....
</body>
</html>
注:网页中所有DOM结构加载完毕后就执行ready方法中定义的匿名函数，可能dom元素关联的东西并没有加载完(图片等资源),效果和onload事件一样,但是执行效率比onload高,因为不需要等待页面中图片等资源的加载完毕.
jQuery的这个函数有一个简写的形式:
$(function(){
});
很像我们之前java中的在一个方法中写的匿名内部类的对象
a.test(new Student(){
....
});
3.DOM对象与jQuery对象：
1.DOM(Document Object Model 文档对象模型) 每一份DOM都可以表示成一颗树。
在html中，<table> <h2> <p> <ul> 等都是DOM元素节点
可以通过javascript中的方法获取到DOM元素节点：
getElementById()
getElementsByTagName()
..
2.jQuery对象 就是通过jQuery包装DOM对象后产生的对象，jQuery对象是jQuery独有的，如果一个对象是jquery对象就可以使用jquery库文件中的方法，但是jquery对象中无法使用dom对象的任何方法
例如:
$("#foo").html() 等价于 document.getElementById("foo").innerHTML;
但是不可以 $("#foo").innerHTML
3.对象之间的转化：
定义变量的风格，（推荐使用）js中的变量名是可以使用$开头的
dom对象使用普通的变量名字
jQuery对象一般可以使用$开头的变量名
这样主要是用于区别jquery对象和dom对象的,没有其他别的作用.jQuery对象也可以使用一个普通的变量名
1. jquery对象 转换为 DOM对象
jquery对象是一个数组对象，可以通过[index]方法得到相应的DOM对象 对象名[index],也可以通过get(index)方法获得，对象名.get(index)
其中index是jQuery对象中的下标(jquery可以看成一个数字/集合)
怎么来理解这里收的【数组对象】:首先它是一个对象,同时这个对象里面也有像数组一样的下标,可以存值和取值.除了这以外还有这个对象的其他的一些属性.这个时候如果使用for-in的话可以看到这个对象中的属性及其值.
2. DOM对象转换成jquery对象
使用$将DOM对象包装起来即可
var cc = document.getElementById("cc");
var $cc = $(cc);
其实所有的jquery对象都是通过$()函数制造出来的，它就是一个jquery对象的制造工厂
3. 获得一个jQuery对象的三种方式
一:把一个dom对象转换为jQuery对象
var cc = document.getElementById("cc");
var $cc = $(cc);
二:通过选择器直接拿到一个jQuery对象
var d = $("#my_div");
三:直接创造出一个jQuery对象
var v = $("<div>test</div>");
注意:我们使出回身解数把一个对象变为jQuery对象的目的 就是我们想通过这个对象调用到jQuery库给我们提供的各种简单便捷的函数.从而达到上面所提供的jQuery的理念:write less,do more
二，jquery选择器
1.熟悉一下之前学过的CSS 常用的选择器
标签选择器
div{
}
ID选择器
#my_div{
}
类选择器
.class_div{
}
群组选择器
div,#my_span,.my_li{
}
后代选择器
div span{
元素div的任意后代元素span
}
*{
以文档的所有元素作为选择符
}
2.jquery 选择器
jquery中的选择器完全继承了CSS的风格。利用jQuery选择器可以方便快速地找出特定的DOM元素，然后对它们进行各种操作。
jquery选择器找到元素后添加行为或者修改属性或者样式,css选择器找到元素后只能添加样式
选择器特性，如果页面上有要选择的元素，选中，如果没有则获得一个空的jquery对象。
1，基本选择器：最简单，但是最常用
通过Id，class,标签名查找DOM元素
1) id选择器
jQuery使用JavaScript函数document.getElementById()，返回单个元素，其他的基本选择器都是返回多个元素
每个id值在一个文件中只能使用一次。如果多个元素分配了相同的ID，将只匹配处于页面中最上面的一个匹配成功的元素.
$("#myId")
2) class选择器
相同class的元素在一个DOM中可以出现多次，通过类选择器可以选择零到多个元素
$(".myClass")
3) 标签选择器
jQuery使用JavaScript函数JavaScript的 getElementsByTagName()
$("table")
4) *选择器
获得所有元素
5) 组合选择器 selector1,selector2,selector3 多个选择器
指定任意多个选择器，并将匹配到的元素合并到一个结果内。
$("div,span,p.myClass")
2，层次选择器：通过Dom元素之间的层次关系来获取特定元素，
例如后代元素，子元素，相邻元素，兄弟元素等
1)后代选择器
$("ancestor descendant")
ancestor: 任何有效的选择器。
descendant: 一个用来筛选后代元素的选择器。
选取ancestor元素中所有descendant元素，一个元素的后代可能是该元素的一个孩子，孙子，曾孙
注意:选择器中的空格 一定要有的
2)子代选择器
$("parent>child")
parent: 任何有效的选择器。child: 用来筛选子元素的选择器。
它只会选择第一级的后代
3)相邻兄弟选择器
$("prev+next") 也可以是jquery对象的next()函数获得(属于jquery中的查找函数)
prev: 任何有效的选择器。next: 用于筛选紧跟在 "prev" 后面的元素的选择器。
所选择到的元素必须是同一个父元素下的元素(紧挨着的兄弟关系)
例如:
$("#s2+span");
$("#s2").next();
4）一般兄弟选择器
$('prev~siblings')
prev: 任何有效的选择器。
siblings: 当前选中元素的后面的所有符合条件的兄弟元素。
$("#prev~div")
同时调用siblings()函数也能到达类似的效果(和上面的next函数情况差不多,也属于jquery中的查找函数)
例如:
<div>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<span></span>
<span></span>
<span></span>
</div>
$("#div2~span") 获得div2【后面】的所有的span元素(三个)
$("#div2~div") 获得div2【后面】的所有的div元素(俩个)
$("#div2").siblings("div") 获得div2的【所有】的div兄弟元素(三个)
$("#div2").siblings() 获得div2的【所有】的兄弟元素(三个包括span和div)
3，过滤选择器：通过特定的过滤规则来筛选所需的DOM元素，过滤选择器都以冒号：开头
1）基本过滤器
:first
选取当前匹配成功的元素中的第1个元素
$("tr:first")
:last
选取当前匹配成功的元素中的最后一个元素
$("tr:last")
:not(selector)
去除所有与给定选择器匹配的元素:
$("input:not(.myclass)")
//-------------与索引有关的--------
:even，
选取索引是偶数的所有元素，索引从0开始，所以:even选择器是选择第一个元素，第三个元素，类推。
$("tr:even").css("background-color", "red");
推荐使用.filter(":even")方法，效率更高
$("tr").filter(":even").css("background-color", "red");
:odd 选取索引是奇数的所有元素，索引从0开始
选取索引是奇数的所有元素，索引从1开始，所以:even选择器是选择第二个元素，第四个元素，类推。
$("tr:odd").css("background-color", "red");
推荐使用.filter(":odd")方法，效率更高
$("tr").filter(":odd").css("background-color", "red");
:eq(index)
选取索引等于index的元素（index从0开始）
推荐使用.eq(index)方法
$("td:eq(2)").css("background-color", "red");
$("td").eq(2).css("background-color", "red");
:gt(index)
选取索引大于index的元素（index从0开始）
$("tr:gt(3)").css("background-color", "red");
推荐使用.slice(index)
$("tr").slice(3).css("background-color", "red");
:lt(index)
选取索引小于Index的元素（index从0开始）
$("tr:lt(3)").css("background-color", "red");
推荐使用.slice(0, index)
$("tr").slice(0,3).css("background-color", "red");
//------其他特殊的情况
:header 选取所有的标题元素，例如h1,h2,h3等
$(":header")
推荐使用.filter(":header")
$("*").filter(":header");
:animated
选取当前正在执行动画的所有元素
$("div:animated").toggleClass("colored");
2）内容过滤选择器
:contains(text)
选取含有文本内容为"text"的元素
匹配的文本可以直接出现在所选的元素中，或在该元素的任何后代中，或两者兼有。
$("div:contains('briup')").css("text-decoration", "underline");将含有"briup"的div加下划线
例如:
<div id="div5">456briup123</div>
<div id="div6">
<span>456briup123</span>
</div>
:empty
选取不包含子元素或者文本的 空元素
$("div:empty").text("Was empty!")
或者
$("div:empty").html("Was empty!")
:has(selector)
选取含有某些指定元素的元素
如果表达式 $('div:has(p)') 匹配一个 <div>，那么应有一个<p>存在于 <div> 后代元素中的任何地方，
不是直接的子元素也可以。
$("div:has('span')") 等价于 $("div:has(span)")
例如:$("div:has(#span1)")
:parent
选取含有子元素或者文本的元素，这个正好和 :empty相反。
$(".divClass:parent").fadeTo(1500, 0.3);
所有包含子元素的div在1500毫秒内将其透明度变为0.3
3）可见性过滤选择器
:hidden
选择所有隐藏的元素。
主要指的是:
CSS display值是none；
type="hidden"的表单元素
还有一些特殊情况:
<head>中的所有元素（不同浏览器可能情况不一样 ）
宽度和高度都显式设置为0
祖先元素是隐藏的
特殊可见：
元素visibility: hidden或opacity: 0 被认为是可见的，因为他们仍然占据布局空间。opacity是透明的意思
让一个隐藏的div在3000毫秒内显示出来
$("div:hidden").show(3000);
:visible
选取所有可见的元素
如果元素中占据文档中一定的空间,元素被认为是可见的。可见元素的宽度或高度，都要是大于零。
$(":visible")
$("div:visible")
4）属性过滤器
<div name="" id="" class="" myAtr="">
[attribute]
选择所有具有指定属性的元素，该属性可以是任何值。
$("div[id]") 选取拥有属性Id的div元素
[attribute="value"]
选择属性值为value的元素
value:一个属性值，可以是一个不带引号的一个单词或带一个引号的字符串。
$('div[class="cc"]')
[attribute!=value]
属性不等于value的元素
$('input[name!="newsletter"]')
[attribute^=value]
属性值以value开始的元素,速度比较慢，不推荐使用
$('input[name^="news"]').val('test');
[attribute$=value]
属性值以value结束的元素
$('input[name$="letter"]').val('test');
[attribute*=value]
选择指定属性具有包含一个给定的子字符串的元素。
$('input[name*="man"]').val('has man in it!');
[selector1][selector2]
多个属性选择器一起使用
$('input[id][name$="man"]')
5）子元素过滤选择器( )
:nth-child()
例如:
<div class="div1">
<span id="s1">s1</span>
<span id="s2">s2</span>
<span id="s3">s3</span>
<span id="s4">s4</span>
<span id="s5">s5</span>
<span id="s6">s6</span>
<span id="s7">s7</span>
</div>
<div class="div1"></div>
<div class="div1"></div>
选择 当前元素的 第1个子元素
$(".div1:first :nth-child(1)")
选择 当前元素的 第4个子元素
$(".div1:first :nth-child(4)")
选择 当前元素的 为偶数的子元素
$(".div1:first :nth-child(even)")
选择 当前元素的 为奇数的子元素
$(".div1:first :nth-child(odd)")
注意:$(".div1:first :nth-child(1)")中的空格一定要加,表示其子元素的筛选
:first-child
可以匹配多个：选取当前元素下面的第一个子元素，相当于:nth-child(1)。
$("div span:first-child")
例如:
<div>
<span id="s1">s1</span>
<span id="s2">s2</span>
</div>
<div>
<span id="s1">s1</span>
<span id="s2">s2</span>
</div>
<div>
<span id="s1">s1</span>
<span id="s2">s2</span>
</div>
<div>
<span id="s1">s1</span>
<span id="s2">s2</span>
</div>
拿到所有div下面的span 共八个
$("div span");
拿到所有div下面的span 共八个,然后拿到每一个span下面的第一个子元素 共0个因为span下面没有子元素(文本元素不算)
$("div span :first-child")
拿到所有div下面的span 共八个,然后再进行筛选得到每个div下面的第一个span 共四个
$("div span:first-child")
注意:通过上面现象【重视选择器中的空格】的作用
:last-child
可以匹配多个：选取当前元素的最后一个子元素
$("div span:last-child")
:only-child
如果某个元素是它父元素中唯一的子元素，将被匹配。
选择button标签元素,但是他必须是div中的唯一元素
$("div button:only-child")
:first-of-type
选择当前元素中同一类型的第一个元素。
如果有多个类型那么就选出每个类型的第一个元素
:last-of-type
选择当前元素中同一类型的最后一个元素
如果有多个类型那么就选出每个类型的最后一个元素
例如:
<div id="myDiv">
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<span id="span1"></span>
<span id="span2"></span>
<span id="span3"></span>
</div>
拿到myDiv下面的所有span,再筛选拿到第一个span
$("#myDiv span:first-of-type")
拿到myDiv下面的所有span,再筛选拿到最后一个span
$("#myDiv span:last-of-type")
拿到myDiv下面的所有子元素,然后筛选出每种子元素的第一个
得到test1元素和span1元素
$("#myDiv :first-of-type");
拿到myDiv下面的所有子元素,然后筛选出每种子元素的最后一个
得到test3元素和span3元素
$("#myDiv :last-of-type");
4，表单选择器：主要是对选择的表单元素进行过滤。
:enabled
选取所有可用元素
该选择器仅可用于选择支持disabled属性（attribute）的HTML元素
(<button>, <input>, <optgroup>, <option>, <select>, 和 <textarea>)。
$("input:enabled")
:disabled
选取所有不可用的元素
该选择器也是仅可用于支持disabled属性的HTML元素
$("input:disabled")
:checked
选取所有被选中的元素
用于复选框和单选框(下拉框)
$( "input:checked" ).length;
:selected
选取所有被选中的选项元素
该选择器只适用于<option>元素
$("select option:selected")
:input
选取所有的<input><textarea><select><button>元素
$(":input")选择可以让用户输入的标签元素
$("input")选择名字为input的标签元素
:text
选取所有的单行文本框（<input type="text">）
$('input:text')
:password 选取所有的密码框
:radio 选取所有的单选框
:checkbox 选取所有的多选框
:submit 选取所有的提交按钮
:image 图像
:reset 重置按钮
:button 所有按钮
:file 所有上传域
例如:
拿到页面中第一个form表单中的密码输入框
$("form:first input:password");
拿到页面中第一个form表单中的密码输入框中的第二个
$("form:first input:password:eq(1)")
1.发展历程:javascript到jQuery：
javascript
是Netscape公司开发的一种脚本语言，
其出现使得网页和用户之间实现了一种
实时的，动态的和交互的关系使网页包含更多活跃的元素。
弊端：
1.复杂的文档对象模型（DOM）
2.不一致的浏览器实现
3.缺乏便捷的开发调试工具
AJAX （Asynchronous javascript and xml,异步的javascript和XML）
javascript库的作用：为了简化javascript的开发，
javascript库封装了很多预定义的对象和使用函数。
JQuery就是js的一个库(其实就是别人给我们封装好的js文件,简化我们平时的js中的代码操作)
JQuery 简洁的语法和跨平台的兼容性，极大的简化了javascript开发人员遍历HTML文档，操作DOM，处理事件，执行动画和开发AJAX(javascript + xml + json )，其理念：write less,do more
优势：
1，轻量级
2，强大的选择器
3，出色的DOM操作的封装
4，可靠的事件处理机制
5，完善的Ajax,$.ajax()无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用
6，不污染顶级变量，只建立一个名为jQuery对象，其所有函数方法都在这个对象之下
7，出色的浏览器兼容性
8，链式操作方式，发生在同一个jquery对象上的一组动作，可以直接连写而不用重复获取对象
9，基于jquery可以开发出各种各样优秀的jquery插件
注意:我们自己可以使用jquery提供给我们的各种函数对页面中的dom元素来进行操作从而完成我们想要的功能和效果。同时我们也可以针对页面中的某一种功能效果,使用jquery来开发基于jquery的插件,那么这个插件将来就可以在不同的项目中使用从而实现和我们之前一样的效果(就像我们使用java开发框架在不同的项目中使用一样的道理).
jquery库类型
完整版本： 主要用于测试，学习和开发
mini版本： 主要用于产品和项目
jquery官网下载地址:http://jquery.com/download/
jquery库有俩种版本
jquery 1.x 兼容所有IE浏览器的
jquery 2.x 不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
jquery 3.x 不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本;最新版本：3.2.1（2017年3月20日）
2.jQuery的使用
jQuery不需要安装，想要在某个页面上使用jQuery时，只需要在相关的html中引入jQuery的库文件即可。
注意:jQuery库中只提供了一个【名字为jQuery】的对象,但是这个对象有很多方法以及属性,同时还提供了方法可以把我们平时使用的普通页面元素【转换】为jQuery类型的对象来使用,这样我们就可以在拿到页面元素后转成jQuery对象并使用jQuery使用的方法和属性了。
例如:
var d1 = document.getElementById("my_div");
//出错,因为d1是dom模型中的对象而不是jQuery的对象,而hide是jQuery中的函数
d1.hide();
//注:jQuery对象一般用$开头的变量接收,当然也使用一般的变量名字
var $d2 = jQuery("#my_div");
//正确的把div隐藏了,因为$d2是一个jQuery的对象,所以调用jQuery提供的方法
$d2.hide();
强调:jQuery库只提供了一个叫jQuery的对象,但是我们可以使用jQuery库中提供的方法把我们的普通dom对象转换为jQuery的对象,从而使用其提供的方法.
$是jQuery的一个简写形式
$("#my_div")等价于jQuery("#my_div")
之后的代码中我们一般都会使用jQuery的简写
如何判断一个对象是不是jQuery的对象?
var $d2 = jQuery("#my_div");
alert($d2 instanceof jQuery);//返回true则是jQuery对象
alert(typeof($d2));//Object 这个判断不出来
window对象的onload事件:当某个元素加载完毕的时候触发
例如:
<html>
<head>
<script type="text/javascript">
//给window对象的onload事件绑定一个匿名函数
window.onload = function(){
// ....
}
</script>
</head>
<body>
.....
.....
.....
</body>
</html>
注:这里表示当网页中所有的内容加载完毕后（包含图片）才能执行代码中的匿名函数
jQuery中的有一个函数可以代替这种情况:
例如:
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
//...dosomething
});
</script>
</head>
<body>
.....
.....
.....
</body>
</html>
注:网页中所有DOM结构加载完毕后就执行ready方法中定义的匿名函数，可能dom元素关联的东西并没有加载完(图片等资源),效果和onload事件一样,但是执行效率比onload高,因为不需要等待页面中图片等资源的加载完毕.
jQuery的这个函数有一个简写的形式:
$(function(){
});
很像我们之前java中的在一个方法中写的匿名内部类的对象
a.test(new Student(){
....
});
3.DOM对象与jQuery对象：
1.DOM(Document Object Model 文档对象模型) 每一份DOM都可以表示成一颗树。
在html中，<table> <h2> <p> <ul> 等都是DOM元素节点
可以通过javascript中的方法获取到DOM元素节点：
getElementById()
getElementsByTagName()
..
2.jQuery对象 就是通过jQuery包装DOM对象后产生的对象，jQuery对象是jQuery独有的，如果一个对象是jquery对象就可以使用jquery库文件中的方法，但是jquery对象中无法使用dom对象的任何方法
例如:
$("#foo").html() 等价于 document.getElementById("foo").innerHTML;
但是不可以 $("#foo").innerHTML
3.对象之间的转化：
定义变量的风格，（推荐使用）js中的变量名是可以使用$开头的
dom对象使用普通的变量名字
jQuery对象一般可以使用$开头的变量名
这样主要是用于区别jquery对象和dom对象的,没有其他别的作用.jQuery对象也可以使用一个普通的变量名
1. jquery对象 转换为 DOM对象
jquery对象是一个数组对象，可以通过[index]方法得到相应的DOM对象 对象名[index],也可以通过get(index)方法获得，对象名.get(index)
其中index是jQuery对象中的下标(jquery可以看成一个数字/集合)
怎么来理解这里收的【数组对象】:首先它是一个对象,同时这个对象里面也有像数组一样的下标,可以存值和取值.除了这以外还有这个对象的其他的一些属性.这个时候如果使用for-in的话可以看到这个对象中的属性及其值.
2. DOM对象转换成jquery对象
使用$将DOM对象包装起来即可
var cc = document.getElementById("cc");
var $cc = $(cc);
其实所有的jquery对象都是通过$()函数制造出来的，它就是一个jquery对象的制造工厂
3. 获得一个jQuery对象的三种方式
一:把一个dom对象转换为jQuery对象
var cc = document.getElementById("cc");
var $cc = $(cc);
二:通过选择器直接拿到一个jQuery对象
var d = $("#my_div");
三:直接创造出一个jQuery对象
var v = $("<div>test</div>");
注意:我们使出回身解数把一个对象变为jQuery对象的目的 就是我们想通过这个对象调用到jQuery库给我们提供的各种简单便捷的函数.从而达到上面所提供的jQuery的理念:write less,do more
二，jquery选择器
1.熟悉一下之前学过的CSS 常用的选择器
标签选择器
div{
}
ID选择器
#my_div{
}
类选择器
.class_div{
}
群组选择器
div,#my_span,.my_li{
}
后代选择器
div span{
元素div的任意后代元素span
}
*{
以文档的所有元素作为选择符
}
2.jquery 选择器
jquery中的选择器完全继承了CSS的风格。利用jQuery选择器可以方便快速地找出特定的DOM元素，然后对它们进行各种操作。
jquery选择器找到元素后添加行为或者修改属性或者样式,css选择器找到元素后只能添加样式
选择器特性，如果页面上有要选择的元素，选中，如果没有则获得一个空的jquery对象。
1，基本选择器：最简单，但是最常用
通过Id，class,标签名查找DOM元素
1) id选择器
jQuery使用JavaScript函数document.getElementById()，返回单个元素，其他的基本选择器都是返回多个元素
每个id值在一个文件中只能使用一次。如果多个元素分配了相同的ID，将只匹配处于页面中最上面的一个匹配成功的元素.
$("#myId")
2) class选择器
相同class的元素在一个DOM中可以出现多次，通过类选择器可以选择零到多个元素
$(".myClass")
3) 标签选择器
jQuery使用JavaScript函数JavaScript的 getElementsByTagName()
$("table")
4) *选择器
获得所有元素
5) 组合选择器 selector1,selector2,selector3 多个选择器
指定任意多个选择器，并将匹配到的元素合并到一个结果内。
$("div,span,p.myClass")
2，层次选择器：通过Dom元素之间的层次关系来获取特定元素，
例如后代元素，子元素，相邻元素，兄弟元素等
1)后代选择器
$("ancestor descendant")
ancestor: 任何有效的选择器。
descendant: 一个用来筛选后代元素的选择器。
选取ancestor元素中所有descendant元素，一个元素的后代可能是该元素的一个孩子，孙子，曾孙
注意:选择器中的空格 一定要有的
2)子代选择器
$("parent>child")
parent: 任何有效的选择器。child: 用来筛选子元素的选择器。
它只会选择第一级的后代
3)相邻兄弟选择器
$("prev+next") 也可以是jquery对象的next()函数获得(属于jquery中的查找函数)
prev: 任何有效的选择器。next: 用于筛选紧跟在 "prev" 后面的元素的选择器。
所选择到的元素必须是同一个父元素下的元素(紧挨着的兄弟关系)
例如:
$("#s2+span");
$("#s2").next();
4）一般兄弟选择器
$('prev~siblings')
prev: 任何有效的选择器。
siblings: 当前选中元素的后面的所有符合条件的兄弟元素。
$("#prev~div")
同时调用siblings()函数也能到达类似的效果(和上面的next函数情况差不多,也属于jquery中的查找函数)
例如:
<div>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<span></span>
<span></span>
<span></span>
</div>
$("#div2~span") 获得div2【后面】的所有的span元素(三个)
$("#div2~div") 获得div2【后面】的所有的div元素(俩个)
$("#div2").siblings("div") 获得div2的【所有】的div兄弟元素(三个)
$("#div2").siblings() 获得div2的【所有】的兄弟元素(三个包括span和div)
3，过滤选择器：通过特定的过滤规则来筛选所需的DOM元素，过滤选择器都以冒号：开头
1）基本过滤器
:first
选取当前匹配成功的元素中的第1个元素
$("tr:first")
:last
选取当前匹配成功的元素中的最后一个元素
$("tr:last")
:not(selector)
去除所有与给定选择器匹配的元素:
$("input:not(.myclass)")
//-------------与索引有关的--------
:even，
选取索引是偶数的所有元素，索引从0开始，所以:even选择器是选择第一个元素，第三个元素，类推。
$("tr:even").css("background-color", "red");
推荐使用.filter(":even")方法，效率更高
$("tr").filter(":even").css("background-color", "red");
:odd 选取索引是奇数的所有元素，索引从0开始
选取索引是奇数的所有元素，索引从1开始，所以:even选择器是选择第二个元素，第四个元素，类推。
$("tr:odd").css("background-color", "red");
推荐使用.filter(":odd")方法，效率更高
$("tr").filter(":odd").css("background-color", "red");
:eq(index)
选取索引等于index的元素（index从0开始）
推荐使用.eq(index)方法
$("td:eq(2)").css("background-color", "red");
$("td").eq(2).css("background-color", "red");
:gt(index)
选取索引大于index的元素（index从0开始）
$("tr:gt(3)").css("background-color", "red");
推荐使用.slice(index)
$("tr").slice(3).css("background-color", "red");
:lt(index)
选取索引小于Index的元素（index从0开始）
$("tr:lt(3)").css("background-color", "red");
推荐使用.slice(0, index)
$("tr").slice(0,3).css("background-color", "red");
//------其他特殊的情况
:header 选取所有的标题元素，例如h1,h2,h3等
$(":header")
推荐使用.filter(":header")
$("*").filter(":header");
:animated
选取当前正在执行动画的所有元素
$("div:animated").toggleClass("colored");
2）内容过滤选择器
:contains(text)
选取含有文本内容为"text"的元素
匹配的文本可以直接出现在所选的元素中，或在该元素的任何后代中，或两者兼有。
$("div:contains('briup')").css("text-decoration", "underline");将含有"briup"的div加下划线
例如:
<div id="div5">456briup123</div>
<div id="div6">
<span>456briup123</span>
</div>
:empty
选取不包含子元素或者文本的 空元素
$("div:empty").text("Was empty!")
或者
$("div:empty").html("Was empty!")
:has(selector)
选取含有某些指定元素的元素
如果表达式 $('div:has(p)') 匹配一个 <div>，那么应有一个<p>存在于 <div> 后代元素中的任何地方，
不是直接的子元素也可以。
$("div:has('span')") 等价于 $("div:has(span)")
例如:$("div:has(#span1)")
:parent
选取含有子元素或者文本的元素，这个正好和 :empty相反。
$(".divClass:parent").fadeTo(1500, 0.3);
所有包含子元素的div在1500毫秒内将其透明度变为0.3
3）可见性过滤选择器
:hidden
选择所有隐藏的元素。
主要指的是:
CSS display值是none；
type="hidden"的表单元素
还有一些特殊情况:
<head>中的所有元素（不同浏览器可能情况不一样 ）
宽度和高度都显式设置为0
祖先元素是隐藏的
特殊可见：
元素visibility: hidden或opacity: 0 被认为是可见的，因为他们仍然占据布局空间。opacity是透明的意思
让一个隐藏的div在3000毫秒内显示出来
$("div:hidden").show(3000);
:visible
选取所有可见的元素
如果元素中占据文档中一定的空间,元素被认为是可见的。可见元素的宽度或高度，都要是大于零。
$(":visible")
$("div:visible")
4）属性过滤器
<div name="" id="" class="" myAtr="">
[attribute]
选择所有具有指定属性的元素，该属性可以是任何值。
$("div[id]") 选取拥有属性Id的div元素
[attribute="value"]
选择属性值为value的元素
value:一个属性值，可以是一个不带引号的一个单词或带一个引号的字符串。
$('div[class="cc"]')
[attribute!=value]
属性不等于value的元素
$('input[name!="newsletter"]')
[attribute^=value]
属性值以value开始的元素,速度比较慢，不推荐使用
$('input[name^="news"]').val('test');
[attribute$=value]
属性值以value结束的元素
$('input[name$="letter"]').val('test');
[attribute*=value]
选择指定属性具有包含一个给定的子字符串的元素。
$('input[name*="man"]').val('has man in it!');
[selector1][selector2]
多个属性选择器一起使用
$('input[id][name$="man"]')
5）子元素过滤选择器( )
:nth-child()
例如:
<div class="div1">
<span id="s1">s1</span>
<span id="s2">s2</span>
<span id="s3">s3</span>
<span id="s4">s4</span>
<span id="s5">s5</span>
<span id="s6">s6</span>
<span id="s7">s7</span>
</div>
<div class="div1"></div>
<div class="div1"></div>
选择 当前元素的 第1个子元素
$(".div1:first :nth-child(1)")
选择 当前元素的 第4个子元素
$(".div1:first :nth-child(4)")
选择 当前元素的 为偶数的子元素
$(".div1:first :nth-child(even)")
选择 当前元素的 为奇数的子元素
$(".div1:first :nth-child(odd)")
注意:$(".div1:first :nth-child(1)")中的空格一定要加,表示其子元素的筛选
:first-child
可以匹配多个：选取当前元素下面的第一个子元素，相当于:nth-child(1)。
$("div span:first-child")
例如:
<div>
<span id="s1">s1</span>
<span id="s2">s2</span>
</div>
<div>
<span id="s1">s1</span>
<span id="s2">s2</span>
</div>
<div>
<span id="s1">s1</span>
<span id="s2">s2</span>
</div>
<div>
<span id="s1">s1</span>
<span id="s2">s2</span>
</div>
拿到所有div下面的span 共八个
$("div span");
拿到所有div下面的span 共八个,然后拿到每一个span下面的第一个子元素 共0个因为span下面没有子元素(文本元素不算)
$("div span :first-child")
拿到所有div下面的span 共八个,然后再进行筛选得到每个div下面的第一个span 共四个
$("div span:first-child")
注意:通过上面现象【重视选择器中的空格】的作用
:last-child
可以匹配多个：选取当前元素的最后一个子元素
$("div span:last-child")
:only-child
如果某个元素是它父元素中唯一的子元素，将被匹配。
选择button标签元素,但是他必须是div中的唯一元素
$("div button:only-child")
:first-of-type
选择当前元素中同一类型的第一个元素。
如果有多个类型那么就选出每个类型的第一个元素
:last-of-type
选择当前元素中同一类型的最后一个元素
如果有多个类型那么就选出每个类型的最后一个元素
例如:
<div id="myDiv">
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<span id="span1"></span>
<span id="span2"></span>
<span id="span3"></span>
</div>
拿到myDiv下面的所有span,再筛选拿到第一个span
$("#myDiv span:first-of-type")
拿到myDiv下面的所有span,再筛选拿到最后一个span
$("#myDiv span:last-of-type")
拿到myDiv下面的所有子元素,然后筛选出每种子元素的第一个
得到test1元素和span1元素
$("#myDiv :first-of-type");
拿到myDiv下面的所有子元素,然后筛选出每种子元素的最后一个
得到test3元素和span3元素
$("#myDiv :last-of-type");
4，表单选择器：主要是对选择的表单元素进行过滤。
:enabled
选取所有可用元素
该选择器仅可用于选择支持disabled属性（attribute）的HTML元素
(<button>, <input>, <optgroup>, <option>, <select>, 和 <textarea>)。
$("input:enabled")
:disabled
选取所有不可用的元素
该选择器也是仅可用于支持disabled属性的HTML元素
$("input:disabled")
:checked
选取所有被选中的元素
用于复选框和单选框(下拉框)
$( "input:checked" ).length;
:selected
选取所有被选中的选项元素
该选择器只适用于<option>元素
$("select option:selected")
:input
选取所有的<input><textarea><select><button>元素
$(":input")选择可以让用户输入的标签元素
$("input")选择名字为input的标签元素
:text
选取所有的单行文本框（<input type="text">）
$('input:text')
:password 选取所有的密码框
:radio 选取所有的单选框
:checkbox 选取所有的多选框
:submit 选取所有的提交按钮
:image 图像
:reset 重置按钮
:button 所有按钮
:file 所有上传域
例如:
拿到页面中第一个form表单中的密码输入框
$("form:first input:password");
拿到页面中第一个form表单中的密码输入框中的第二个
$("form:first input:password:eq(1)")
阅读全文
0 0
- javascript的封装jQuery
- javascript (function(){})() 自定义封装jquery
- JavaScript封装的平滑图片滚动，绝不用jQuery
- javascript(jquery)实现前台html简单的分页封装
- jQuery 的封装方法
- jquery的代码封装
- 基于jQuery的封装
- 封装jquery的$方法
- 封装jQuery的ajax
- 封装自己的jquery
- [JavaScript][AJAX][JQuery]利用回调接口封装AJAX类|原生JavaScript的AJAX写法优化
- JavaScript封装的HashMap
- javaScript-类的封装
- Javascript的封装库
- JavaScript的封装
- JavaScript Ajax封装 类似jQuery Ajax
- 传统的JavaScript实现的Ajax 与 JQuery封装的Ajax
- 什么是javascript封装，封装的方法有几种
- 122. Best Time to Buy and Sell Stock II
- JSP(7)—EL和JSTL
- C
- C#语言笔记-1
- android MVVM开发框架——（4）DataBinding绑定view自定义属性
- javascript的封装jQuery
- 数据结构专题——线性表之单链表及其Java实现
- Freertos消息队列接收源码xQueueGenericReceive分析
- 作业2
- Linux rar unrar的安装
- css经典布局一
- 音视频基础知识之PCM数据
- HashMap的实现原理
- Leetcode:258.Add Digits 加数字，直到为个位数
