javaWeb学习笔记 --- jQuery
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"/> <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() {
/* ---------层级选择器练习--------- */
//改变 内所有 的背景色为 #F08080", id="b1"
$("#b1").click(function(){
$("body div").css("background-color","#F08080");
});
//改变 内子 的背景色为 #FF0033"，id="b2"
$("#b2").click(function(){
$("body > div").css("background-color","#FF0033");
});
//改变 id 为 one 的下一个 的背景色为 #0000FF" id="b3"
$("#b3").click(function(){
$("#one + div").css("background-color","#0000FF");
});
//改变 id 为 two 的元素后面的所有兄弟的元素的背景色为 #9ACD32"，字体颜色为蓝色 id="b4"
$("#b4").click(function(){
$("#two ~ div").css({"background-color":"#9ACD32",
"color":"blue"});
});
//改变 id 为 two 的元素所有 兄弟元素(包括前面的和后面的)的背景色为 #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元素
如: xxxabcxx
-
$("div:has(p)") – 匹配所有包含p元素的div元素
如:
-
$("div:empty") – 匹配所有内容为空的div元素
如:
-
$("div:parent") – 匹配所有内容不为空的div元素
如: xxxxx
可见选择器
-
$("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子元素
-
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}
}