jQuery
jQuery概述
-
什么是jQuery
jQuery 是一个"写的更少,但做的更多"的轻量级 JavaScript 函数库。
-
jQuery的优势
- 可以简化JavaScript代码
- 可以像css那样获取元素
- 可以修改css来控制页面效果
- 可以兼容常用的浏览器
-
jQuery版本支持
- jQuery分为很多版本,还分为未压缩版和压缩版,根据需要选择对应的版本进行下载
- 1.x 支持常用的浏览器和IE6+
- 2.x 支持常用的浏览器和IE9+
- 3.x 支持常用的浏览器和IE9+
- 注意: jQuery不兼容老版本; 因为jQuery升级除了会做一些内部优化之外,还会删除以前的一些代码,比如删除一些方法,或者是添加一些新的方法。所以在升级之后, 以前的代码可能会无法执行
- jQuery分为很多版本,还分为未压缩版和压缩版,根据需要选择对应的版本进行下载
-
jQuery引入
- jQuery类库其实就是一个普通的js文件,和在html中引入js文件方式是一样的
<head> <meta charset="utf-8"/> <!-- 引入jQuery库 --> <script type="text/javascript" src="js/jQuery-1.4.2.js"></script> <script> //在整个html文档加载完之后立即执行 $(function(){ alert(1); }); // 等价于 $(document).ready(function(){ alert(1); }); </script> </head>
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); // js对象转成jQuery对象
jQuery对象转dom对象:
var $jQuery = $("#username"); // 方式一: var dom1 = \$jQuery[0]; // jQuery对象转成js对象 //方式二: var dom2 = \$jQuery.get(0); // jQuery对象转成js对象
示例:
<script> /*通过点击按钮获取用户名的值,分别将jQuery对象转换成js对象和js对象转换为jQuery对象*/ // js对象转为jQuery对象 $(function(){ // 文档就绪事件 // 动态添加click事件 $("#btn").click(function(){ // 获取js对象 var inp = document.getElementById("username"); // 将js对象转化为jQuery对象 var $jq = $(inp); alert($jq.val()); // 将jQuery对象转为js对象 var inp2 = $jq[0] // 或者 var inp3 = $jq.get(0) alert(inp2.value) }) }); </script>
jQuery选择器
基本选择器
-
元素名选择器
$("div")
– 匹配所有的div元素 -
class选择器
$(".c1")
– 匹配所有class值为c1的元素
$("div.c1")
– 匹配所有class值为c1的div元素 -
id选择器
$("#d1")
– 匹配所有id值为d1的元素
$("div#d1")
– 匹配所有id值为d1的div元素 -
*号匹配符
$("*")
– 匹配所有的元素 -
多元素选择器
$("div,span,#d1,.c1")
– 匹配所有的div/span元素以及id值为d1的元素和class值为c1的元素
层级选择器
如果想通过DOM元素之间的层次关系来获取特定元素。例如子元素、兄弟元素等。则需要通过层次选择器。
$("div span")
– 匹配div下所有的span元素$("div>span")
– 匹配div下所有的span子元素$("div+span")
– 匹配div后面紧邻的span兄弟元素$("div~span")
– 匹配div后面所有的span兄弟元素
<script type="text/javascript">
$().ready(function() {
/* ---------层级选择器练习--------- */
//改变 <body> 内所有 <div> 的背景色为 #F08080", id="b1"
$("#b1").click(function(){
$("body div").css("background-color","#F08080");
});
//改变 <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":"#9ACD32",
"color":"blue"});
});
//改变 id 为 two 的元素所有 <div> 兄弟元素(包括前面的和后面的)的背景色为 #FF6347",字体颜色为蓝色 id="b5"
// 水平遍历
// siblings()(所有同层元素) next()(下一个) nextAll()(后面所有的) prev()(前一个) prevAll()(前面所有的)
$("#b5").click(function(){
// 所有
$("#two").siblings("div").css({"background-color":"#FF6347",
"color":"blue"});
});
})
</script>
基本过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的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元素
内容选择器
-
$("div:contains('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元素显示:
$("div:hidden").show();
-
$("div:visible")
– 匹配所有可见的div元素
属性选择器
$("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中最后一个子元素。。。
表单选择器
$(":input")
– 匹配所有的input文本框、密码框、单选框、复选框、select框、textarea、button。$(":password")
– 匹配所有的密码框$(":radio")
– 匹配所有的单选框$(":checkbox")
– 匹配所有的复选框$(":checked")
– 匹配所有的被选中的单选框/复选框/option$("input:checked")
– 匹配所有的被选中的单选框/复选框$(":selected")
– 匹配所有被选中的option选项
<script type="text/javascript">
$(function() {
/* ---------表单选择器练习--------- */
//改变所有:input 元素的背景色为 #F08080" id="b1"
$("#b1").click(function(){
// "input" 选中所有input标签
// ":input" 匹配所有的input文本框、密码框、单选框、复选框、select框、textarea、button
$(":input").css("background-color","#F08080")
});
//弹出 :radio 元素的个数" id="b3"
$("#b3").click(function(){
alert($(":radio").length)
});
//弹出所有 :checked 元素的value值" id="b4"
$("#b4").click(function(){
// each遍历所有选中的元素,并对每个元素执行function()
$(":checked").each(function(){
// js中this表示当前元素,在jquery中用$(this)表示
alert($(this).val())
});
});
})
</script>
文档操作
-
parent()
$("#d1").parent()
– 获取id为d1元素的父元素 -
parents()
$("#d1").parents()
– 获取id为d1元素的祖先元素
$("#d1").parents("tr")
– 获取id为d1元素的tr祖先元素 -
next()
$("div").next()
– 获取所匹配元素后面紧邻的兄弟元素
$("div").next("span")
– 获取所匹配元素后面紧邻的span兄弟元素 -
nextAll()
$("div").nextAll()
– 获取所匹配元素后面所有的兄弟元素
$("div").nextAll("span")
– 获取所匹配元素后面所有的span兄弟元素 -
prev()
$("div").prev()
– 获取所匹配元素前面紧邻的兄弟元素
$("div").prev("span")
– 获取所匹配元素前面紧邻的span兄弟元素 -
prevAll()
$("div").prevAll()
– 获取所匹配元素前面所有的兄弟元素
$("div").prevAll("span")
– 获取所匹配元素前面所有的span兄弟元素 -
siblings()
$("div").siblings()
– 获取所匹配元素前后所有的兄弟元素
$("div").siblings("span")
– 获取所匹配元素前后所有的span兄弟元素 -
find(“span”) – 获取所匹配元素后代中的所有span元素
-
each(function(){}) – 遍历选中元素
-
$(“
abc
”) – 创建一个游离的p元素。 -
append()
$("div").append("<span>内容</span>")
–为所匹配元素追加一个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" })
; – 为所匹配元素设置多个样式属性
事件
-
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":"lili",
"age": 18,
"gender": "女"
}
json语法
{}
括起来的就是一个对象- json的属性名只能用双引号引起来,不能用单引号
- json的属性值:
- 数字(整数或浮点数)
- 字符串(在双引号中)
- 逻辑值(true 或 false)
- 数组(在方括号中)
- 对象(在花括号中)
- null
json和xml比较
- 可读性: xml比json具有更好的可读性
- 解析度: xml解析麻烦, 而json是js提供的对象, 可以非常方便的进行解析
- 流行度: xml虽然发展了很多年,但是由于json易于操作,所以在某些场景中json比xml更常用
7.4.json格式:
格式一:
var p1 = {
"name" : "lili",
"age" : 18,
"gender" : "女"
}
格式二
var p2 = {
"name" : "Sam",
"age" : 22,
"friends" : ["Kim","Potter"]
}
格式三
var p3 = {
"name" : "Sam",
"age" : 22,
"friends" : [{"name":"Kim","age":20},{"name":"Potter","age":22}]
"girlfriend": {"name":"lili","age":20}
}