JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器。核心理念是write less,do more(写得更少,做得更多)
当前流行的 JavaScript 库有：
jQuery 使用非常多了
EXTJS 功能比jQuery更多，但ext2.0收费
Prototype 一般用于做框架
YUI! (Yahoo! User Interface)
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
jQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器。jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。由美国人John Resig在2006年1月发布。jQuery是免费、开源的。
jQuery分类：
WEB版本：我们主要学习研究 （jQuery-版本.js 、 jQuery-版本-min.js）
UI版本：集成了UI组件
mobile版本：针对移动端开发
qunit版本：用于js测试的
一、jquery
将对原生js常见的方法和对象进行封装，方便使用。
以前通过js获取对象的时候：var obj=document.getElementById("id");
其实可以整合为一个函数，例如：
funtion getId(id){
return document.getElementById("id");
}1.jquery和html的整合
jquery是单独的js文件，通过script标签的src属性导入即可。
例如：<script src="../js/jquery-1.11.0.min.js"></script>
2.获取一个jquery对象
$("选择器")或者jQuery("选择器")
3.dom和jquery的转换
dom对象---->jquery对象
$(dom对象)
//1.获取dom对象
var obj=document.getElementById("username");
//2.转化
var $user=$(obj);jquery对象--->dom对象
方式1：jquery对象[index]，因为jQuery可能是个数组
方式2:：jquery对象.get(index)
//1.获取jquery对象
var $u=$("#username2");
//2.转换
//2.1 方式1
var obj = $u.get(0);
//2.2 方式2
var obj = $u[0];二、页面加载
js：window.οnlοad=function(){}//在一个页面中只能使用一次，最后一个onload的代码内容生效，其他的都不生效。
Jquery：在一个页面中可以使用多次。
方式1：$(function(){...})
方式2：$(document).ready(function(){...})
三、派发事件
$("选择器").click(function(){...});支持链式编程，等价于原生js中：dom对象. onclick =function(){....}
掌握事件：focus、blur、submit、change、click
$(document).ready(function(){
$("#e01").blur(function(){
$("#textMsg").html("文本框失去焦点：blur");
}).focus(function(){
$("#textMsg").html("文本框获得焦点：focus");
}).keydown(function(){
$("#textMsg").append("键盘按下：keydown");
}).keypress(function(event){
$("#textMsg").append("键盘按：keypress");
}).keyup(function(){
$("#textMsg").append("键盘弹起：keyup");
});
});四、jquery滑动等效果
隐藏或展示：show(毫秒数)、 hide(毫秒数)
滑入或滑出
slideDown(毫秒数)：向下滑入，slideToggle
slideUp(毫秒数)：向上滑出
淡入或淡出
fadeIn(int)：淡入，toggle()
fadeOut(int)：淡出
例如：$("#b1Div").toggle(1000);
五、选择器
基本选择器：$("#id值")、$(".class值")、$("标签名")、获取全部选择器：$("*")
获取多个选择器，用逗号隔开：$("#id值,.class值")
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>01-基本选择器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.11.0.min.js"></script>
<script src="../js/assist.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript">
$(function(){
//<input type="button" value="选择 id为 one 的元素." id="btn1"/>
$("#btn1").click(function(){
$("#one").css("background-color","#ff0");
});
//<input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
$("#btn2").click(function(){
$(".mini").css("background-color","#ff0");
});
// <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
$("#btn3").click(function(){
$("div").css("background-color","#ff0");
});
// <input type="button" value="选择 所有的元素." id="btn4"/>
$("#btn4").click(function(){
$("*").css("background-color","#ff0");
});
//<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
$("#btn5").click(function(){
$("span,#two").css("background-color","#ff0");
});
})
</script>
</head>
<body>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
<h3>基本选择器.</h3>
<!-- 控制按钮 -->
<input type="button" value="选择 id为 one 的元素." id="btn1"/>
<input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
<input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
<input type="button" value="选择 所有的元素." id="btn4"/>
<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
<br /><br />
<!-- 测试的元素 -->
<div class="one" id="one" >
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test" >
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
</html>
层次选择器：
a b: a的所有b后代
a>b: a的所有b孩子
a+b: a的下一个兄弟元素
a~b: a的所有兄弟元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>02-层次选择器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.11.0.min.js"></script>
<script src="../js/assist.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript">
$(function(){
// <input type="button" value="选择 body内的所有div元素." id="btn1"/>
$("#btn1").click(function(){
$("body div").css("background-color","#f0f");
});
// <input type="button" value="在body内,选择子元素是div的。" id="btn2"/>
$("#btn2").click(function(){
$("body>div").css("background-color","#f0f");
});
// <input type="button" value="选择 id为one 的下一个div元素." id="btn3"/>
$("#btn3").click(function(){
$("#one+div").css("background-color","#f0f");
});
// <input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>
$("#btn4").click(function(){
$("#two~div").css("background-color","#f0f");
});
})
</script>
</head>
<body>
<h3>层次选择器.</h3>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
<input type="button" value="选择 body内的所有div元素." id="btn1"/>
<input type="button" value="在body内,选择子元素是div的。" id="btn2"/>
<input type="button" value="选择 id为one 的下一个div元素." id="btn3"/>
<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>
<br />
<br />
<!-- 测试的元素 -->
<div class="one" id="one" >
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test" >
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
</html>
基本过滤选择器：
:frist 第一个，例如div:first第一个div
:last 最后一个
:odd 索引奇数
:even 索引偶数
:eq(index) 指定索引
:gt(index) >索引
:lt(index) <索引内容过滤： :has("选择器") 包含指定选择器的元素
$("div:has('.mini')").css("background-color","#0ff");可见过滤：
:hidden 在页面不展示元素，一般指 input type="hidden" 和 样式中display:none
:visible
属性过滤器：
[属性名]，例如$("div[title]").css("background-color","#ff0");选出有title属性的div。
[属性名="值"]，例如$("div[title='test']").css("background-color","#ff0");选出title属性值为test的div。表单过滤：
:input 所有的表单子标签 input/ select /textarea/ button
$("#form1 input").size()，这是层次选择器，匹配到所有的后代input。
$("#form1 :input").size()，这是匹配到所有表单的子input标签，不会匹配到孙子辈的input。六、属性和css操作
对属性的操作:
1.attr()：设置或者获取元素的属性
方式1：获取
attr("属性名称")
方式2：设置一个属性
attr("属性名称","值");
//给username添加title属性
var $username=$("[name='username']");属性选择器
$username.attr("title","姓名");方式3：设置多个属性
attr({
"属性1":"值1",
"属性2":"值2"
})
$username.attr({
"value":"许多多",
"class":"textClass"
}); 2.removeAttr("属性名称"):移除指定属性
$username.removeAttr("class");将jQuery对象的class的样式删除掉3.addClass("指定的样式值")
相当于 attr("class","指定的样式值");
$username.addClass("textClass");//增加一个名为textclass的class4.removeClass("指定的样式值")
$username.removeClass("textClass");将名称为textclass的样式删除注意：若jquery版本>1.6 统一使用 prop操作元素的属性，attr获取不了checked属性。
全选或者全不选案例：
$(".itemSelect").prop("checked",$(this).prop("checked"));将checked属性设置成this的checked状态七、操作元素的style属性
css()：获取或者设置css样式
方式1：获取
css("属性名")
方式2：设置一个属性
css("属性名","值")
方式3：设置多个
css({
"属性1":"值1",
"属性2":"值2"
});
var $div=$("div");
$div.css("border","1px solid red");获取元素的尺寸:
width()、height()
例如：alert($div.width());
八、遍历jQuery对象
方法1：数组.each(function(){});
方法2：$.each(要遍历数组,function(){});
例子：遍历所有隐藏域的value属性值：
$("#b2").click(function(){
$.each($("input:hidden"), function() {
alert($(this).val());
});
});each的function中可以加两个参数index和dom，index是当前遍历的索引值，dom指代的是当前遍历的dom对象(开发中一般使用this即可)。
$("input:hidden").each(function(index,dom){
//alert(this.value)
//alert($(this).val());
//alert(index)//索引
//alert(dom.value)
});九、设置或者获取value属性
jquery对象.val()：获取
jquery对象.val("....")：设置
十、设置或者获取获取标签体内容
html()，text()
xxxxx()：获取标签体的内容
xxxxx(".....")：设置标签体的内容
设置的区别:
html：会把字符串进行解析
text：只做为普通的字符串
获取的区别:
html：获取的html源码，会将” ”里面的代码解析出来
例如：创建一个元素: $("<标签></标签>")
$div.html($("<a href='#'>").html("我"))，我将会是一个链接
text：获取只是页面展示的内容
在jquery中创建元素
$("<标签名>").prop(属性).html(内容)
十一、文档操作
内部插入(a和c为jQuery对象)
a.append(c)：将c插入到a内部(标签体)的后面
a.prepend(c)：将c插入到a的内部的前面
appendTo等价于c.appendTo(a)、prependTo
外部插入
a.after(c)：将c放到a的后面
a.before(c)：将c放到a的前面
a.insertAfter(c)，将a放在c后面
a.insertBefore(c)
删除
empty() 清空对象内部的所有元素
remove() 删除对象
十二、表单对象属性过滤选择器
:enabled 可用的，不设置disabled="disabled"就都是enable
:disabled 不可用
:checked 选中的(针对于单选框和复选框的)
:selected 选中的(针对于下拉选)
例如：$("input:enabled").val("我们来自黑马");
十三、案例
1.左右选中案例
<html>
<head>
<title>左右选中.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript">
$(function(){
//移动一个
$("#toRight1").click(function(){
$("#left>option:selected:first").appendTo($("#right"));
});
//移动多个
$("#toRight2").click(function(){
$("#right").append($("#left option:selected"));
});
//移动全部
$("#toRight3").click(function(){
$("#right").append($("#left option"));
});
})
</script>
<style>
input[type='button']{
width:50px;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<select id="left" multiple="true" style="width:100px" size="10">
<option>環</option>
<option>芈</option>
<option>琅</option>
<option>琊</option>
<option>爨</option>
<option>甄</option>
<option>槑</option>
<option>夔</option>
<option>嬲</option>
<option></option>
</select>
</td>
<td>
<input type="button" value=">" id="toRight1"><br>
<input type="button" value=">>" id="toRight2"><br>
<input type="button" value=">>>" id="toRight3"><br><br>
<input type="button" value="<" id="toLeft1"><br>
<input type="button" value="<<" id="toLeft2"><br>
<input type="button" value="<<<" id="toLeft3">
</td>
<td>
<select id="right" multiple="true" style="width:100px" size="10">
</select>
</td>
</tr>
</table>
</body>
</html>
2.省市联动
$(function(){
$("[name='pro']").change(function(){
//获取市下拉选
var $city=$("[name='city']");
//初始化
$city.html($("<option>").html("-请选择-"));
var pro=$(this).val();
//获取所有的市数组
var cities=$(arr[pro]);
//遍历数组,拼装成option 追加到市下拉选中
cities.each(function(){
$city.append("<option>"+this+"</option>");
});
});
});
1265
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
