jQuery
引入jQuery 的js文件
使用选择器定位节点
调用jQuery 处理
jQuery 对象只能调用jQuery的方法
DOM 对象 只能调用DOM的方法
jQuery本质就是DOM数组
可以直接操作这个数组
obj.length 获取数组长度
obj.get(index) 获取数字中的某一个DOM对象
obj[index] 等于obj.get(index)
$(dom对象) ==> jQuery对象
jQuery 对象 前面一般都加上$
$("*") 选取所有元素
$("标签名") 元素选择器
$(".class属性名") 类选择器
$("#id") id 选择器
$("#id,.class属性名") 选择器组
$(this) 选取当前 HTML 元素
$("p.intro") 选取 class 为 intro 的 <p> 元素
$("p:first") 选取第一个 <p> 元素
$("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素
$("[href]") 选取带有 href 属性的元素
$("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even") 选取偶数位置的 <tr> 元素
$("tr:odd") 选取奇数位置的 <tr> 元素
层次选择器
$("select1 select2")
在select1元素下 选中所有满足select2的子孙元素
$("select1 > select2")
子元素
$("select1 + select2")
选中select1元素的，满足select2的下一个弟弟
$("#id2+li")
元素id为id2元素的弟弟
$("select1 ~ select2")
选中 select1元素的 满足select2的所有弟弟
基本过滤选择器
:first 第一个元素
:last 最后一个元素
:not(xx) 把xx排除在外
:even 偶数
:odd 奇数
:eq() 下标等于index
:gt() 大于index
:lt() 小于index
*
$("*")
所有元素
#id
$("#lastname")
id="lastname" 的元素
.class
$(".intro")
所有 class="intro" 的元素
element
$("p")
所有 <p> 元素
.class.class
$(".intro.demo")
所有 class="intro" 且 class="demo" 的元素
:first
$("p:first")
第一个 <p> 元素
:last
$("p:last")
最后一个 <p> 元素
:even
$("tr:even")
所有偶数 <tr> 元素
:odd
$("tr:odd")
所有奇数 <tr> 元素
:eq(index)
$("ul li:eq(3)")
列表中的第四个元素（index 从 0 开始）
:gt(no)
$("ul li:gt(3)")
列出 index 大于 3 的元素
:lt(no)
$("ul li:lt(3)")
列出 index 小于 3 的元素
:not(selector)
$("input:not(:empty)")
所有不为空的 input 元素
:header
$(":header")
所有标题元素 <h1> - <h6>
:animated
所有动画元素
:contains(text)
$(":contains('W3School')")
包含指定字符串的所有元素
:empty
$(":empty")
无子（元素）节点的所有元素
:hidden
$("p:hidden")
所有隐藏的 <p> 元素
:visible
$("table:visible")
所有可见的表格
s1,s2,s3
$("th,td,.intro")
所有带有匹配选择的元素
[attribute]
$("[href]")
所有带有 href 属性的元素
[attribute=value]
$("[href='#']")
所有 href 属性的值等于 "#" 的元素
[attribute!=value]
$("[href!='#']")
所有 href 属性的值不等于 "#" 的元素
[attribute$=value]
$("[href$='.jpg']")
所有 href 属性的值包含以 ".jpg" 结尾的元素
:input
$(":input")
所有 <input> 元素
:text
$(":text")
所有 type="text" 的 <input> 元素
:password
$(":password")
所有 type="password" 的 <input> 元素
:radio
$(":radio")
所有 type="radio" 的 <input> 元素
:checkbox
$(":checkbox")
所有 type="checkbox" 的 <input> 元素
:submit
$(":submit")
所有 type="submit" 的 <input> 元素
:reset
$(":reset")
所有 type="reset" 的 <input> 元素
:button
$(":button")
所有 type="button" 的 <input> 元素
:image
$(":image")
所有 type="image" 的 <input> 元素
:file
$(":file")
所有 type="file" 的 <input> 元素
:enabled
$(":enabled")
所有激活的 input 元素
:disabled
$(":disabled")
所有禁用的 input 元素
:selected
$(":selected")
所有被选取的 input 元素
:checked
$(":checked")
所有被选中的 input 元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> <script type="text/javascript"> function bigger(){ var size = $("p").css("font-size"); size = size.replace("px",""); $("p").css("font-size",++size+"px"); } </script> </head> <body> <input type="button" value="+" onclick="bigger();"/> <p>1</p> <p>22</p> <p>333</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> <script type="text/javascript"> function dayin(){ //选择器选中的是jQuery对象 var $allPElement = $("p"); for(var i=0;i<$allPElement.length;i++){ //从jQuery 对象中获取的值是dom var p = $allPElement[i]; console.log(p.innerHTML); } } </script> </head> <body> <input type="button" value="print" onclick="dayin();"/> <p>1</p> <p>22</p> <p>333</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> <script type="text/javascript"> //this 传递来的是dom对象 $() 转成 jQuery对象 function chg(img){ if($(img).width()==1024){ $(img).width(512).height(450); }else{ $(img).width(1024).height(900); } } </script> </head> <body> <input type="button" value="变大" onclick="big();"/> <div><img src="01.jpg" onclick="chg(this);"></div> </body> </html>
readonly 只读 但是数据有效依然可以提交给服务器
disabled 不可用，数据无效 不能提交给服务器
jQuery 对DOM操作提供了支持
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
jQuery attr() 方法用于获取属性值。
$(function(){
console.log($("p").html());
console.log($("p").html(123));
});
创建一个节点
$("节点内容")
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
remove() - 删除被选元素（及其子元素）
remove(xx) 只删除满足xx的节点
empty() - 从被选元素中删除子元素
$("p").html("") == $("p").empty()
jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
jQuery 尺寸 方法
jQuery 提供多个处理尺寸的重要方法：
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
遍历节点
当通过一个方法获取一个节点 但是还需要对这个节点的亲戚进行操作 就需要用这写方法了
children() 子节点
next() 下一个兄弟
prev() 上一个兄弟
siblings() 所有兄弟
find() 查找满足选择器的所有后代
parent() 父节点
$(function(){ }); == window.onload{ };
jQuery事件定义
$obj.bind(事件类型，事件处理函数)
$obj.bind('click',fn); ===>> $obj.click(fn);
后绑定事件
$(function(){ $(":button:eq(0)").click(function(){ console.log("111"); }); });
取消冒泡：
e.stopPropagation()
获取事件源
e.target
合成事件
hover(mouseenter,mouseleave) 模拟光标悬停事件
toggle 在多个事件响应中切换
模拟操作的语法：
$obj.trigger("focus");
$obj.focus();
方法
描述
bind()
向匹配元素附加一个或更多事件处理器
blur()
触发、或将函数绑定到指定元素的 blur 事件
change()
触发、或将函数绑定到指定元素的 change 事件
click()
触发、或将函数绑定到指定元素的 click 事件
dblclick()
触发、或将函数绑定到指定元素的 double click 事件
delegate()
向匹配元素的当前或未来的子元素附加一个或多个事件处理器
die()
移除所有通过 live() 函数添加的事件处理程序。
error()
触发、或将函数绑定到指定元素的 error 事件
event.isDefaultPrevented()
返回 event 对象上是否调用了 event.preventDefault()。
event.pageX
相对于文档左边缘的鼠标位置
。
event.pageY
相对于文档上边缘的鼠标位置。
event.preventDefault()
阻止事件的默认动作。
event.result
包含由被指定事件触发的事件处理器返回的最后一个值
。
event.target
触发该事件的 DOM 元素。
event.timeStamp
该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
event.type
描述事件的类型
。
event.which
指示按了哪个键或按钮。
focus()
触发、或将函数绑定到指定元素的 focus 事件
keydown()
触发、或将函数绑定到指定元素的 key down 事件
keypress()
触发、或将函数绑定到指定元素的 key press 事件
keyup()
触发、或将函数绑定到指定元素的 key up 事件
live()
为当前或未来的匹配元素添加一个或多个事件处理器
load()
触发、或将函数绑定到指定元素的 load 事件
mousedown()
触发、或将函数绑定到指定元素的 mouse down 事件
mouseenter()
触发、或将函数绑定到指定元素的 mouse enter 事件
mouseleave()
触发、或将函数绑定到指定元素的 mouse leave 事件
mousemove()
触发、或将函数绑定到指定元素的 mouse move 事件
mouseout()
触发、或将函数绑定到指定元素的 mouse out 事件
mouseover()
触发、或将函数绑定到指定元素的 mouse over 事件
mouseup()
触发、或将函数绑定到指定元素的 mouse up 事件
one()
向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
ready()
文档就绪事件（当 HTML 文档就绪可用时）
resize()
触发、或将函数绑定到指定元素的 resize 事件
scroll()
触发、或将函数绑定到指定元素的 scroll 事件
select()
触发、或将函数绑定到指定元素的 select 事件
submit()
触发、或将函数绑定到指定元素的 submit 事件
toggle()
绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。
trigger()
所有匹配元素的指定事件
triggerHandler()
第一个被匹配元素的指定事件
unbind()
从匹配元素移除一个被添加的事件处理器
undelegate()
从匹配元素移除一个被添加的事件处理器，现在或将来
unload()
触发、或将函数绑定到指定元素的 unload 事件
