大数据正式10
jQuery
- 定义:jQuery是一个“写的更少”,但“做的更多”的轻量级JavaScript函数库
- 优势
- 可以简化JavaScript代码
- 可以像css那样获取元素
- 可以修改css来控制页面效果
- 可以兼容常用的浏览器
- jQuery版本支持
- 未压缩版和压缩版
- 1.x 支持常用的浏览器和IE6+
- 2.x 支持常用的浏览器和IE9+
- 3.x 支持常用的浏览器和IE9+
- 注意:jQuery不兼容老版本,因为jQuery升级除了会做一些内部优化之外,还会删除以前的一些代码,删除和添加一些方法,所有在升级之后,以前的代码可能会无法执行
- 未压缩版和压缩版
- 引入:和之前的js文件的引入是一样的
<script src="js/jquery-1.4.2.js"></script>
jQuery语法
- $
- $等价于jQuery,是jQuery单词的缩写
- $()等价于jQuery(),该函数会返回一个jQuery对象,这个jQuery对象中包含零个或多个HTML元素
- 文档就绪事件
- 在整个html文档加载完之后立即触发,执行一些操作
- 格式
$(document).ready(function(){});
- 相当于window.οnlοad=function(){};
- 简写形式
$(function(){});
- DOM对象和jQuery对象互相转化
- js对象只能调用js上提供的属性和方法,不能调用jQUery提供的属性和方法,如果非要使用,必须将js对象转化为jQuery对象,反之亦然
- dom对象转jQuery对象
var dom=document.getElementById("username"); var $jQuery=$(dom);
- jQuery对象转化为dom对象
var $jQuery=$("#username"); //方式1 var dom1=$jQuery[0]; //方式2 var dom2=$jQuery.get(0);
jQuery选择器
- 基本选择器
- 元素名选择器
$("div")//匹配所有的div元素
- class选择器
$("。div1")//匹配class值为div1的元素
- id选择器
$("#div2")//匹配id值为div2的元素
- *号匹配符
$("*")//获取所有的元素
- 多元素选择器
$("div,span,#h2")//匹配这些元素
- 元素名选择器
- 层级选择器
- 通过DOM元素之间的层次关系来获取特点的元素
1. $("div span")//匹配div下的所有span对象 2. $("div>span")//匹配div下所有的span子元素 3. $("div+span")//匹配div后面紧邻的span对象 4. $("div~span")//匹配div后面所有的span兄弟元素
- 通过DOM元素之间的层次关系来获取特点的元素
- 基本过滤选择器
- 过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,以:开头
1. $("div:first")//匹配所有div中的第一个div元素 2. $("div:last")//匹配所有div中的最后一个div元素 3. $("div:even")//匹配所有div中的索引值为偶数的div元素,从0开始 4. $("div:odd")//匹配所有div中的的索引值为奇数的div元素,从0开始 5. $("div:eq(n)")//匹配所有div中的索引值为n的div元素,从0开始 6. $("div:lt(n)")//匹配所有div中的索引值小于n的div元素 7. $("div:gt(n)")//匹配所有div中的索引值大于n的div元素 8. $("div:not(.one)")//匹配所有div中的class值不为one的div元素
- 过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,以:开头
- 内容选择器
1. $("div:contians("abs")")//匹配所有div中包含abc内容的div元素 如:<div><xxxabcccc</div> 2. $("div:has(p)")//匹配所有div中包含p元素的div元素 如:<div><p>aasd</p><div> 3. $("div:empty")//匹配所有div内容为空的div元素 如:<div>div> 4. $("div:parent")//匹配所有div内容不为空的div元素 如:<div><xxx</div>
- 可见选择器
1. $("div:hidden")//匹配所有隐藏的div元素 2. $("div:visible")//匹配所有可见的div元素
- 属性选择器
1. $("div[id]")//匹配所有具有id属性的div元素 2. $("div[id='d1']")//匹配所有具有id属性值为d1的div元素 3. $("div[id!='d1']")//匹配所有具有id属性值不为d1的div元素 4. $("div[id^='d1']")//匹配所有具有id属性以d1开头的div元素 5. $("div[id$='d1']")//匹配所有具有id属性以d1结尾的div元素
- 子元素选择器
1. $("div:nth-child(n)")//n从1开始,匹配div中的第n个元素 2. $("div:first-child")//n从1开始,匹配div中的第1个元素 3. $("div:last-child")//n从1开始,匹配div中的最后一个元素
- 表单选择器
1. $(":input")//匹配所有的input文本框,密码框,单选框,复选框,select框,textarea框,button 2. $(":password")//匹配所有的密码框 3. $(":radio")//匹配所有的单选框 4. $(":checkbox")//匹配所有的复选框 5. $(":checked")//匹配所有的选中的单选框/复选框/option 6. $("input:checked")//匹配所有的单选框/复选框 7. $(":selected")//匹配所有的option选项
文件操作
- parent()
$("#d1").parent()//获取id值为d1的父元素
- parents()
$("#d1").parents()//获取id值为d1的祖先元素
$("#d1").parents("tr")//获取id值为d1的tr祖先元素
- next()
$("#d1").next()//获取id值为d1后面的紧邻兄弟元素
$("#d1").next("p")//获取id值为d1后面的紧邻兄弟p元素
- nextAll()
$("#d1").nextAll()//获取id值为d1后面的所有紧邻兄弟元素
$("#d1").nextAll("p")//获取id值为d1后面的所有紧邻兄弟p元素
-
prev()
$("#d1").prev()//获取id值为d1前面的紧邻兄弟元素 # $("#d1").prev("p")//获取id值为d1前面的紧邻兄弟p元素
-
prevAll()
$("#d1").prevAll()//获取id值为d1前面的紧邻兄弟元素
$("#d1").prevAll("p")//获取id值为d1前面的紧邻兄弟p元素
- siblings()
$("#d1").siblings()//获取id值为d1后面所有的元素
$("#d1").siblings("p")//获取id值为d1后面所有的p元素
- append()
$("div").append("<p>hello</p>")//为所有的div后增加一个p标签
- 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属性的值为xx
- css
$("div").css("width")//获取元素的样式 $("div").css("width","200px")//设置元素的样式 $("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").hide();//底层操作的是display
- toggle()
$("div").toggle();//显示与隐藏互换
JSON
- 定义:json是JavaScript提供的一种数据交换(存储)格式
- 格式
var person={ "name":"kungfu", "age",18, "gender":"男" }
var person={ "name":"kungfu", "age",18, "gender":"男", "friends":["gougou","maomao"], "gf",{ "name":"hui" } } var person={ "name":"kungfu", "age",18, "gender":"男" "friends":[ { "name":"wk", "age":12 },{ "name":"pww", "age":23 } ] }
- 语法
- {}括起来的就是一个对象
- json的属性名只能用双引号引起来,不能用单引号
- json的属性值
- 数字(整数或浮点数)
- 字符串(在双引号中)
- 逻辑值(true,false)
- 数组(在方括号中)
- null
- json和xml比较
1. 可读性:xml的可读性比json有更高的可读性 2. 解析度:xml解析比较麻烦,json是js提供的对象,可以很方便的进行解析 3. 流行度:xml虽然发展了很多年,但是由于json易操作,所以在某些场景中json比xml更常用