大数据正式10

大数据正式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.onload=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元素，以:开头

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元素

内容选择器

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更常用

补充