jQuery描述
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。
jQuery的优点
- 轻量级
- 强大的选择器
- 出色的 DOM 操作的封装
- 可靠的事件处理机制
- 出色的浏览器兼容性
- 链式操作方式
- 可拓展性强
jQuery与Dom
jQuery对象就是使用jQuery()或$()包装了dom对象后的对象。
jQuery对象是jQuery 库中独有的；如果是一个jQuery对象那么它就可以使用jQuery库中的所有方法。需要注意的是：jQuery对象不能使用Dom对象中的任何方法。同样地；Dom对象也不能使用jQuery对象中的任何方法。
jQuery对象只能在引入jQuery 库后才能使用。jQuery对象不能使用Dom对象中的任何方法。
jQuery与Dom的对象互相转换
jQuery对象转为Dom对象
方式一：jQuery是一个数组对象
var $div = $("#divID");
var divElement = $div[0];
方式二：使用jQuery对象自带的get方法
var $div = $("#divID");
var divElement = $div.get(0);
Dom对象转为jQuery对象
var $div = $(divElement);//将dom对象转为jQuery对象
jQuery的基本方法
初始事件
写法一：直写
$(document).ready(function(){
// 在这里写你的代码...
});
写法二：$(document).ready() 的简写
$(function() {
// 你可以在这里继续使用$作为别名...
});
jQuery的基本选择
$(“#elementID”) #表示根据id查找；查找id为elementID的元素；建议的用法。所以一般推荐给标签设置ID。
document.getElementById(“elementID”)但两者之间返回类型不同
$(“.className”) .表示根据class样式名称查找；查找样式名称为className的所有标签
$(“input”) 查找所有input标签
jQuery Ajax
$.ajax({
type: "POST",
url: "testServlet",
data: {"name":"itcast","location":"guangzhou"},
success: function(msg){
alert( "Data Saved: " + msg );
}
});
$.get("testServlet", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
$.post("testServlet", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
$.getJSON("testServlet", { name: "John", time: "2pm" }, function(json){
alert("JSON Data: " + json.users[3].name);
});
$.getScript("test.js", function(){
alert("Script loaded and executed.");
});
$("#divID").load("feeds.jsp", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});
jQuery 选择器
jQuery选择器共有四大类，分别为基本选择器，层次选择器，过滤选择器和表单选择器。
1. 基本选择器
基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标签名来查找 DOM 元素。
选择器 描述 返回
#id 根据给定的ID匹配一个元素 单个元素组成的集合
element 根据给定的元素名匹配所有元素 元素集合
.class 根据给定的类匹配元素 元素集合
* 匹配所有元素 元素集合
selectorN 将每一个选择器匹配到的元素合并后一起返回；可以指定任意多个选择器，并将匹配到的元素合并到一个结果内 元素集合
- 层级选择器
适合于通过DOM元素之间的层次关系来获取特定元素，例如后代元素，子元素，相邻元素和兄弟元素。
选择器 描述 返回
ancestor descendant 后代元素选择器
$(“div span”)选取<div>里的所有的<span>元素
元素集合
parent > child 子元素选择器
$(“div>span”)选取<div>元素下元素名是<span>的子元素
元素集合
prev + next 相邻元素选择器
$(“.one+div”)选取class为one的下一个<div>兄弟元素
元素集合
prev ~ siblings 兄弟元素选择器
$(“#two~div”)选取Id为two的元素后面的所有<div>兄弟元素
元素集合
- 过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号(:)开头。
按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤，表单过滤和表单对象属性过滤选择器共七种选择器。
1. 基本过滤
选择器 描述 返回
:first 选取第一个元素
$('li:first');
单元素
:last 选取最后一个元素
$('li:last');
单元素
:not(selector) 去除所有与给定选择器匹配的元素。
$("input:not(:checked)")；查找所有未选中的 input 元素
元素集合
:even 选取索引号为偶数的元素，索引号从0开始
$("tr:even")
元素集合
:odd 选取索引号为偶数的元素，索引号从0开始
$("tr:odd”)
元素集合
:eq(index) 选取索引号为index的元素，索引号从0开始
$("tr:eq(1)")
单元素
:gt(index) 选取索引号大于index的元素，索引号从0开始
$("tr:gt(1)")
元素集合
:lt(index) 选取索引号小于index的元素，索引号从0开始
$("tr:lt(1)")
元素集合
:header 选取如 h1, h2, h3之类的标题元素$(":header").css("background", "#EEE")
元素集合
:animated 选取所有正在执行动画效果的元素
$("div:animated") 元素集合
2. 内容过滤
选择器 描述 返回
:contains(text) 选取包含给定文本的元素
$("div:contains('John')")
元素集合
:empty 选取所有不包含子元素或者文本的空元素
$("td:empty")
元素集合
:has(selector) 选取含有选择器所匹配的元素的元素
$("div:has(p)").addClass("text");给所有包含 p 元素的 div 元素添加一个 text 样式
元素集合
:parent 选取含有子元素或者文本的元素
$("td:parent")
元素集合
3. 可见性过滤
选择器 描述 返回
:hidden 选取所有不可见元素，或者type为hidden的元素
$("div:hidden")
元素集合
:visible 选取所有的可见元素
$("input:visible")
元素集合
4. 属性过滤
选择器 描述 返回
[attribute] 选取包含给定属性的元素 $("div[id]")
查找所有含有 id 属性的 div 元素
元素集合
[attribute=value] 选取给定的属性是某个特定值的元素 $("input[name='newsletter']") 查找所有 name 属性是 newsletter 的 input 元素
元素集合
[attribute!=value] 选取所有不含有指定的属性，或者属性不等于特定值的元素 $("input[name!='newsletter']") 查找所有 name 属性不是 newsletter 的 input 元素
元素集合
[attribute^=value] 选取给定的属性是以某些值开始的元素
$("input[name^='news']") 查找所有 name 以 'news' 开始的 input 元素
元素集合
[attribute$=value] 选取给定的属性是以某些值结尾的元素
$("input[name$='letter']") 查找所有 name 以 'letter' 结尾的 input 元素
=元素集合
[attribute*=value] 选取给定的属性是以包含某些值的元素
$("input[name*='man']") 查找所有 name 包含 'man' 的 input 元素
元素集合
[attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用
$("input[id][name$='man']") 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的
元素集合
5. 子元素过滤
选择器 描述 返回
:nth-child 选取父元素下的第N个子或奇偶元素（index序号从1开始）
$("ul li:nth-child(2)") 在每个 ul 查找第 2 个li
元素集合
:first-child 选取父元素的第一个子元素
$("ul li:first-child") 在每个 ul 中查找第一个 li
元素集合
:last-child 选取父元素中的最后一个子元素 $("ul li:last-child") 在每个 ul 中查找最后一个 li
元素集合
:only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配；如果父元素中含有其他元素，那将不会被匹配。 $("ul li:only-child") 在 ul 中查找是唯一子元素的 li
元素集合
6. 表单过滤
选择器 描述 返回
:input 匹配所有 input, textarea, select 和 button 元素 $(":input") 查找所有的input元素。
元素集合
:text 匹配所有的单行文本框 $(":text")
元素集合
:password 匹配所有密码框
$(":password")
元素集合
:radio 匹配所有单选按钮
$(":radio")
元素集合
:checkbox 匹配所有复选框
$(":checkbox")
元素集合
:submit 匹配所有提交按钮
$(":submit")
元素集合
:image 匹配所有图像域
$(":image")
元素集合
:reset 匹配所有重置按钮
$(":reset")
元素集合
:button 匹配所有按钮<button></button>，$(":button")
元素集合
:file 匹配所有文件域
$(":file")
元素集合
:hidden 匹配所有不可见元素（display:none），或者type为hidden的元素
$("tr:hidden")
元素集合
7. 表单对象属性过滤
``选择器 描述 返回
:enabled 选取所有可用元素
$("input:enabled")
元素集合
:disabled 选取所有不可用元素
$("input:disabled")
元素集合
:checked 选取所有被选中的元素（单、复选框）
$("input:checked")
元素集合
:selected 选取所有被选中的选项元素（下拉列表
$("select option:selected")查找所有选中的选项元素 元素集合
`
“`
扫一扫
3160
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
