Jquery
基本的选择器：
1.$("element")这是选择element的元素，当然你可以选择这些元素做相应的动作：
例如：$("p").mouseover(function(){
$(this).css("background","blue");
});
作用就是去选择p的标签，然后注册一个鼠标移动的函数，这样$(this)代表当前的选中的元素，会调用css样式表改变！
几个常用的注册函数：
|
$(document).ready(function) |
将函数绑定到文档的就绪事件（当文档完成加载时） |
|
$(selector).click(function) |
触发或将函数绑定到被选元素的点击事件 |
|
$(selector).dblclick(function) |
触发或将函数绑定到被选元素的双击事件 |
|
$(selector).focus(function) |
触发或将函数绑定到被选元素的获得焦点事件 |
|
$(selector).mouseover(function) |
触发或将函数绑定到被选元素的鼠标悬停事件 |
注意的是
1 $(document).ready()方法会在页面加载的时候注册函数，相当于window.onload函数
2 hide(speed,callback)隐藏当前的元素
show(speed,callback))显示当前的元素
|
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫 |
|
秒。 |
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
代替的东西
$(selector).toggle(speed,callback);显示被隐藏的元素，并隐藏已显示的元素：
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
淡入淡出的效果:
通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：
- fadeIn(speed,callback)用于设定元素的淡入（对于隐藏的元素）
- fadeOut(speed,callback)用于设定元素的淡出（对于非隐藏的元素）
- fadeTogglespeed,callback()以上两者的互换
- fadeTo()
Jquery‘的连接函数技术：
不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。
提示：这样的话，浏览器就不必多次查找相同的元素。如需链接一个动作，您只需简单地把该动作追加到之前的动作上。
操作DOM：
1三个简单实用的用于 DOM 操作的 jQuery 方法：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
2下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容：
实例
$("#btn1").click(function(){
$("#test1").text("Hello
world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
**我们将学习用于添加新内容的四个 jQuery 方法：
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
**如需删除元素和内容，一般可使用以下两个 jQuery 方法：
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素
2选择器：
jQuery 选择器
|
选择器 |
实例 |
选取 |
|
$("*") |
所有元素 | |
|
$("#lastname") |
id="lastname" 的元素 | |
|
$(".intro") |
所有 class="intro" 的元素 | |
|
$("p") |
所有 <p> 元素 | |
|
.class.class |
$(".intro.demo") |
所有 class="intro" 且 class="demo" 的元素 |
|
$("p:first") |
第一个 <p> 元素 | |
|
$("p:last") |
最后一个 <p> 元素 | |
|
$("tr:even") |
所有偶数 <tr> 元素 | |
|
$("tr:odd") |
所有奇数 <tr> 元素 | |
|
$("ul li:eq(3)") |
列表中的第四个元素（index 从0 开始） | |
|
$("ul li:gt(3)") |
列出 index 大于3 的元素 | |
|
$("ul li:lt(3)") |
列出 index 小于3 的元素 | |
|
:not(selector) |
$("input:not(:empty)") |
所有不为空的 input 元素 |
|
$(":header") |
所有标题元素 <h1> - <h6> | |
|
|
所有动画元素 | |
|
$(":contains(‘W3School‘)") |
包含指定字符串的所有元素 | |
|
$(":empty") |
无子（元素）节点的所有元素 | |
|
:hidden |
$("p:hidden") |
所有隐藏的 <p> 元素 |
|
$("table:visible") |
所有可见的表格 | |
|
s1,s2,s3 |
$("th,td,.intro") |
所有带有匹配选择的元素 |
|
$("[href]") |
所有带有 href 属性的元素 | |
|
$("[href=‘#‘]") |
所有 href 属性的值等于 "#" 的元素 | |
|
$("[href!=‘#‘]") |
所有 href 属性的值不等于 "#" 的元素 | |
|
$("[href$=‘.jpg‘]") |
所有 href 属性的值包含以 ".jpg" 结尾的元素 | |
|
$(":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 元素 |
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
