jQuery概念: 一个JavaScript框架。简化JS开发
* 目前jQuery有三个大版本: 1.x:兼容ie678,使用最为广泛的,官方只做BUG维护, 功能不再新增。因此一般项目来说,使用1.x版本就可以了, 最终版本:1.12.4 (2016年5月20日) 2.x:不兼容ie678,很少有人使用,官方只做BUG维护, 功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x, 最终版本:2.2.4 (2016年5月20日) 3.x:不兼容ie678,只支持最新的浏览器。除非特殊要求, 一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。 目前该版本是官方主要更新维护的版本。最新版本:3.2.1(2017年3月20日) * jquery-xxx.js 与 jquery-xxx.min.js区别: 1. jquery-xxx.js:开发版本。给程序员看的,有良好的缩进和注释。体积大一些 2. jquery-xxx.min.js:生产版本。程序中使用,没有缩进。体积小一些。程序加载更快
- 导入JQuery的js文件:导入min.js文件
<div id="div1">div1...</div>
<div id="div2">div2</div>
<script>
//使用jQuery获取元素对象 $对象是jquery的核心元素
var div1 = $("#div1");
alert(div1.html());
var div2=$("#div2");
alert(div2.html());
jQuery和js对象方法不是通用的,但可以相互转换
//1.通过js对象获取名称为div的所有html元素对象
var divs = document.getElementsByTagName("div");
//2.通过jQuery方式获取
var $divs = $("div");
//jQuery-->js
for(var i=0;i<divs.length;i++){
$(divs[i]).html("cccc");
}
//js-->jQuery
$divs[0].innerHTML="ddd";
选择器:
入口函数:
$(function () {
});
事件绑定:$("#id").click(function()){
alert(“abc”);
});
window.onload和 $(function)区别
window.onload 只能定义一次,如果定义多次,后边的会将前边的覆盖掉
$(function)可以定义多次的。
样式控制:
$("#div1").css("backgroundColor","pink");
分类:
-
基本选择器
1. 标签选择器(元素选择器)
* 语法: $(“html标签名”) 获得所有匹配标签名称的元素
2. id选择器
* 语法: $("#id的属性值") 获得与指定id属性值匹配的元素
3. 类选择器
* 语法: $(".class的属性值") 获得与指定的class属性值匹配的元素
4. 并集选择器:
* 语法: $(“选择器1,选择器2…”) 获取多个选择器选中的所有元素
2. 层级选择器
1. 后代选择器
* 语法: $("A B ") 选择A元素内部的所有B元素2. 子选择器 * 语法: $("A > B") 选择A元素内部的所有B子元素 3. 属性选择器 1. 属性名称选择器 * 语法: $("A[属性名]") 包含指定属性的选择器 2. 属性选择器 * 语法: $("A[属性名='值']") 包含指定属性等于指定值的选择器 3. 复合属性选择器 * 语法: $("A[属性名='值'][]...") 包含多个属性条件的选择器 4. 过滤选择器 1. 首元素选择器 * 语法: :first 获得选择的元素中的第一个元素 2. 尾元素选择器 * 语法: :last 获得选择的元素中的最后一个元素 3. 非元素选择器 * 语法: :not(selector) 不包括指定内容的元素 4. 偶数选择器 * 语法: :even 偶数,从 0 开始计数 5. 奇数选择器 * 语法: :odd 奇数,从 0 开始计数 6. 等于索引选择器 * 语法: :eq(index) 指定索引元素 7. 大于索引选择器 * 语法: :gt(index) 大于指定索引元素 8. 小于索引选择器 * 语法: :lt(index) 小于指定索引元素 9. 标题选择器 * 语法: :header 获得标题(h1~h6)元素,固定写法 5. 表单过滤选择器 1. 可用元素选择器 * 语法: :enabled 获得可用元素 2. 不可用元素选择器 * 语法: :disabled 获得不可用元素 3. 选中选择器 * 语法: :checked 获得单选/复选框选中的元素 4. 选中选择器 * 语法: :selected 获得下拉框选中的元素
代码示例:
基本选择器
<script type="text/javascript">
$(function () {
// <input type="button" value="改变 id 为 one 的元素的背景色为 红色" id="b1"/>
$("#b1").click(function () {
$("#one").css("background","pink");
})
// <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色" id="b2"/>
$("#b2").click(function () {
$("div").css("background","red");
})
// <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色" id="b3"/>
$("#b3").click(function () {
$(".mini").css("background","red");
})
// <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色" id="b4"/>
$("#b4").click(function () {
$("span,two").css("background","red");
})
})
属性选择器:
<script type="text/javascript">
$(function () {
// <input type="button" value=" 含有属性title 的div元素背景色为红色" id="b1"/>
$("#b1").click(function () {
$("div[title]").css("backgroundColor","red");
})
// <input type="button" value=" 属性title值等于test的div元素背景色为红色" id="b2"/>
$("#b2").click(function () {
$("div[title='test']").css("background","red");
})
// <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色" id="b3"/>
$("#b3").click(function () {
$("div[title!='test']").css("background","red");
})
// <input type="button" value=" 属性title值 以te开始 的div元素背景色为红色" id="b4"/>
$("#b4").click(function () {
$("div[title^='te']").css("background","red");
})
// <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色" id="b5"/>
$("#b5").click(function () {
$("div[title$='est']").css("background","red");
})
// <input type="button" value="属性title值 含有es的div元素背景色为红色" id="b6"/>
$("#b6").click(function () {
$("div[title*='es']").css("background","red");
})
// <input type="button" value="选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素背景色为红色" id="b7"/>
$("#b7").click(function () {
$("div[id][title*='es']").css("background","red");
})
})
层级选择器:
<script type="text/javascript">
$(function () {
// <input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色" id="b1"/>
$("#b1").click(function () {
$("body div").css("background","red");
})
// <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色" id="b2"/>
$("#b2").click(function () {
$("body > div").css("background","blue");
})
})
过滤选择器:
<script type="text/javascript">
$(function () {
// <input type="button" value=" 改变第一个 div 元素的背景色为 红色" id="b1"/>
$("#b1").click(function () {
$("div:first").css("backgroundColor","red")
})
// <input type="button" value=" 改变最后一个 div 元素的背景色为 红色" id="b2"/>
$("#b2").click(function () {
$("div:last").css("backgroundColor","red")
})
// <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色" id="b3"/>
$("#b3").click(function () {
$("div:not(.one)").css("backgroundColor","red")
})
// <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色" id="b4"/>
$("#b4").click(function () {
$("div:even").css("backgroundColor","red")
}) //从0开始
// <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色" id="b5"/>
$("#b5").click(function () {
$("div:odd").css("backgroundColor","red")
})
// <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色" id="b6"/>
$("#b6").click(function () {
$("div:gt(3)").css("backgroundColor","red")
})
// <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色" id="b7"/>
$("#b7").click(function () {
$("div:eq(3)").css("backgroundColor","red")
})
// <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色" id="b8"/>
$("#b8").click(function () {
$("div:lt(3)").css("backgroundColor","red")
})
// <input type="button" value=" 改变所有的标题元素的背景色为 红色" id="b9"/>
$("#b9").click(function () {
$(":header").css("background","red");
})
})
表单过滤选择器
<script type="text/javascript">
$(function () {
// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/>
$("#b1").click(function () {
$("input[type='text']:enabled").val("aaa");
})
// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/>
$("#b2").click(function () {
$("input[type='text']:disabled").val("aaa");
})
// <input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数" id="b3"/>
$("#b3").click(function () {
alert( $("input[type='checkbox']:checked").length);
})
// <input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数" id="b4"/>
$("#b4").click(function () {
alert($("#job > option:selected").length);
})
})