jQuery
javascript 和 Query，即是辅助Javascript开发的库。
特点：
1.jQuery是一个快速的简介的JavaScript框架，可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程。
1>.提供了强大的功能函数
2>.解决浏览器兼容性问题
3>.纠正错误的脚本知识
4>.体积小、使用灵活（只需引入一个js文件）
5>.易扩展、插件丰富
作用：
简化JavaScript和Ajax编程，能够使程序员从设计和书写繁杂的JS应用中解脱出来。将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。方便地选择页面元素(模仿CSS选择器更精确、灵活)动态更改页面样式/页面内容(操作DOM，动态添加、移除样式)控制响应事件(动态添加响应事件)提供基本网页特效(提供已封装的网页特效方法)快速实现通信(ajax)。
用户体验的角度：改善了页面视觉效果，增强了与页面的交互性，体验更绚丽的网页物资。
基本语法：
$(function(){}) ;是$(document).ready(function(){});的简写.
$(document).ready(function(){})和window.onload 的区别
ready表示文档已加载完成（不包含图片等非文字媒体文件）
onload是指页面包含图片在内的所有元素都加载完成
$(document).ready(function(){})要比window.onload先执行
jQuery包装集:
在jQuery的世界中将所有的对象，无论是一个还是一组，都封装成一个jQuery包装集，即集合。也就是说，$()的返回结果都是集合，不是单个对象。
例如：var jQueryObject = $(“#testDiv");
虽然，通过id获得的是一个元素对象，但是依然以集合的方式返回，只不过，集合中只有一个元素而已。
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法是：$(selector).action()
美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
示例
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
$(this)和this的区别
当你用的是jquery时，就用$(this)，如果是JS，就用this
JS里的元素只要包上$()就是jquery对象了，而jquery的对象只要加上[0]或者.get(0)，就是js元素了。
$(this)是jquery对象，this就是简单指当前元素。jquery对象不能直接指定元素的属性（ele.style），需要get（index）或者直接（index）取得对象中元素才行
JQuery中的 $() 这个符号，实际上这个符号在JQuery中相当于JQuery（），即$(this)=jquery(this);也就是说，这样可以返回一个jquery对象。那么，当你在网页中alert($('#id'));时，会弹出一个[object Object ]，这个object对象，也就是jquery对象了
jQuery包装集与DOM 对象的互转
jQuery包装集转DOM对象
jQuery包装集是一个集合，所以我们可以通过索引器访问其中的某一个元素
//testDiv是页面某元素的id
var domObject = $(“#testDiv”)[0];
DOM对象转jQuery包装集
//testDiv是页面某元素的id
var div = document.getElementById("testDiv");
var domToJQueryObject = $(div);
.get(index)：获取包装集里的一个或所有匹配的元素。如果不指定参数，包装集里的所有元素就以javascript数组的形式返回；如果指定的下表参数，就返回下表所对应的元素。
JQuery获取内容和属性
jQuery DOM 操作
jQuery 中非常重要的部分，就是操作 DOM 的能力。
jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
});
</script>
</head>
<body>
<p id="test">这是段落中的<b>粗体</b>文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
</body>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Value: " + $("#test").val());
});
});
</script>
</head>
<body>
<p>姓名：<input type="text" id="test" value="米老鼠"></p>
<button>显示值</button>
</body>
获取属性 - attr()
jQuery attr() 方法用于获取属性值。
如何获得链接中 href 属性的值
$("button").click(function(){
alert($("#test").attr("href"));
});JQuery的选择器
基本选择器
* :选择所有元素。
例:$(“*")选择页面所有元素
#id:根据元素id选择。
例:$("#divId") 选择id为divId的元素
.class:根据元素的css类选择。
例:$(".bgRed")选择所用CSS类为bgRed的元素
element:根据元素的名称选择。
例:$("a") 选择所有<a>元素
select1,select2,selectN:组选择器，同时选中几个选择器。
例：$("#divId, a, .bgRed")
设置值：$("#one").css("backgroundColor","red");
层次选择器
包含选择器： ancestor descendant:在给定的祖先元素下匹配所有的后代元素
例：$(“form input”) 选择表单中所有input元素
子选择器： parent > child:选择parent的直接子节点child
例：$(“.myList>li”) 选择CSS类为myList元素中的直接子节点<li>对象。
相邻选择器： prev + next:选择prev元素后面的next元素,即相邻元素
例：$(“label + input”) 选择所有跟在label后面的input元素
兄弟选择器： prev～siblings:选择prev后面的根据siblings过滤的元素，即同辈元素。
例：$(“form～input”)选择所有与表单同辈的input元素
//包含选择器 form里的所有form元素
$("form input").css({"background":"red","height":"200px"});
//子选择器 .mylist直接子元素
$(".mylist>li").css("background","green");
//相邻选择器 选择所有跟在.mylist2后面的input元素
$(".mylist2+input").css("background","blue");
//兄弟选择器 和form同级别的input元素
$("form~input").css("backgroundColor","yellow");
$("#one div").css("backgroundColor","red");
$("#one>div").css("backgroundColor","blue");内容选择器
:contains(text) :匹配包含给定文本的元素
例：$(“div:contains(‘John’)”)查找所有包含 “John” 的div元素
:empty:匹配所有不包含子元素或者文本的空元素
例：$("td:empty")
:has(selector):匹配含有选择器所匹配的元素的元素
例：$("div:has(p)").addClass("test");给所有包含p元素的div元素添加一个test类
可见性选择器
:hidden:匹配所有的不可见元素
例：<table> <tr style="display:none"><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table>
$(“tr:hidden”)结果为：
<tr style="display:none"><td>Value 1</td></tr>
:visible:匹配所有的可见元素
例：$("tr:visible")结果为：
<tr><td>Value 2</td></tr>
$(function(){
alert($("tr:hidden")[0]);
$("tr:visible").css("backgroundColor","red");
});
<table>
<tr style="display:none"><td>我是隐身的</td></tr>
<tr><td>我是可见的</td></tr>
<tr><td>我也是可见的</td></tr>
</table>表单选择器
input:匹配所有input,textarea,select和button元素。
例：$(":input")查找所有的input元素
:text:匹配所有的单行文本框。
:password:匹配所有密码框。
:button:匹配所有按钮。
:radio:匹配所有单选按钮。
:checkbox:匹配所有复选框。
:hidden:匹配所有不可见元素，或者type为hidden的元素。
:image:匹配所有图像域。
:submit:匹配所有提交按钮。
:reset:匹配所有重置按钮。
:file:匹配所有文件域。
如果是:#form1:input就表示匹配所有input, textarea, select 和 button 元素
#form1(此处有一个空格):input返回id为form 后所有input, textarea, select 和 button 元素
#form1 input 返回id为form 后所有input
$("div").append()
.css("color", "red")
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
var $alltext=$("#formid :text");
var $allbutton=$("#formid :button");
var $allinput=$("#formid input");//#formid后的所有input
var $input=$("#formid :input");//#formid 后的所有input button ...
$("#resultid").click(function(){
$("#divid").append("有"+$alltext.length+"个text类型")
.append("有"+$allbutton.length+"个button类型")
.append("有"+$allinput.length+"个input类型")
.append("有"+$input.length+"个类型");
});
});
</script>
</head>
<body>
<h1>表单选择器</h1>
<hr/>
<form action="xxxx" id="formid">
<button>Button</button><br/>
<input type="checkbox"/>1
<input type="checkbox"/>2
<input type="checkbox"/>3<br/>
<input type="file"/><br/>
<input type="text"/><br/>
<input type="radio"/>1
<input type="radio"/>2<br/>
<input type="reset" value="重置"/><br/>
<input type="submit" value="提交"/><br/>
<input type="text" /><br/>
<textarea rows="3" cols="11"></textarea><br/>
<input type="button" value="button"/><br/>
<select>
<option>11</option>
<option>22</option>
<option>33</option>
</select>
</form>
<button id="resultid">显示结果</button><br/>
<div id="divid"></div>
</body>常用伪类选择器
伪类选择器：
可以看作是可以看作是一种特殊的类选择符
:first 匹配找到的第1个元素
:last 匹配找到的最后一个元素
:eq 匹配一个给定索引值的元素
:even 匹配所有索引值为偶数的元素
:odd 匹配所有索引值为奇数的元素
:gt(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素
:not 去除所有与给定选择器匹配的元素
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("#one").click(function(){
alert($("td:first")[0].innerHTML);
});
$("#last").click(function(){
alert($("td:last")[0].innerHTML);
});
$("#eq").click(function(){
alert($("td:eq(4)")[0].innerHTML);
});
$("#even").click(function(){
alert($("td:even")[2].innerHTML);
alert($("td:even")[0].innerHTML);
});
$("#odd").click(function(){
alert($("td:odd")[2].innerHTML);
alert($("td:odd")[0].innerHTML);
});
$("#gt").click(function(){
alert($("td:gt(1)")[5].innerHTML);
alert($("td:gt(3)")[1].innerHTML);
});
$("#lt").click(function(){
alert($("td:lt(4)")[3].innerHTML);
alert($("td:lt(5)")[1].innerHTML);
});
$("#not").click(function(){
alert($("td:not(3)")[0].innerHTML);
alert($("td:not(3)")[2].innerHTML);
});
});
</script>
</head>
<body>
<h2>伪类选择器</h2>
<hr/>
<table>
<tr><td>孙悟空</td></tr>
<tr><td>贝吉塔</td></tr>
<tr><td>比鲁斯</td></tr>
<tr><td>天津饭</td></tr>
<tr><td>短笛</td></tr>
<tr><td>弗利萨</td></tr>
<tr><td>吉连</td></tr>
<tr><td>龟仙人</td></tr>
</table>
<button id="one">取第一个</button>
<button id="last">取最后一个</button>
<button id="eq">取给定索引值</button>
<button id="even">取索引值为偶数的值</button>
<button id="odd">取索引值为奇数 的值</button>
<button id="gt">取大于给定索引值的值</button>
<button id="lt">取小于给定索引值的某位置的值</button>
<button id="not">取not3</button>
</body>使用选择器注意事项
class或都id中含有“.”,“#”等特殊字符
在我们的程序中可能会遇到id中还有“.”和“#”等特殊字符，如果按照普通方式处理就会出错，解决方法是用转义符转义。
在下面程序中：
<div id="id.a">aaaaa</div>
<div id="id#b">bbbb</div>
<div id="id[1]">cccc</div>
按照我们习惯的普通方式jQuery选择器获取:
$("#id.a"),$("#id#b") 这样来获取是错误的，根本不能正确的获取
正确的方法如下：对特殊字符，转义一下
jQuery代码：
$("#id\\.a");
$("#id\\#b");
$("#id\\[1\\]");
属性选择器的引号问题
属性选择器中，值的引号是可有可无的，但有些特殊情况却必须有。比如：属性中含有“]”特殊字符。
<div title="name[1]a">aaaa</div>
如果属性值不加引号，jQuery代码：
$("div[title=name[1]a]");
会获取不到。解决方法是加上引号，正确的做法是：
$("div[title='name[1]a']");
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
