jQuery基础
1.jQuery概念
jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：
1.HTML 元素选取
2.HTML 元素操作
3.CSS 操作
4.HTML 事件函数
5.JavaScript 特效和动画
6.HTML DOM 遍历和修改
7.A JAX
8.Utilities
提示： 除此之外，jQuery还提供了大量的插件。
目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。
2.jQuery版本
jQuery版本有很多，分为1.x 2.x 3.x
1.x版本：能够兼容IE678浏览器
2.x版本：不兼容IE678浏览器
1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。
3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）
国内多数网站还在使用1.x的版本（本博客内使用的是1.11.1的版本）
jQuery有两个版本：生成环境使用的和开发测试环境使用的。
Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）
3.jQuery使用
jQuery 库是一个 JavaScript 文件，我们可以直接在 HTML页面中通过script 标签引用它，跟引用自己的外部JavaScript脚本文件一样的语法
<head>
<script src="jquery-1.11.1.js"></script>
</head>
4.jQuery语法结构
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作（actions）。
4.1 基础语法：$(selector).action()
说明：美元符号定义 jQuery
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作
4.2 文档就绪事件
文档就绪事件，实际就是文件加载事件。
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM
进行操作。
如果在文档没有完全加载之前就运行函数，操作可能失败。
所以我们尽可能将所有的操作都在文档加载完毕之后实现。
写法1：
$(document).ready(function(){
// 开始写 jQuery 代码...
});
写法2：简介写法-推荐
$(function(){
// 开始写 jQuery 代码...
});
jQuery的ready方法与JavaScript中的onload相似，但是也有区别：
5.jQuery选择器:
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
5.1 元素/标签选择器
jQuery 元素选择器基于元素/标签名选取元素。
语法：$(“标签名称”)
<div>div1</div>
<div>div2</div>
<div>div3</div>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script>
//文档就绪事件：
$(document).ready(function(){
//编写jQuery
});
$(function(){
//1、标签选择器：
//获取所有的div元素（集合）
var divList=$("div");
console.log(divList);//jQuery的对象
console.log(divList.length);
for(var i=0;i<divList.length;i++){
console.log(divList[i]);//js的对象
//将js对象转换为jQuery的对象
console.log($(divList[i]));
}
});
</script>
5.2 #id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下：
$("#p1")
5.3 class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
$(".mydiv")
5.4 全局选择器
匹配所有元素
$("*")
5.5 并集选择器
将每一个选择器匹配到的元素合并后一起返回。
$(“div,ul,li,.mydiv”)
5.6 后代选择器
在给定的祖先元素下匹配所有的后代元素
$(“form input”)
5.7 子选择器
在给定的父元素下匹配所有的子元素
$(“form > input”)
5.8 相邻选择器
匹配所有紧接在 prev 元素后的 next 元素
$(“label + input”)
5.9 同辈选择器
匹配 prev 元素之后的所有 siblings 元素
$(“form ~ input”)
5.10 属性选择器
匹配包含给定属性的元素
$("div[id]");//获取所有有id属性的div的元素集合
$("div[class]");//获取所有有class属性的div的元素集合
$("input[name='userName']");//获取所有input标签中name属性是userName元素的集合
$("input[name^='user']");//获取所有input标签中name属性是user开头的元素的集合
$("input[name$='user']");//获取所有input标签中name属性是user结尾的元素的集合
$("input[name*='user']");//获取所有input标签中name属性包含了user的元素的集合
$("input[id][name^='user']");
5.11 可见性选择器
匹配所有的可见或不可见的元素
$(“div:visible”);
$(“input:hidden”);
5.12 所有选择器的案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>选择器</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script>
//1、标签选择器：
function htmlSelector(){
//获取所有的div元素（集合）
var divList=$("div");
console.log(divList);//jQuery的对象
console.log(divList.length);
for(var i=0;i<divList.length;i++){
console.log(divList[i]);//js的对象
//将js对象转换为jQuery的对象
console.log($(divList[i]));
}
} /
/2、id选择器
function idSelector(){
//根据id获取到的元素是惟一的，即使页面上有重名的id，获取的是第一个
var p=$("#p1");
console.log(p.html());
} /
/3、.class选择器
function classSelector(){
var list=$(".mydiv");
console.log(list.length);
} /
/4、 全局选择器
function allSelector(){
var list=$("*");//包括了html、head、title.....所有标签
console.log(list.length);
for(var i=0;i<list.length;i++){
console.log(list[i]);//js的对象
}
} /
/5、并集选择器
function andSelector(){
var list=$(".mydiv,p,li");
printList(list);
} /
/6、后代选择器:包括所有的后代，儿子和孙子辈都有
function subSelector(){
var list=$("form input");
printList(list);
} /
/7、子选择器：只有子元素
function sunSelector(){
var list=$("form>input");
printList(list);
} /
/8、相邻选择器
function nextSelector(){
var list=$("label + input");
printList(list);
} /
/9、同辈选择器
function sublingsSelector(){
var list=$("form ~ div");
printList(list);
} /
/10、属性选择器
function attrSelector(){
var list=$("div[id]");//获取所有有id属性的div的元素集合
list=$("div[class]");//获取所有有class属性的div的元素集合
list=$("input[name='userName']");//获取所有input标签中name属性是
userName元素的集合
list=$("input[name^='user']");//获取所有input标签中name属性是user开
头的元素的集合
list=$("input[name$='user']");//获取所有input标签中name属性是user结
尾的元素的集合
list=$("input[name*='user']");//获取所有input标签中name属性包含了
user的元素的集合
list=$("input[id][name^='user']");//获取所有input标签中既有id属性又
有name属性以user开头的元素的集合
printList(list);
} /
/11、可见性选择器
function seeSelector(){
//匹配所有的可见div元素
var list=$("div:visible");
//匹配所有的不可见div元素
var list=$("div:hidden");
//匹配所有的不可见input元素,样式有display：none的元素和type=hidden的元
素
list=$("input:hidden");
printList(list);
} /
/文档就绪事件：页面加载完毕之后执行：
$(function(){
seeSelector();
});
//打印集合
function printList(list){
for(var i=0;i<list.length;i++){
console.log(list[i]);
console.log(list[i].innerHTML);//非表单项元素使用该种方式输出
console.log(list[i].value);//只有表单项元素才有value
}
}
</script>
</head>
<body>
<form>
<label>用户名：</label>
<input type="hidden" name="userId" value="1001" />
<input style="display: none;" value="隐藏的input" />
<input id="userName" name="userName" value="jiaobaoyu" /><br />
<label>密码：</label>
<input name="userPass" type="password" value="1234567"/><br />
<fieldset>
电话：<input id="phone" name="phoneuser" value="13712345789"/><br
/>
邮箱：<input name="emailuser" type="email" value="lina@sina.com"
/>
</fieldset>
</form>
地址：<input name="addressuser1" value="北京" /><br />
<ul>
<li>li111111</li>
<li>li111111</li>
<li>li111111</li>
</ul>
<p id="p1">p111111111111</p>
<div id="div1" class="mydiv" style="display: none;" >div1</div>
<div class="mydiv">div2</div>
<div id="div3">div3</div>
</body>
</html>
2534
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
