大数据WEB阶段（五）jQuery

jQuery

一、概述

什么是jQuery？
1. jQuery是一个写的更少，但做的更多的轻量级的 javaScript函数库。
jQuery的优势？
1. 可以简化JavaScript代码
2. 可以向css那样获取元素
3. 可以修改css来控制页面效果
4. 可以兼容常用的浏览器。
jQuery版本支持
1. jQuery分为很多版本, 还分为未压缩版和压缩版, 根据需要选择对应的版本进行下载!
2. 1.x 支持常用的浏览器和IE6+
3. 2.x 支持常用的浏览器和IE9+
4. 3.x 支持常用的浏览器和IE9+
5. 注意: jQuery不兼容老版本. 因为jQuery升级除了会做一些内部优化之外, 还会删除以前的一些代码, 比如删除一些方法. 或者是添加一些新的方法。所以在升级之后，以前的代码可能会无法执行。
jQuery引入
1. jQueyr类库其实就是一个普通的js文件, 和之前在html中引入js文件方式是一样的！！！
```
<script src="jquery-1.4.2.js"></script>
```

二、jQuery语法

“$”介绍
1. $符号等价于jQuery, 是jQuery单词的简写
2. 例如：()相当于调用jQuery()，该函数会返回一个jQuery对象,这个jQuery对象中包含零个或多个html元素,比如:()相当于调用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()
1. $(“#d1”).parent() – 获取id为d1的父元素
parents()
1. $(“#d1”).parents() – 获取id为d1的祖先元素
2. $(“#d1”).parent(“tr”) – 获取id为d1的祖先tr元素
next()
1. $(“#d1”).next() – 获取id为d1的后面紧邻的兄弟元素
2. $(“#d1”).next(“span”) – 获取id为d1的后面紧邻的兄弟span元素
nextAll()
1. $(“#d1”).nextAll() – 获取id为d1的后面所有的兄弟元素
2. $(“#d1”).nextAll(“span”) – 获取id为d1的后面所有的兄弟span元素
prev()
1. $(“div”).prev() – 获取所匹配元素前面紧邻的兄弟元素
2. $(“div”).prev(“span”) – 获取所匹配元素前面紧邻的span兄弟元素
prevAll()
1. $(“div”).prevAll() – 获取所匹配元素前面所有的兄弟元素
2. $(“div”).prevAll(“span”) – 获取所匹配元素前面所有的span兄弟元素
siblings()
1. $(“div”).siblings() – 获取所匹配元素前后所有的兄弟元素
2. $(“div”).siblings(“span”) – 获取所匹配元素前后所有的span兄弟元素
append()
1. $(“div”).append(““) –为所匹配元素追加一个span子元素
remove()
1. $(“div”).remove() – 删除所匹配元素
html()
1. $(“div”).html() – 获取所匹配元素的html内容
2. $(“div”).html(“xxx”) – 为所匹配元素设置html内容
text()
1. $(“div”).text() – 获取所匹配元素的文本内容
2. $(“div”).text(“xxx”) – 为所匹配元素设置文本内容
attr()
1. $(“div”).attr(“id”) – 获取所匹配元素的id属性值
2. $(“div”).attr(“id”, “xx”) – 为所匹配元素设置id属性
css
1. $(“div”).css(“width”) – 获取所匹配元素的width样式属性值
2. $(“div”).css(“width”, “200px”) – 为所匹配元素设置width样式属性
3. $(“div”).css({“width”:”200px”, “color”:”red”,”font-size”:”24px” }) ; – 为所匹配元素设置width样式属性

五、事件

click()
1. $(“div”).click(function(){}) – 为所匹配元素绑定点击事件
blur()
1. $(“input”).blur(function(){}) – 为所匹配元素绑定失去输入焦点事件
focus()
1. $(“input”).focus(function(){}) – 为所匹配元素绑定获得输入焦点事件
change()
1. $(“select”).change(function(){}) – 为所匹配元素绑定选项切换事件
ready()
1. (document).ready(function())–文档就绪事件其作用相当于:window.onload=function()简写形式为:(document).ready(function(){}) – 文档就绪事件其作用相当于: window.onload = function(){} 简写形式为: (function(){}) – 在整个文档加载完成后立即执行

六、效果

show()
1. $(“div”).show() – 将隐藏元素设置为显示(底层操作的是display);
hide()
1. $(“div”).show() – 将显示元素设置为隐藏(底层操作的是display);
toggle()
1. $(“div”).toggle() – 切换元素的可见状态, 如果元素显示则设置为隐藏, 如果元素隐藏则设置为可见.

七、JSON

json是什么?
json是JavaScript提供的一种数据交换(存储)格式

创建JS对象:var person = {"name":"张飞","age": 18,"gender": "男"}

json语法

{}括起来的就是一个对象
json的属性名只能用双引号引起来, 不能用单引号!

json的属性值:

数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在方括号中）
对象（在花括号中）
null

json和xml比较
1. 可读性: xml比json具有更好的可读性
2. 解析度: xml解析麻烦, 而json是js提供的对象, 可以非常方便的进行解析
3. 流行度: 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" : "男"}]}

大数据WEB阶段（五）jQuery相关推荐

大数据WEB阶段 TransientDateAccessResourceException
大数据WEB阶段 TransientDateAccessResourceException 一 . 分析如果数据库保存的字段有时间 , 但是没有给该字段赋值时 ,则该字段默认是0000-00-00 ...
大数据WEB阶段（九）Servlet+Request
Servlet与Request 一.概述 Servlet 是sun公司提供的一门用于开发动态web资源的技术按照这套规范写出来的servlet可以放置在web应用中在servlet容器中运行 . 开 ...
大数据WEB阶段（六）MySql详解（一）
MySql(二) 一.概述什么是数据库数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,简而言之就是存储数据的仓库. 数据库的分类层次式数据库.网络式数据库.关系型数据库数 ...
大数据WEB阶段（十五）JavaEE三大核心技术之过滤器
Filter过滤器一.Filter 过滤器概述 Filter是JavaEE三大核心技术(Servlet . Filter . Listener)之一 FIlter作用是拦截对资源的访问 , 拦截下来 ...
大数据WEB阶段总结
一.概述 HTTP协议 web容器 - Tomcat 静态web资源 - 本质上是文件 html css js 图片音频视频 flash- 动态web资源 - 本质上是程序 Servelt JSP ...
大数据WEB阶段Maven安装配置与使用
Maven 零.目录 Maven简介 Maven 的安装与配置创建Maven工程创建maven-web工程搭建私服使用本地资源库阿里私服 maven命令上传本地工程到私服中 maven-w ...
大数据WEB阶段（十）Response、ServletConfig、ServletContext、资源跳转三种方式
Response.ServletConfig.ServletContext.资源跳转三种方式 - (一)Response 一.Response概述在doGet和doPost方法的参数中,HttpSe ...
大数据WEB阶段Mybatis（二）
Mybatis(二) 零.目录 Mybatis接口形式 Mybatis整合Spring Mybatis的缓存机制手动封装结果集一对一表操作一对多表操作多对多表操作 SpringMVC . Sp ...
大数据WEB阶段（十八）数据库事务
数据库事务一.概述事务的概念事务是指逻辑上的一组操作 , 组成这组操作的各个单元 , 要么全部成功 , 要么全部失败 . 如:银行转账.. 转账核心操作其实就是两条sql ,两条都执行成功才算成 ...