首先要添加jquery库
<script type="text/javascript" src="jquery.js"></script>
选择器:
基本:
$("\*")
: 所有元素$("#lastname")
: id=”lastname” 的元素$(".intro")
: 所有 class=”intro” 的元素$("p")
: 所有<p>
元素$(".intro.demo")
: 所有 class=”intro”且 class=”demo” 的元素$("th,td,.intro")
: 所有带有匹配选择的元素
层级:
$("parent > child")
: 这个子元素组合器(E > F)和(E F)都作为后代组合,但是他们有所不同,更具体的是(E > F)它只会选择第一级的后代。$("ancestor descendant")
: 即(E F)一个元素的后代可能是该元素的一个孩子,孙子,曾孙等。$( "prev + next" )
: 用于筛选紧跟在 “prev” 后面的元素的选择器。其中重要的一点既要考虑下一个相邻兄弟选择器( prev + next )和一般兄弟选择器(prev ~ siblings )所选择到的元素,必须在同一个父元素下。$( "prev ~ siblings" )
: 一个选择器来过滤第一选择器以后的兄弟元素,跟随其的所有同级元素。
基本筛选:
$("p:first")
: 第一个 <p>
元素$("p:last")
: 最后一个 <p>
元素$("tr:even")
: 所有偶数
元素
$("tr:odd")
: 请输入代码)所有奇数 元素
$("ul li:eq(3)")
: 列表中的第四个元素(index 从 0 开始)
$("ul li:gt(3)")
: 列出index大于3的元素
$("ul li:lt(3)")
: 列出index 小于 3 的元素
$("input:not(:empty)")
: 所有不为空的 input 元素
$(":header")
: 所有标题元素
<h1> - <h6>
$(":animated")
: 所有动画元素
内容筛选:
$(":contains('W3School')")
: 包含指定字符串的所有元素$(":empty")无子(元素)
: 节点的所有元素$(":has(selector)")
: 如果表达式 $('div:has(p)')
匹配一个 <div>
,那么应有一个<p>
存在于 <div>
后代元素中的任何地方,不是直接的子元素也可以。
可见性筛选:
$("p:hidden")
: 所有隐藏的<p>
元素$("table:visible")
: 所有可见的表格
属性选择器:
$("[href]")
: 所有带有 href 属性的元素$("[href='#']")
: 所有 href 属性的值等于 “#” 的元素$("[href!='#']")
: 所有 href 属性的值不等于 “#” 的元素$("[href$='.jpg']")
: 所有 href 属性的值包含以 “.jpg” 结尾的元素$("input[name~='man']")
: 查找所有属性中含有 ‘man’ 这个单词的文本框,并且修改其文本值$("input[name$='letter']")
: 查找所有的属性名称以“letter”的结束,并把他们的文字输入$("input[name^='letter']")
: 选择指定属性是以给定字符串(letter)开始的元素$("input[id][name$='man']")
: 查找那些有 id 属性,并且 name 属性以 man 结尾的输入框
表单:
$(":input")
: 所有 <input>
元素$(":text")
: 所有 type=”text” 的 <input>
元素$(":password")
: 所有 type=”password” 的 <input>
元素$(":radio")
: 所有 type=”radio” 的 <input>
元素$(":checkbox")
: 所有 type=”checkbox” 的 <input>
元素$(":submit")
: 所有 type=”submit” 的 <input>
元素$(":reset")
: 所有 type=”reset” 的 <input>
元素$(":button")
: 选择所有按钮元素和 type=”button” 的 <input>
元素$(":image")
: 所有 type=”image” 的 <input>
元素$(":file")
: 所有 type=”file” 的 <input>
元素$(":enabled")
: 所有可用的 <input>
元素(未被禁用的元素)$(":disabled")
: 所有禁用的 <input>
元素$(":selected")
: 所有被选取的 <input>
元素$(":checked")
: 所有被选中的 <input>
元素(被勾选的元素)$(":focus")
: 选择当前获取焦点的元素
事件:
浏览器事件
.resize()
当浏览器window的尺寸改变时,window元素上绑定的resize事件将被触发
当窗口大小改变时(或改变后),查看窗口的宽度:$(window).resize(function() { $('body').prepend('<div>' + $(window).width() + '</div>'); });
scroll()
当用户在元素内执行了滚动操作,就会在这个元素上触发scroll事件。
$(window).scroll(function () { $("span").css("display", "inline").fadeOut("slow"); });
事件绑定
.on()
方法是将事件处理程序绑定到文档(document)的首选方法. .on()方法事件处理程序到当前选定的jQuery
对象中的元素。
在jQuery1.7中,.on()方法 提供绑定事件处理的所有功能。为了帮助从旧的jQuery事件方法转换过来,查
看.bind(), .delegate(), 和 .live().要删除的.on()绑定的事件,请参阅.off()。要绑定一个事件,并
且只运行一次,然后删除自己, 请参阅.one(). (on()
取代bind()
和delegate()
)Example: 通过使用 .stopPropagation(),防止提交事件的冒泡行为,但是并不禁止提交行为。
$("form").on("submit", function(event) { event.stopPropagation(); });
.off()
off()方法移除用.on()绑定的事件处理程序。.bind()
向匹配元素附加一个或更多事件处理器$('#foo').bind('click', function() { alert('User clicked on "foo."');});
.trigger()
trigger()函数用于**在每个匹配元素上触发指定类型的事件。
此外,你还可以在触发事件时为事件处理函数传入额外的参数。
使用该函数可以手动触发执行元素上绑定的事件处理函数,也会触发执行该元素的默认行为。
以表单元素<form>为例,使用trigger("submit")
可以触发该表单绑定的submit事件,也会执行表单
submit事件的默认行为——表单提交操作。
表单事件
.blur()
一个元素失去焦点将触发blur事件。
起初,这个事件仅适用于表单元素,如元素<input>
。在最新的浏览器中,这个事件适用范围已经扩大到
包括所有元素类型。一个元素可以通过键盘命令失去焦点,比如tab键,或用鼠标点击网页上的其他地方。$('#target').blur(function() { alert('Handler for .blur() called.');});
.change()
触发、或将函数绑定到指定元素的 change事件
一个元素的值改变的时候将触发change事件。此事件仅限用于<input>
元素,<textarea>
和<select>
元素。对于下拉选择框,复选框和单选按钮,当用户用鼠标作出选择,该事件立即触发,但对于其他类型
的input元素,该事件触发将推迟,直到元素失去焦点才会触点。$('.target').change(function() { alert('Handler for .change() called.'); });
.click()
触发、或将函数绑定到指定元素的 click 事件.dblclick()
触发、或将函数绑定到指定元素的 double click 事件一个元素被双击时将触发 dblclick事件。任何HTML元素都可以收到此事件。$('#target').dblclick(function() { alert('Handler for .dblclick() called.'); });