jQuery
一、概述
- 什么是jQuery？
- jQuery是一个写的更少 ， 但做的更多的轻量级的 javaScript函数库 。
- jQuery的优势？
- 可以简化JavaScript代码
- 可以向css那样获取元素
- 可以修改css来控制页面效果
- 可以兼容常用的浏览器 。
- jQuery版本支持
- jQuery分为很多版本, 还分为未压缩版和压缩版, 根据需要选择对应的版本进行下载!
- 1.x 支持常用的浏览器和IE6+
- 2.x 支持常用的浏览器和IE9+
- 3.x 支持常用的浏览器和IE9+
- 注意: jQuery不兼容老版本. 因为jQuery升级除了会做一些内部优化之外, 还会删除以前的一些代码, 比如删除一些方法. 或者是添加一些新的方法。所以在升级之后， 以前的代码可能会无法执行。
jQuery引入
jQueyr类库其实就是一个普通的js文件, 和之前在html中引入js文件方式是一样的！！！
<script src="jquery-1.4.2.js"></script>
二、jQuery语法
- “$”介绍
- $符号等价于jQuery, 是jQuery单词的简写
- 例如： ()相当于调用jQuery()，该函数会返回一个jQuery对象,这个jQuery对象中包含零个或多个html元素,比如: (“div”)，可以通过jQuery中提供的方法来操作这些匹配的元素，比如$(“div”).remove()；
文档就绪事件
所谓的文档就绪事件, 就是在整个html文档加载完之后立即触发, 执行一些操作，格式如下：
$(document).ready(function(){ //xxxx }); 该函数会在整个html文档加载完之后立即执行! 其作用相当于: window.onload = function(){ //xxx }其简写形式为:
$(function(){ //xxxx });
DOM对象和jQuery对象相互转化
- JS对象只能调用JS上提供的属性和方法, 不能调用jQuery提供的属性和方法, 如果非要使用, 必须将JS对象转化成jQuery对象！反之亦然。
dom对象转jQuery对象：
var dom = document.getElementById("username"); var $jQuery = $(dom); //jQuery对象要以$开头jQuery转dom对象：
var $jQuery = $("#username"); //方式一: var dom1 = $jQuery[0]; // jQuery对象转成js对象 //方式二: var dom2 = $jQuery.get(0); // jQuery对象转成js对象案例：
/*通过点击按钮获取用户名的值，分别将jQuery对象转换成js对象和js对象转换为jQuery对象*/ /* 文档就绪事件 */ $(function(){ //为所有匹配的元素绑定点击事件 $("#btn").click(function(){ //jQuery对象 var $jQuery = $("#username"); //alert($jQuery.val()); //jQuery对象转成js对象: //方式一: var js1 = $jQuery[0]; //alert(js1.value); //方式二: var js2 = $jQuery.get(0); //alert(js2.value); //js对象转成jQuery对象: var oInp = document.getElementById("username"); var $Inp = $(oInp); alert($Inp.val()); }); })
三、选择器
基本选择器
元素名选择器
$("div") -- 匹配所有的div元素class选择器
$(".ca") -- 匹配所有的class值为ca的元素 $("div.ca") -- 匹配所有的class值为ca的div元素id选择器
$("#d1") -- 匹配所有的id为d1的元素*匹配符
$("*") -- 匹配所有的元素多元素选择器
$("div , #d1 , .ca")案例：
//让整个页面加载完成 $(document).ready(function() { /* ---------基本选择器练习--------- */ //改变元素名为 <div> 的所有元素的背景色为 #FF69B4" id="b1" $("#b1").click(function(){ $("div").css("background-color", "#FF69B4"); }); //改变 id 为 one 的元素的背景色为 #9ACD32" id="b2" $("#b2").click(function(){ $("#one").css("background-color", "#9ACD32"); }); //改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b3" $("#b3").click(function(){ $(".mini").css("background-color", "#FF0033"); }); //改变所有元素的背景色为 #FDF5E6" id="b4" $("#b4").click(function(){ $("*").css("background-color", "#FDF5E6"); }); //改变所有的<span>元素和 id 为 two 的元素的背景色为 #FF1493" id="b5" $("#b5").click(function(){ $("span,#two").css("background-color", "#FF1493"); }); //改变所有的<span>元素和 id 为 two 的,id为one的，class为 mini的所有的元素的背景色为 #006400" id="b6" $("#b6").click(function(){ $("span,#two,#one,.mini").css("background-color", "#006400"); }); });
层次选择器
如果想通过DOM元素之间的层次关系来获取特定元素。例如子元素、兄弟元素等。则需要通过层次选择器。
1. $("div span") – 匹配div下所有的span元素 2. $("div>span") – 匹配div下所有的span子元素 3. $("div+span") – 匹配div后面紧邻的span兄弟元素 4. $("div~span") – 匹配div后面所有的span兄弟元素案例
$().ready(function() { /* ---------层级选择器练习--------- */ //改变 <body> 内所有 <div> 的背景色为 #F08080" id="b1" $("#b1").click(function(){ $("body div").css("background-color", "#F08080"); }); /* $("#b1").click(function(){}) 等价于: document.getElementById("b1").onclick = function(){}; */ //改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2" $("#b2").click(function(){ $("body>div").css("background-color", "#FF0033"); }); //改变 id 为 one 的下一个 <div> 的背景色为 #0000FF" id="b3" $("#b3").click(function(){ $("#one+div").css("background-color", "#0000FF"); }); //改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 #9ACD32" id="b4" $("#b4").click(function(){ $("#two~div").css("background-color", "#0000FF"); }); //改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #FF6347" id="b5" $("#b5").click(function(){ $("#two").siblings("div").css("background-color", "#0000FF"); //$("#two").next("div").css("background-color", "#0000FF");//选择id为two元素后面紧邻的div兄弟元素 //$("#two").nextAll("div").css("background-color", "#0000FF");//选择id为two元素后面所有的div兄弟元素 //$("#two").prev("div").css("background-color", "#0000FF");//选择id为two元素前面紧邻的div兄弟元素 //$("#two").prevAll().css("background-color", "#0000FF");//选择id为two元素前面所有的兄弟元素 }); })
基本过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素, 该选择器都以 “:” 开头
$("div:first") – 匹配所有div中的第一个div元素 $("div:last") – 匹配所有div中的最后一个div元素 $("div:even") – 匹配所有div中索引值为偶数的div元素，0开始 $("div:odd") – 匹配所有div中索引值为奇数的div元素，0开始 $("div:eq(n)") – 匹配所有div中索引值为n的div元素，0开始 $("div:lt(n)") – 匹配所有div中索引值小于n的div元素，0开始 $("div:gt(n)") – 匹配所有div中索引值大于n的div元素，0开始 $("div:not(.one)") – 匹配所有class值不为one的div元素案例：
$(function() { /* ---------基本过滤选择器练习--------- */ //改变第一个 div 元素的背景色为 #FF6347" id="b1" $("#b1").click(function(){ $("div:first").css("background-color", "#FF6347"); }); //改变最后一个 div 元素的背景色为 #9ACD32" id="b2" $("#b2").click(function(){ $("div:last").css("background-color", "#FF6347"); }); //改变class不为 one 的所有 div 元素的背景色为 #FF0033" id="b3" $("#b3").click(function(){ $("div:not(.one)").css("background-color", "#FF0033"); }); //改变索引值为等于 3 的 div 元素的背景色为 #006400" id="b4" $("#b4").click(function(){ $("div:eq(3)").css("background-color", "#006400"); }); //改变索引值为小于 3 的 div 元素的背景色为 #FF69B4" id="b5"/> $("#b5").click(function(){ $("div:lt(3)").css("background-color", "#FF69B4"); }); //改变索引值为大于 3 的 div 元素的背景色为 #F08080" id="b6" $("#b6").click(function(){ $("div:gt(3)").css("background-color", "#F08080"); }); //改变索引值为偶数的 div 元素的背景色为 #FF6347" id="b7" $("#b7").click(function(){ $("div:even").css("background-color", "#F08080"); }); //改变索引值为奇数的 div 元素的背景色为 #FF1493" id="b8" $("#b8").click(function(){ $("div:odd").css("background-color", "#FF1493"); }); })
内容选择器
$("div:contians('abc')") – 匹配所有div中包含abc内容的div元素 如: <div>xxxabcxx</div> $("div:has(p)") – 匹配所有包含p元素的div元素 如: <div><p></p></div> $("div:empty") – 匹配所有内容为空的div元素 如: <div></div> $("div:parent") – 匹配所有内容不为空的div元素 如: <div>xxxxx</div>可见选择器
$("div:hidden") -- 匹配所有隐藏的div元素 $("div:visible") -- 匹配所有的可见的元素案例：
$(function() { /* ---------内容选择器--------- */ //改变含有文本 ‘id’ 的 div 元素的背景色为 #FF6347" id="b1" <div>xxidxx</div> $("#b1").click(function(){ $("div:contains('id')").css("background-color", "#FF6347"); }); //改变空元素div(既不包含文本也不包含子元素)的背景色为 #9ACD32" id="b2" $("#b2").click(function(){ $("div:empty").css("background-color", "#9ACD32"); }); //改变包含div子元素的div元素的背景色为 #FF0033" id="b3" $("#b3").click(function(){ $("div:has(div)").css("background-color", "#FF0033"); }); //改变非空div元素的背景色为 #006400" id="b4" $("#b4").click(function(){ $("div:parent").css("background-color", "#006400"); }); //==================================================== /* ---------可见选择器练习--------- */ //改变所有可见 div 元素背景色为 #F08080" id="b5" $("#b5").click(function() { $("div:visible").css("background-color", "#F08080"); }) //让所有隐藏的div元素显示, 并改变背景色为 #FF69B4" id="b6" $("#b6").click(function() { $("div:hidden").css("background-color", "red").show(); }) })
属性选择器
$("div[id]") – 匹配所有具有id属性的div元素 $("div[id='d1']") – 匹配所有具有id属性并且值为d1的div元素 $("div[id!='d1']") – 匹配所有id属性值不为d1的div元素 $("div[id^='d1']") – 匹配所有id属性值以d1开头的div元素 $("div[id$='d1']") – 匹配所有id属性值以d1结尾的div元素子元素选择器
$("div:nth-child(n)") – n从1开始, 匹配div中第n个子元素。 $("div:first-child") –匹配div中第1个子元素。 $("div:last-child") –匹配div中最后一个子元素。。。案例：
$(function() { /* ---------属性选择器练习--------- */ //改变包含id属性的 div 元素的背景色为 #FF6347" id="b1" $("#b1").click(function(){ $("div[id]").css("background-color", "#FF6347"); }); //改变包含属性title='aa' 的div 元素的背景色为 #9ACD32" id="b2" $("#b2").click(function(){ $("div[title='aa']").css("background-color", "#9ACD32"); }); //改变type属性不等于button的input 元素的背景色为 #FF0033" id="b3" $("#b3").click(function(){ $("input[type!='button']").css("background-color", "#9ACD32"); }); //================================================= /* ---------子元素选择器练习--------- */ //改变div 第二个子元素的背景色为 #006400" id="b4" $("#b4").click(function() { $("div:nth-child(2)").css("background-color", "#006400"); }) //改变div 第一个子元素的背景色为 #FF69B4" id="b5" $("#b5").click(function() { //$("div:nth-child(1)").css("background-color", "#FF69B4"); $("div:first-child").css("background-color", "#FF69B4"); //$("div:last-child").css("background-color", "#FF69B4"); }) })
表单选择器
$(":input") – 匹配所有的input文本框、密码框、单选框、复选框、select框、textarea、button。 $(":password") – 匹配所有的密码框 $(":radio") – 匹配所有的单选框 $(":checkbox") – 匹配所有的复选框 $(":checked") – 匹配所有的被选中的单选框/复选框/option $("input:checked") – 匹配所有的被选中的单选框/复选框 $(":selected") – 匹配所有被选中的option选项案例：
$(function() { /* ---------表单选择器练习--------- */ //改变所有:input 元素的背景色为 #F08080" id="b1" $("#b1").click(function() { $(":input").css("background-color", "#F08080"); alert($(":input").length); }); //改变:password 元素的背景色为 #9ACD32" id="b2" $("#b2").click(function() { $(":password").css("background-color", "#9ACD32"); }); //弹出 :radio 元素的个数" id="b3" $("#b3").click(function() { alert($(":radio").length); }); //弹出所有 :checked 元素的value值" id="b4" $("#b4").click(function() { $(":checked").each(function(){ alert($(this).val()); }); }); //弹出所有 :selected 元素的value值" id="b5" $("#b5").click(function() { $(":selected").each(function(){ alert($(this).val()); }); }); })
四、文档操作
- parent()
- $(“#d1”).parent() – 获取id为d1的父元素
- parents()
- $(“#d1”).parents() – 获取id为d1的祖先元素
- $(“#d1”).parent(“tr”) – 获取id为d1的祖先tr元素
- next()
- $(“#d1”).next() – 获取id为d1的后面紧邻的兄弟元素
- $(“#d1”).next(“span”) – 获取id为d1的后面紧邻的兄弟span元素
- nextAll()
- $(“#d1”).nextAll() – 获取id为d1的后面所有的兄弟元素
- $(“#d1”).nextAll(“span”) – 获取id为d1的后面所有的兄弟span元素
prev()
- $(“div”).prev() – 获取所匹配元素前面紧邻的兄弟元素
- $(“div”).prev(“span”) – 获取所匹配元素前面紧邻的span兄弟元素
prevAll()
- $(“div”).prevAll() – 获取所匹配元素前面所有的兄弟元素
- $(“div”).prevAll(“span”) – 获取所匹配元素前面所有的span兄弟元素
siblings()
- $(“div”).siblings() – 获取所匹配元素前后所有的兄弟元素
- $(“div”).siblings(“span”) – 获取所匹配元素前后所有的span兄弟元素
append()
- $(“div”).append(““) –为所匹配元素追加一个span子元素
remove()
- $(“div”).remove() – 删除所匹配元素
html()
- $(“div”).html() – 获取所匹配元素的html内容
- $(“div”).html(“xxx”) – 为所匹配元素设置html内容
text()
- $(“div”).text() – 获取所匹配元素的文本内容
- $(“div”).text(“xxx”) – 为所匹配元素设置文本内容
attr()
- $(“div”).attr(“id”) – 获取所匹配元素的id属性值
- $(“div”).attr(“id”, “xx”) – 为所匹配元素设置id属性
css
- $(“div”).css(“width”) – 获取所匹配元素的width样式属性值
- $(“div”).css(“width”, “200px”) – 为所匹配元素设置width样式属性
- $(“div”).css({“width”:”200px”, “color”:”red”,”font-size”:”24px” }) ; – 为所匹配元素设置width样式属性
五、事件
click()
- $(“div”).click(function(){}) – 为所匹配元素绑定点击事件
blur()
- $(“input”).blur(function(){}) – 为所匹配元素绑定失去输入焦点事件
focus()
- $(“input”).focus(function(){}) – 为所匹配元素绑定获得输入焦点事件
change()
- $(“select”).change(function(){}) – 为所匹配元素绑定选项切换事件
ready()
- (document).ready(function())–文档就绪事件其作用相当于:window.onload=function()简写形式为: (function(){}) – 在整个文档加载完成后立即执行
六、效果
show()
- $(“div”).show() – 将隐藏元素设置为显示(底层操作的是display);
hide()
- $(“div”).show() – 将显示元素设置为隐藏(底层操作的是display);
toggle()
- $(“div”).toggle() – 切换元素的可见状态, 如果元素显示则设置为隐藏, 如果元素隐藏则设置为可见.
七、JSON
json是什么?
json是JavaScript提供的一种数据交换(存储)格式创建JS对象: var person = { "name":"张飞", "age": 18, "gender": "男" }json语法
- {}括起来的就是一个对象
- json的属性名只能用双引号引起来, 不能用单引号!
json的属性值:
数字（整数或浮点数） 字符串（在双引号中） 逻辑值（true 或 false） 数组（在方括号中） 对象（在花括号中） null
json和xml比较
- 可读性: xml比json具有更好的可读性
- 解析度: xml解析麻烦, 而json是js提供的对象, 可以非常方便的进行解析
- 流行度: xml虽然发展了很多年, 但是由于json易于操作, 所以在某些场景中json比xml更常用.
json格式:
格式一: var p1 = { "name" : "兰刚", "age" : 18, "gender" : "男" } 格式二 var p2 = { "name" : "兰刚", "age" : 18, "gender" : "男", "friends" : ["赵栋","靳幸福","朴乾"], "gf" : { "name" : "凤姐", "age" : "17", "gender" : "女" } } 格式三 var p3 = { "name" : "兰刚", "age" : 18, "gender" : "男", "friends" : [ { "name" : "赵栋", "age" : 20, "gender" : "男" },{ "name" : "靳幸福", "age" : 19, "gender" : "男" },{ "name" : "朴乾", "age" : 21, "gender" : "男" } ] }
715
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
