javascript涉及到的相关技术点：
dom操作
document.getElementById()
document.getElementsByTagName();
事件操作
dom二级事件操作
主流浏览器
addEventListener()
removeEventListener()
IE浏览器
attachEvent()
detachEvent()
事件对象
① 主流 事件处理函数的第一个形参 divnode.onclick = function(evt){}
② IE 全局变量window.event
事件对象阻止事件流产生
主流 evt.stopPropagation()
IE evt.cancelBubble = true;
事件对象阻止浏览器默认动作
主流 evt.preventDefault()
IE evt.returnValue = false;
ajax使用
创建对象/onreadystatechange/open()/send()
jquery已经对上述等等许多内容做了封装
使用jquery的时候可以明显减少js代码的编写量，浏览器兼容问题也给做了相应的处理
例如使用jquery：
$.get(url,function(msg){}); //触发ajax请求
$('#apple'); //获得元素节点
$('div') //获得元素节点
-------------------------------------------------------------------------------
1. 什么是jquery
其是对javascript封装的一个框架包
简化对javascript的操作
javascript代码：dom获得页面节点对象、ajax操作、事件操作、事件对象
jquery代码：无需考虑浏览器兼容问题、代码非常少
2. 宗旨和特点
宗旨：写得代码很少，实现很多的功能
特点：
① 语法简练、语义易懂、学习快速、丰富文档。
② jQuery 是一个轻量级的脚本，其代码非常小巧
③ jQuery 支持 CSS1~CSS3 定义的属性和选择器
④ jQuery 是跨浏览器的，它支持的浏览器包括 IE 6.0+、FF 1.5+、Safari 2.0+和 Opera 9.0+。
⑤ 能将 JavaScript (行为)脚本与 HTML (结构)源代码完全分离，便于后期编辑和维护。
插件丰富，除了 jQuery 自身带有的一些特效外，可以通过插件实现更多功能
3. 出现的年代
jQuery 是继 Prototype 之后又一个优秀的 JavaScript 框架，由 John Resig 于 2006 年初创建， 目前最新版本为 1.11.3，官方地址为：http://jquery.com/，中文地址为 http://jquery.org.cn/。
jquery版本：
1.0.0 1.0.1 1.0.2 1.1.0 1.1.1 1.1.2 1.2.x 1.2.6 1.3.x 1.4.x 1.5.x 1.6.x 1.7.x
1.8.x 1.9.x 1.10.x 1.11.x
2.x.x (对IE6/7/8支持不好)
4. 其他相关的javascript框架包
Prototype、YUI、Extjs、bindows、JSVM(国内)、mootools、jQuery
Prototype：与面向对象的原型继承关键字prototype一致，该框架的特点是功能扩展比较容易。
YUI: yahoo user interface 雅虎用户接口，该框架可以实现各种页面布局效果。
通过标签切换到对应的内容是YUI实现效果之一
Extjs: 是目前js框架包里边最为时尚、前沿的。通过该框架包可以实现许多非常绚丽的效果。
该框架可以实现效果之一：页面不同区域进行拖拽效果。
该框架由于实现的效果非常“绚丽”、导致其“实用”价值相对略低。
jQuery：javascript+query
使用前期，jquery侧重快速找到页面上各种节点。
后期jquery丰富了事件操作、ajax操作、动画效果、DOM操作等等。
5. 简单使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="./jquery-1.11.3.js"></script>
</head>
<script type="text/javascript">
function f1(){
//document.getElementsByTagName('h2')[0].style.color = "red";
//获得h2元素节点，并设置css样式
//对象.css方法(参数，参数)
$('h2').css('color','blue');
//ajax请求
$.get('./01.jsp',function(msg){
alert(msg);
});
}
</script>
<body>
<h2>开始学习jquery</h2>
<input type="button" value="触发" onclick="f1()" />
</body>
</html>
-------------------------------------------------------------------------
三. 选择器
在页面上获得各种元素节点对象而使用的条件就是选择器。
document.getElementById()
document.getElementsByTagName();
document.getElementsByName();
1. 基本选择器
$(‘#id属性值’) ----------->document.getElementById()
$(‘tag标签名称’)----------->document.getElementsByTagName();
$(‘.class属性值’) class属性值选择器
$(‘*’) 通配符选择器
$(‘s1,s2,s3’)联合选择器
5种基本选择器的使用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="./jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
//① $(#id属性值)
//$('#useremail').css(样式名称，样式值);
$('#useremail').css('color','blue');
//② $(标签名称)
$('h2').css('background-color','pink');
$('input').css('width','500px');//获得多个input框
//③ $(.class属性值)
$('.apple').css('background-color','lightgreen');
//④ $(*) 通配符选择器(获得页面全部节点)
//$('*').css('background-color','gray');
//⑤ $(s1,s2,s3) selector选择器,联合选择器
//把符合s1 或 s2 或 s3条件的节点都给找到
$('h2,#usertel,#userqq').css('background-color','lightblue');
}
</script>
<style type="text/css">
h2{}
input{}
#useremail{}
.apple{}
*{margin:0; padding:0;}
h2,input,#useremail{}
</style>
</head>
<body>
<h2>基本选择器(灵感来之css样式选择器)</h2>
<input type="text" id="username" value="linken" /><br />
<input type="text" id="useremail" value="linken@whitehouce.com" /><br />
<input type="text" class="apple" id="usertel" value="13264547364" /><br />
<input type="text" class="apple" id="userqq" value="2989244" /><br />
<input type="button" value="触发" onclick="f1()" />
</body>
</html>
-------------------------------------------------------------------------------------
2. 层次选择器
2.1 $(s1 s2) [父子]
派生选择器：在s1内部获得全部的s2节点(不考虑层次)
$(“div span”); 在div内部获得span节点
<div>
<span></span>
<p><span></span></p>
</div>
<span></span>
2.2 $(s1 > s2) [父子]
直接子元素选择器: 在s1内部获得子元素节点s2
$(‘div > span’); //在div内部获得子元素span节点
<div>
<span></span>
<p><span></span></p>
<span></span>
</div>
<span></span>
2.3 $(s1 + s2) [兄弟]
直接兄弟选择器：在s1后边获得紧紧挨着的第一个兄弟关系的s2节点
$(‘div + span’) //在div后边获得紧紧挨着的第一个兄弟关系的span节点
<div>
<span></span>
<p><span></span></p>
<span></span>
</div>
<span></span>
<span></span>
<div></div>
<span></span>
2.4 $(s1 ~ s2) [兄弟]
后续全部兄弟关系节点选择器：在s1后边获得全部兄弟关系的s2节点
$(‘div ~ span) //获得div后边全部兄弟关系的span节点
<div>
<span></span>
<p><span></span></p>
<span></span>
</div>
<span></span>
<span></span>
<div></div>
<span></span>
<p></p>
<span></span>
层次选择器的具体使用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="./jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
//① $(s1 s2) 派生选择器（不考虑层次）
$('div span').css('color','blue'); //刘备 阿斗 关羽
//② $(s1 > s2) 直接子元素选择器
$('div > span').css('background-color','lightgreen'); //刘备 关羽
//③ $(s1 + s2) 紧紧挨着的第一个兄弟关系选择器
$('div + span').css('color','yellow'); //吕布 周瑜
//④ $(s1 ~ s2) s1后续全部兄弟关系的s2节点
$('div ~ span').css('background-color','purple'); //吕布 貂蝉 周瑜 孙权
}
</script>
</head>
<body>
<h2>层次选择器</h2>
<div>
<span>刘备</span>
<p><span>阿斗</span></p>
<span>关羽</span>
</div>
<span>吕布</span>
<span>貂蝉</span>
<div>董卓</div>
<span>周瑜</span>
<p>黄盖</p>
<span>孙权</span>
<input type="button" value="触发" onclick="f1()" />
</body>
</html>
------------------------------------------------------------------------------------------
3. 并且(过滤)选择器
3.1 :first
用法: $(”tr:first”) ; 单个元素的组成的集合
匹配找到的第一个元素
3.2 :last
匹配找到的最后一个元素
3.3 :not(selector)
去除所有与给定选择器匹配的元素
3.4 :even
匹配所有索引值为偶数的元素，从 0 开始计数
3.5 :odd
匹配所有索引值为奇数的元素，从 0 开始计数
3.6 :eq(index)
匹配一个给定索引值的元素，从 0 开始计数
3.7 :gt(index)
匹配所有大于给定索引值的元素，从 0 开始计数
3.8 :lt(index)
匹配所有小于给定索引值的元素，从 0 开始计数
3.9 :header
匹配如 h1, h2, h3之类的标题元素
----------------------------------------------------
3.1 基本用法
并且选择器的基本使用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="./jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
//① :first 第一个 :last 最后一个
$('li:first').css('color','blue'); //获得li元素 并且需要是第一个
$('li:last').css('color','green');
//② :eq(下标索引号码) equal等于意思 获得节点的下标索引值 与 给定索引值相等
$('li:eq(3)').css('color','red');
//③ :gt(索引号) great than节点索引值 大于 某个范围
// :lt(索引号) less than节点索引值 小于 某个范围
$('li:gt(5)').css('background-color','pink');
$('li:lt(3)').css('background-color','orange');
//④ :even 匹配到下标索引值为偶数的节点
// :odd 匹配到下标索引值为奇数的节点
$('li:odd').css('background-color','lightblue');
$('li:even').css('background-color','lightgreen');
//⑤ :not(selector选择器) 去除某个节点
$('li:not(#yun)').css('color','blue');
}
</script>
</head>
<body>
<h2>并且选择器</h2>
<ul>
<li>刘备</li>
<li>关羽</li>
<li>张飞</li>
<li id="yun">赵云</li>
<li>孙权</li>
<li>小乔</li>
<li>周瑜</li>
<li>黄盖</li>
<li>大乔</li>
</ul>
<input type="button" value="触发" onclick="f1()" />
</body>
</html>
-------------------------------------------------------------
3.2 复杂用法
注意：
① 并且选择器可以单独使用
② 各种选择器都可以构造“并且”关系
③ 并且关系的选择器可以使用多个，每个选择器使用前，已经获得节点的下标要“归位”(归零)
④ 多个并且关系的选择器，没有前后顺序要求，但是要避免产生“歧义”
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="./jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
//$('h1,h2,h3,h4')
$(':header').css('background-color','yellow');
//获得“标题标签元素”，并且有“class=pear”属性值
//$(':header')
//$('.pear')
$(':header.pear').css('color','red');
//获得 张飞、赵云、孙权
//每个选择器使用前，已经获得节点的下标要“归位”(归零)
$('li:gt(1):lt(3)').css('color','blue');
//多个并且关系的选择器，没有前后顺序要求，但是要避免产生“歧义”
$('li.pear').css('background-color','orange');
}
</script>
</head>
<body>
<h1>并且选择器1</h1>
<h2>并且选择器2</h2>
<h3 class="pear">并且选择器3</h3>
<h4 class="pear">并且选择器4</h4>
<ul>
<li>刘备</li>
<li>关羽</li>
<li>张飞</li>
<li id="yun">赵云</li>
<li>孙权</li>
<li class="pear">小乔</li>
<li class="pear">周瑜</li>
<li>黄盖</li>
<li>大乔</li>
</ul>
<input type="button" value="触发" onclick="f1()" />
</body>
</html>
-------------------------------------------------------------------
4. 内容过滤选择器
4.1 :contains(内容)
包含内容选择器，获得的节点内部必须包含指定的内容
$(‘div:contains(beijing)’)
<div>I like <span>beijing</span></div> //标签不构成影响
<div>xiaoming like shanghai</div>
4.2 :empty
获得空元素(内部没有任何元素/文本(空) )节点对象
$(‘div:empty’)
<div>I like <span>beijing</span></div>
<div> </div>
<div>hello</div>
<div><img /></div>
<div></div>
4.3 :has(选择器)
节点内部必须包含指定选择器对应的元素
$(‘div:has(#apple)’)
<div><p></p></div>
<div><span id=’apple’></span></div>
4.4 :parent
寻找的节点必须作为父元素节点存在
$(‘div:parent’)
<div></div>
<div> </div>
<div><input type=”text”></div>
<div>sun</div>
内容过滤选择器的具体使用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
//①:contains(text)
$('div:contains(beijing)').css('color','red');
//② :empty 空节点
console.log($('div:empty'));//Object[div]
//③ :has(选择器)
$('div:has(p)').css('background-color','pink');
//④ :parent 作为父节点存在的节点
console.log($('div:parent'));//Object[div, div, div, div]
}
</script>
</head>
<body>
<h2>内容过滤选择器</h2>
<div>I like <span>beijing</span></div> <!--标签不构成影响-->
<div>xiaoming like shanghai</div>
<div></div>
<div>sun</div>
<div><p>hello</p></div>
<input type="button" value="触发" onclick="f1()" />
</body>
</html>
--------------------------------------------------------------------------
5. 表单域选中选择器
复选框、单选按钮、下拉列表
$(:checked)复选框、单选按钮 选中选择器
$(:selected) 下拉列表 选中选择器
获得复选框、单选按钮、下拉列表的选中元素节点：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
//:checked 获得被选中的复选框
console.log($('.hby:checked'));
//Object[input.hby 属性(attribute)值 = "2", input.hby 属性(attribute)值 = "3", input.hby 属性(attribute)值 = "4"]
//:checked 获得被选中的单选按钮
console.log($('.sx:checked'));//Object[input.sx 属性(attribute)值 = "c"]
//:selected 获得被选中的下拉列表项目
console.log($('option:selected'));//Object[option]
}
</script>
</head>
<body>
<h2>表单域选中选择器</h2>
爱好：
<input type="checkbox" class="hby" name="hobby[]" value="1">篮球
<input type="checkbox" class="hby" name="hobby[]" value="2">足球
<input type="checkbox" class="hby" name="hobby[]" value="3">排球
<input type="checkbox" class="hby" name="hobby[]" value="4">棒球
<hr /></hr />
性别：
<input type="radio" class="sx" name="sex" value="a">男
<input type="radio" class="sx" name="sex" value="b">女
<input type="radio" class="sx" name="sex" value="c">保密
<hr /></hr />
城市：
<select>
<option value='A'>北京</option>
<option value='B'>天津</option>
<option value='C'>上海</option>
<option value='D'>深圳</option>
</select>
<input type="button" value="触发" onclick="f1()" />
</body>
</html>
---------------------------------------------------------------------
总结：
1. 各种选择器
a) 基本选择器 $(#id) $(.class) $(tag) $(*) $(s1,s2,s3)
b) 层次选择器
$(s1 s2)
$(s1 > s2)
$(s1 + s2)
$(s1 ~ s2)
c) 并且选择器
:first :last
:gt(n) :lt(n) :eq(n)
:even :odd
$(s1s2s3) :[并且]节点要符合s1/s2/s3全部的条件
$(s1,s2,s3):[联合] 节点符合s1、s2、s3其中一个条件即可
d) 内容过滤选择器
:contains(txt)
:empty
:has(selector)
:parent
e) 表单域选中选择器
：checked
：selected
----------------------------------------------------------------------------------
四. 属性操作
<input type=”text” class=”apple” id=”username” name=”username” value=”tom”
address=”beijing” />
itnode.属性名称
itnode.属性名称= 值;
itnode.getAttribute(属性名称);
itnode.setAttribute(属性名称，值);
jquery方式操作属性(attribute)：
$().attr(属性名称); //获得属性信息值
$().attr(属性名称，值); //设置属性的信息
$().removeAttr(属性名称); //删除属性
$().attr(json对象); //同时为多个属性设置信息值，json对象的键值对就是名称和值
$().attr(属性名称，fn); //通过fn函数执行的return返回值对属性进行赋值
属性值的获取和设置操作：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
//获取属性信息(自定义属性 和 w3c规定的属性 都可以获取)
console.log($('input:first').attr('type')); //text
console.log($('input:first').attr('class')); //apple
console.log($('input:first').attr('id')); //username
console.log($('input:first').attr('name')); //username
console.log($('input:first').attr('value')); //tom
console.log($('input:first').attr('address')); //beijing
}
function f2(){
//修改属性(除了type属性，其他属性都可以修改)
$('input:first').attr('class','orange');
$('input:first').attr('id','usertel');
$('input:first').attr('name','usertel');
$('input:first').attr('value','13243635363');
$('input:first').attr('address','shanghai');
//$('input:first').attr('type','checkbox');//禁止修改
//js底层代码在有的浏览器里边可以修改
//document.getElementById('username').type = "checkbox";
}
function f3(){
//删除属性(除了type属性，其他属性都可以删除)
$('input:first').removeAttr('class');
$('input:first').removeAttr('id');
$('input:first').removeAttr('name');
$('input:first').removeAttr('value');
$('input:first').removeAttr('address');
//$('input:first').removeAttr('type');//禁止删除
}
function f4(){
//批量修改多个属性$().attr(json对象);
var jn = {class:'pear',id:'useremail',name:'useremail',value:'jim@163.com',address:'shenzhen'};
$('input:first').attr(jn);
}
function f5(){
//通过函数执行后return的返回值对属性进行修改赋值操作
$('input:first').attr('value',function(){
//xxxxxxxxx
return 12+30;
});
}
</script>
<style type="text/css">
</style>
</head>
<body>
<h2>属性操作</h2>
<input type="text" class="apple" id="username" name="username" value="tom" address="beijing" />
<br /><br />
<input type="button" value="获取" onclick="f1()" />
<input type="button" value="设置" onclick="f2()" />
<input type="button" value="删除属性" onclick="f3()" />
<input type="button" value="批量修改属性" onclick="f4()" />
<input type="button" value="函数修改属性" onclick="f5()" />
</body>
</html>
--------------------------------------------------------------------------------------------
五. 快捷操作
1. class属性值操作
$().attr(‘class’,值);
$().attr(‘class’);
$().removeAttr(‘class属性’); //删除class的属性
class具体快捷操作方法：
$().addClass(class属性值); //给class属性追加信息值
$().removeClass(class属性值); //删除class属性中的某个信息值
$().toggleClass(class属性值); //开关效果，信息值有就删除，没有就添加
class属性值的“追加”和“删除”操作：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js./jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
//给div设置class属性值
//attr()对同一个属性进行多次设置修改，后者要覆盖前者
//以下三条语句，最终“class=banana”
//$('div').attr('class','apple');
//$('div').attr('class','pear');
//$('div').attr('class','banana');
//addClass()给class属性"追加"信息值
//以下class的三个信息值会同时存在
$('div').addClass('apple');
$('div').addClass('pear');
$('div').addClass('banana');
}
function f2(){
//删除class属性值
$('div').removeClass('pear');//删除class属性中的pear信息值
$('div').removeClass('apple');
$('div').removeClass('banana');
//$('div').removeAttr('class');//删除class属性
}
function f3(){
$('div').toggleClass('apple');//开关效果
}
</script>
<style type="text/css">
.apple{width:300px; height:200px; background-color:pink;}
.pear{color:blue;}
.banana{font-size:30px;}
</style>
</head>
<body>
<h2>class属性快捷操作</h2>
<div>Today we are studying jQuery</div>
<input type="button" value="设置" onclick="f1()" />
<input type="button" value="删除class属性值" onclick="f2()" />
<input type="button" value="开关效果" onclick="f3()" />
</body>
</html>
--------------------------------------------------------------------------
2. 标签包含内容操作
<div>hello<span>world</span></div>
javascript操作：
dvnode.innerHTML; 获得div包含的信息
dvnode.innerHTML = XXX； 设置div包含的内容
(innerHTML不是w3c标准技术，许多浏览器对其有支持而已)
jquery操作：
$().html(); //获得节点包含的信息
$().html(信息); //设置节点包含的内容
$().text(); //获得节点包含的“文本字符串信息”内容
$().text(信息); //设置节点包含的内容(有html标签就把“><”符号变为符号实体)
html()和text()方法的使用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
//获取
//html() "字符串" 和 "html标签" 都可以获取
console.log($('div').html());//Today we are <span>studying</span> jQuery
//text() 只给获取"字符串"内容
console.log($('div').text());//Today we are studying jQuery
}
function f2(){
//设置
//html(内容); "字符串" 和 "html标签" 都可以设置
//$('div').html('请访问<a href="http://www.baidu.com">百度</a>');//有具体"百度"超链接体现
//text(内容); 最好设置普通"字符串"内容
// 如果有html标签，则标签的"<"">"符号会变为符号实体
// <-----< >------->
$('div').text('<p>hel</p>lo');
}
</script>
<style type="text/css">
</style>
</head>
<body>
<h2>标签包含内容操作</h2>
<div>Today we are <span>studying</span> jQuery</div>
<input type="button" value="获取" onclick="f1()" />
<input type="button" value="设置" onclick="f2()" />
</body>
</html>
-----------------------------------------------------------------------------------
3. css样式操作
$().css(name，value); //设置
$().css(name); //获取
$().css(json对象); //同时修改多个css样式
3.1 css()样式操作特点：
① 样式获取，jquery可以获取 行内、内部、外部的样式。
dom方式只能获得行内样式
② 获取复合属性样式 需要拆分为"具体样式"才可以操作
(有的浏览器是可以获得复合属性信息的，例如chrome)
例如： background 需要拆分为 background-color background-image 等进行操作
border： border-left-style border-left-width border-left-color 等
margin： margin-left margin-top 等
③ 样式的设置，会被设置为“行内样式”
有则修改，无则添加
(复合属性样式可以直接进行设置操作)
获取div的各个样式信息：
给div设置一些css样式信息：
通过一个json对象批量修改样式信息：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1() {
//获取
//行内、内部、外部样式都可以获得
//javascript的dom方式只能获得"行内"样式
console.log($('div').css("color")); //rgb(255, 0, 0)
console.log($('div').css("width")); //300px
console.log($('div').css("height")); //200px
console.log($('div').css("background-color")); //rgb(173, 216, 230)
console.log($('div').css("font-size")); //25px
//console.log($('div').css("border"));//(空字符串)
//"复合样式"需要拆分为"具体样式"进行获取
console.log($('div').css('border-left-style')); //solid
console.log($('div').css('border-left-color')); //rgb(0, 0, 255)
console.log($('div').css('border-left-width')); //4px
}
function f2() {
//设置(会被设置为"行内"样式)
//有则修改、无则添加
$('div').css('font-size', '40px'); //添加
$('div').css('color', 'green'); //修改
$('div').css('width', '400px'); //添加
//复合样式可以直接进行设置
$('div').css('border', '5px solid yellow');
}
function f3() {
//通过json对象批量修改css样式
$('div').css({
'font-size': '50px',
color: 'purple',
height: '300px'
});
}
</script>
<link href="css/11.css" type="text/css" rel="stylesheet" />
<style type="text/css">
div {
width: 300px;
height: 200px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>css样式操作</h2>
<!--样式分类：行内、内部、外部-->
<div style="color:red;">Today we are studying jQuery</div>
<input type="button" value="获取" onclick="f1()" />
<input type="button" value="设置" onclick="f2()" />
<input type="button" value="json对象批量修改样式" onclick="f3()" />
</body>
</html>
---------------------------------------------------------------------------------
4. value属性值快捷操作
$().attr(‘value’);
$().attr(‘value’,信息值);
快捷操作：
$().val(); //获得value属性值
$().val(信息值); //设置value属性的值
该val()方法在 复选框、单选按钮、下拉列表 的使用有凸出表现。
4.1 复选框操作
① 获得被选中复选框的value属性值
② 设置默认情况下哪个复选框被选中
获取被选中复选框value值的逻辑：
通过val()方法可以非常方便地设置哪个复选框选中：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
//获取(被选中复选框的value值)
//① 获得全部的"被选中"复选框元素节点对象
//②遍历全部的被选中复选框
//③如果有选中就获得其value值
//console.log($('.hby:checked'));//其是一个Object对象，内部有具体的复选框元素节点对象
//Object[input.hby 属性(attribute)值 = "1", input.hby 属性(attribute)值 = "3", input.hby 属性(attribute)值 = "4"]
var s = "";
for(var i=0; i<$('.hby:checked').length; i++){
//$('.hby:checked:eq('+i+')') //被遍历出来的当前的复选框元素节点
//console.log($('.hby:checked:eq('+i+')').val());
s += $('.hby:checked:eq('+i+')').val()+","; //1,3,4
}
//s = s.substr(起始位置,长度); //字符串截取
s = s.substr(0,s.length-1); //去除最后','逗号
console.log(s);//2,3,4
}
function f2(){
//设置，"篮球" "足球" "棒球" 选中
//获得全部复选框，做遍历，判断当前项目的value值是否等于1或4
//等于就选中
//$(全部的复选框).val([元素值，元素值])，可以设置"value值=元素值"的项目选中
$('.hby').val([1,2,4]);
}
</script>
<link href="js/11.css" type="text/css" rel="stylesheet" />
<style type="text/css">
div{width:300px; height:200px; background-color:lightblue;}
</style>
</head>
<body>
<h2>复选框操作</h2>
爱好：
<input type="checkbox" class="hby" name="hobby[]" value="1">篮球
<input type="checkbox" class="hby" name="hobby[]" value="2">足球
<input type="checkbox" class="hby" name="hobby[]" value="3">排球
<input type="checkbox" class="hby" name="hobby[]" value="4">棒球
<br /><br />
<input type="button" value="获取" onclick="f1()" />
<input type="button" value="设置" onclick="f2()" />
</body>
</html>
-----------------------------------------------------------------------------------
4.2 下拉列表操作
下拉列表获得选中项目value值，和 设置默认选中项目操作：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
//获取(被选中下拉列表项目的value值)
//适合"单选"的下拉列表
//console.log($('option:selected').val()); //attr('value')
//"多选"的情况（适合单选情况）
$(下拉列表).val(); //获得全部被选中的下拉列表项目的value值
console.log($('select').val());//["B", "D", "E"]
}
function f2(){
//设置，北京 天津 沈阳 选中(单选、多选都适合)
//$(下拉列表).val([元素值，元素值。。。]); //可以设置"value值=元素值"的项目选中
$('#city').val(['A','B','E']);
}
</script>
</head>
<body>
<h2>下拉列表操作</h2>
曾经旅游过的城市：
<select id="city" multiple="multiple" style='width:150px; height:246px;'>
<option value='0'>-请选择-</option>
<option value='A'>北京</option>
<option value='B'>天津</option>
<option value='C'>上海</option>
<option value='D'>深圳</option>
<option value='E'>沈阳</option>
</select>
<br /><br />
<input type="button" value="获取" onclick="f1()" />
<input type="button" value="设置" onclick="f2()" />
</body>
</html>
-------------------------------------------------------------------------------
4.3 单选按钮操作
获得选中项目的value值 和 设置默认选中项目操作：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="./jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
//获取(被选中单选框项目的value值)
console.log($('.sx:checked').val());
}
function f2(){
//设置
//$(全部单选按钮).val([元素值]);//使得value值===元素值的项目选中
$('.sx').val(['c']);
}
</script>
</head>
<body>
<h2>单选按钮操作</h2>
性别：
<input type="radio" class="sx" name="sex" value="a">男
<input type="radio" class="sx" name="sex" value="b">女
<input type="radio" class="sx" name="sex" value="c">保密
<hr /></hr />
<br /><br />
<input type="button" value="获取" onclick="f1()" />
<input type="button" value="设置" onclick="f2()" />
</body>
</html>
-------------------------------------------------------------------------------
5. 复选框操作
全选、反选、全不选
$().attr(‘checked’,true); //设置复选框选中
$().attr(‘checked’,false); //取消复选框选中
$().attr(‘checked’); //判断复选框选中情况，返回布尔值
复选框全选、全不选、反选的实现逻辑：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="./jquery-1.4.4.js"></script>
<script type="text/javascript">
function selAll(){
//全选 $('li').css('color','red');
$('.hby').attr('checked',true);
//以上css()/attr()方法都有批量处理效果
//在jquery框架里边，大部分方法本身有“遍历机制”
//遍历同时会为每个dom对象都设置对应的(css)属性
}
function selnotAll(){
//全不选
$('.hby').attr('checked',false);
}
function selfan(){
//遍历全部的复选框，查看选中状态，选中设置不选中
//$('.hby')
for(var i=0; i<$('.hby').length; i++){
var flag = $('.hby:eq('+i+')').attr('checked');//判断选中状态
$('.hby:eq('+i+')').attr('checked',!flag);
}
}
</script>
</head>
<body>
<h2>复选框操作</h2>
爱好：
<input type="checkbox" class="hby" name="hobby[]" value="1">篮球
<input type="checkbox" class="hby" name="hobby[]" value="2">足球
<input type="checkbox" class="hby" name="hobby[]" value="3">排球
<input type="checkbox" class="hby" name="hobby[]" value="4">棒球
<br /><br />
<input type="button" value="全选" onclick="selAll()" />
<input type="button" value="全不选" onclick="selnotAll()" />
<input type="button" value="反选" onclick="selfan()" />
</body>
</html>
----------------------------------------------------------------------------------
总结:
1. 属性操作
$().attr(name)
$().attr(name,value)
$().removeAttr(name)
$().attr(json对象);
$().attr(name,fn)
自定义属性 和 w3c规定的 都可以操作
2. 快捷操作
a) class属性值快捷操作
addClass() //给class属性“追加”信息值
removeClass() //给class属性“删除”信息值
toggleClass() //开关效果
b) 标签包含内容
html()
text()
c) val() value属性快捷操作
val() ----- attr(‘value’)
val(内容)----- attr(‘value’,值);
复选框、单选框、下拉列表.val([元素值，元素值，元素值])
d) 复选框选中、不选中
复选框.attr(‘checked’,true/false)
复选框.attr(‘checked’)
------------------------------------------------------------------------------
一．昨天内容回顾
1. 各种选择器使用
a) 基本 $(#id) $(.class) $(标签名称) $(*) $(s1,s2,s3)
b) 层次
$(s1 s2) $(s1 > s2)
$(s1 + s2) $(s1 ~ s2)
c) 并且
:first :last
:eq(n) :gt(n) :lt(n)
:odd :even
普通选择器也可以构成并且关系
$(s1s2s3s4) 获得的节点要同时满足s1/s2/s3/s4四个条件
在没有歧义的情况下各个并且选择器没有前后顺序要求
d) 内容过滤
:contains(text) :empty
:has(selector) :parent
e) 表单域选中
复选框、单选按钮 :checked
下拉列表option标签 :selected
2. 属性操作
$().attr(name)
$().attr(name,value)
$().attr(json对象)
$().removeAttr(name)
$().attr(name,function)
3. 快捷操作
a) class属性
addClass() removeClass() toggleClass()
b) 标签包含内容
html([text]) text([txt])
c) css样式操作
$().css(name) $().css(name,value) $().css(json对象)
d) val()方法
对value属性操作
$().val()
$().val(text)
$(复选框/下拉列表/单选按钮).val([数组])
$(下拉列表).val(); //获得选中下拉列表项目的value值
e) 复选框选中设置
$().attr(‘checked’,true/false); $().attr(‘checked’)
------------------------------------------------------------------
二．作业
1. 使用“并且选择器”实现下图效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
window.onload = function() {
$('tr:first').css('background-color', 'yellow');
$('tr:gt(0):odd').css('background-color', 'lightblue');
}
function cont() {
//通过控制器复选框，控制其他复选框的选中状态
var flag = $('#ctl').attr('checked'); //判断选中状态
$('.goods').attr('checked', flag) //其他复选框状态设置
}
</script>
<style type="text/css">
table {
width: 700px;
margin: auto;
border: 1px solid black;
border-collapse: collapse;
}
td {
border: 1px solid black;
}
h2 {
width: 700px;
margin: auto;
text-align: center;
}
</style>
</head>
<body>
<h2>表格隔行换色</h2>
<table>
<tr>
<td><input type="checkbox" id="ctl" onclick="cont()" /></td>
<td>序号</td>
<td>名称</td>
<td>价格</td>
<td>数量</td>
</tr>
<tr>
<td><input type="checkbox" class="goods" /></td>
<td>1</td>
<td>apple</td>
<td>6100</td>
<td>13</td>
</tr>
<tr>
<td><input type="checkbox" class="goods" /></td>
<td>2</td>
<td>nokia</td>
<td>2300</td>
<td>15</td>
</tr>
<tr>
<td><input type="checkbox" class="goods" /></td>
<td>3</td>
<td>htc</td>
<td>2500</td>
<td>28</td>
</tr>
<tr>
<td><input type="checkbox" class="goods" /></td>
<td>4</td>
<td>heimei</td>
<td>3100</td>
<td>15</td>
</tr>
<tr>
<td><input type="checkbox" class="goods" /></td>
<td>5</td>
<td>samsung</td>
<td>4600</td>
<td>41</td>
</tr>
</table>
</body>
</html>
------------------------------------------------------------------------
2. 制作图片放大、缩小效果(图片等比例缩放效果)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
function big() {
//放大
//① 获得图片原宽度、高度
var w = $('img').width();
//var h = $('img').height();
//② 递增操作(5px)
var new_w = w + 5;
//等比例 w/h = new_w/new_h
//var new_h = new_w*h/w;
//③ 把新宽度、高度给图片进行设置
$('img').width(new_w);
//$('img').height(new_h);
}
function small() {
//缩小
//① 获得图片原宽度、高度
var w = $('img').width();
var h = $('img').height();
//② 递增操作(5px)
var new_w = w - 5;
//等比例 w/h = new_w/new_h
var new_h = new_w * h / w;
//③ 把新宽度、高度给图片进行设置
$('img').width(new_w);
$('img').height(new_h);
}
</script>
<style type="text/css">
</style>
</head>
<body>
<h2>图片放大缩小</h2>
<img src="img/zhou.gif" alt="" width="400" />
<br />
<input type="button" value="放大" onclick="big()" />
<input type="button" value="缩小" onclick="small()" />
</body>
</html>
-------------------------------------------------------------------
三. $符号的由来
$(‘div’) $(‘.apple’) $(‘*’) $(’#id属性值‘)等等。
选择器使用的过程就是函数调用过程。
$符号就是一个函数，函数名称为”$”符号而已。也可以使用“jQuery”符号。
$符号 就是一个函数，同时其也是一个全局变量，除此之外还可以使用jQuery符号，它们互为别名。
---------------------------------------------------------------------------------------
四. jquery对象 与 dom对象关系
jquery对象：$(‘li’) $(‘.apple’) $(‘#one’)
等选择器使用返回的信息就是对象，
称为jquery对象
dom对象： document.getElementById()
document.getElementsByTagName();
1. 互调对方的成员
jquery对象 和 dom对象 不能随便调用对方的成员：
2. jquery对象封装dom对象
dom对象 就是jquery对象 的数组组成部分。
jquery对象 对 document.getElementById()方法的封装：
3. jquery对象 和 dom对象 的转化
3.1 jquery对象--》dom对象
$()[下标]
jquery对象变为dom对象之后可以调用dom对象的成员：
3.2 dom对象--》jquery对象
$(dom对象)
dom对象变为jquery对象才可以调用对方方法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1() {
document.getElementsByTagName('h2')[0].style.backgroundColor = "pink";
//jquery对象 去调用 dom对象的成员【失败】
//$(...).style is undefined
//$('h2').style.backgroundColor = "lightblue";
//"jquery对象"变为"dom对象"才可以调用对方成员【成功】
$('h2')[0].style.backgroundColor = "lightgreen";
}
function f2() {
//$('div').css('color','red');
//dom对象 去调用 jquery对象的成员【失败】
var dv = document.getElementsByTagName('div')[0];
// document.getElementsByTagName(...)[0].css is not a function
//dv.css('color','blue');
//"dom对象" 变为 "jquery对象" 才可以调用对方成员【成功】
//$(dom对象) dom对象选择器
$(dv).css('color', 'orange');
}
</script>
<style type="text/css">
</style>
</head>
<body>
<h2>图片放大缩小</h2>
<div>This is Tuesday</div>
<input type="button" value="触发1" onclick="f1()" />
<input type="button" value="触发2" onclick="f2()" />
</body>
</html>
-----------------------------------------------------------------------
五. jQuery框架对象分析
jQuery框架对象类型：jquery对象 和 $对象
① jquery对象(普通对象)：就是各种选择器创建出来的对象 $(div)$(.class) $(#id)
② $对象就是”函数对象” $.get()
1. jquery对象
$(‘#apple’)------> 24行 new jQuery.fn.init()
以上jquery对象 可以调用许多成员 css() attr() addClass() html() text()等等
问题：
jquery对象 可调用的各种成员 是从哪来的？
答：
jquery对象可以调用的成员共分为三类：init()、fn()、fn.extend()
其中fn.extend()复制继承占多数。
普通的jquery对象调用成员的90%以上都是jQuery.fn.extend()复制继承过来的。
jQuery.fn.init通过原型继承jQuery.fn
jQuery.fn本身有extend复制继承，可以为自己丰富许多成员：
2. $对象
$对象 也可以成为 jQuery对象。
$对象-------------->函数对象
该$对象可以调用的成员都是extend复制继承过来的
$.get() $.post() $.ajax()
$对象 的全部成员都是通过extend()复制继承过来的：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="./jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
//$('#apple') 是对 document.getElementById('apple')的封装
//$('#apple').css('color','green');
//console.log($('#apple'));//Object[div#apple]
//$('#apple')
//console.log($('div'))
console.log($('li'))
$('li')[1].style.color = "red";
}
</script>
<style type="text/css">
</style>
</head>
<body>
<h2>图片放大缩小</h2>
<div id="apple">This is Tuesday</div>
<ul>
<li>哈尔滨</li>
<li>长春</li>
<li>沈阳</li>
</ul>
<input type="button" value="触发" onclick="f1()" />
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
$('#apple').css/addClass()/attr()/html()/text();
}
</script>
<style type="text/css">
</style>
</head>
<body>
<h2>图片放大缩小</h2>
<div id="apple">This is Tuesday</div>
<ul>
<li>哈尔滨</li>
<li>长春</li>
<li>沈阳</li>
</ul>
<input type="button" value="触发" onclick="f1()" />
</body>
</html>
------------------------------------------------------------------------------------
六. 遍历方法
each()遍历方法：
$.each(数组/对象,function处理); //$对象 调用的
$(选择器).each(function处理); //jquery对象 调用的
each()方法对数组和对象的遍历：
each()方法对jquery对象的遍历 及内部this关键字的使用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
//each()遍历方法
//① 遍历数组
// for循环 for-in
// $.each(数组,function(k每个元素下标,v每个元素的值){});
var color = ['gold', 'yellow', 'orange', 'blue'];
$.each(color, function(k, v) {
//遍历的主体实现
console.log(k + "---" + v);
});
//② 遍历对象(获得各个成员)
// $.each(对象,function(k成员名称,v成员值){});
var cat = {
name: 'kitty',
color: "white",
climb: function() {
console.log('会爬树')
}
};
$.each(cat, function(k, v) {
console.log(k + '--' + v);
});
var clr = ['red', 'blue', 'pink', 'purple', 'yellow', 'orange', 'gray'];
window.onload = function() {
//③ 遍历jquery对象
//$().each(function(k-dom对象下标,v-dom对象){});
jQuery('li').each(function(k, v) {
//console.log(k+"----"+v); //0 1 2 3 object HTMLLIElement
//this关键字在当前位置代表"每个li的dom对象"
//在jquery内部使用this的时候，其就是代表dom对象
//console.log(this);//依次代表每个li的dom对象
this.style.color = "purple";
$(this).css('background-color', clr[Math.floor(Math.random() * 7)]); //随机数颜色
//v.style.color = "blue"; //dom对象进行样式设置
//$(v).css('background-color','lightgreen');//dom对象 变成 jquery对象 了
});
}
</script>
<style type="text/css">
</style>
</head>
<body>
<h2>each遍历方法</h2>
<ul>
<li>石家庄</li>
<li>济南</li>
<li>郑州</li>
<li>西安</li>
</ul>
</body>
</html>
----------------------------------------------------------------------------------------------
总结：
1. $符号的由来
2. jquery对象 和 dom对象的关系
dom对象 是 jquery对象 的数组组成部分
jquery对象------->dom对象: $()[下标]
dom对象------->jquery对象: $(dom对象)
3. jQuery框架对象分析
a) jquery对象成员的来源分析：
new jQuery.fn.init()
可以调用的成员分为三类： jQuery.fn.init()、jQuery.fn()、 jQuery.fn.extend()
b) $对象
$对象(jQuery符号对象)的成员都是extend()复制继承过来的
4. each()
------------------------------------------------------------------------------------------------
七. 加载事件
javascript的加载事件：
<body onload = “函数()”>
window.onload = function(){}
1. jquery加载事件实现
① $(document).ready(function处理);
$(document)是把document的dom对象变为jquery对象
② $().ready(function处理);
$()也是创建jquery对象，不过内部没有dom对象的组成部分
③ $(function处理); 对第一种加载的封装而已
jquery加载事件的三种体现：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
//jquery对象 ---> ready()方法,其属于fn的成员
//jquery对象可以调用成员：init()、fn()、extend()
//① $(document).ready(function);
$(document).ready(function() {
//具体加载事件实现
alert(1234);
});
//② $().ready(function);
$().ready(function() {
console.log('abcd');
});
//③ $(function);
// 该方式加载事件是对第①种的封装
$(function() {
console.log('fghi');
});
</script>
<style type="text/css">
</style>
</head>
<body>
<h2>jquery加载事件实现</h2>
</body>
</html>
-----------------------------------------------------------------------
2. jquery加载事件与传统加载事件的区别
2.1 设置个数
在同一个请求里边，jquery加载事件的可以设置多个，而传统方式只能设置一个
传统方式加载事件是给onload事件属性赋值，多次赋值，后者会覆盖前者。
jquery方式加载事件是把每个加载事件都存入一个数组里边并成为数组的元素，
执行的时候就遍历该数组执行每个元素即可，因此其可以设置多个加载事件。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
//传统加载事件，在同一个请求里边如果设置多个
//后者会覆盖前者
//最好只设置一个
window.onload = function(){
console.log(1234);
}
window.onload = function(){
console.log(2345);
}
window.onload = function(){
console.log(3456);
}
</script>
<style type="text/css">
</style>
</head>
<body>
<h2></h2>
</body>
</html>
----------------------------------------------------------
2.2 执行时机不一样
传统方式加载事件，是全部内容(文字、图片、样式)在浏览器显示完毕再给执行加载事件。
广告图片小叉隐藏图片实现（在加载事件里边给图片的小叉设置onclick事件）
用户名输入框有点击隐藏灰色的文字(在加载事件里边给输入框设置onclick事件，隐藏灰色文字)
jquery方式加载事件，只要全部内容(文字、图片、样式)在内存里边对应的DOM树结构绘制完毕就给执行，有可能对应的内容在浏览器里边还没有显示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
//传统加载：页面上全部内容在浏览器里边显示好了，再给执行
window.onload = function(){
alert(1234);//4s之后 "图片" 和 "弹出框" 同时看到
}
</script>
<style type="text/css">
</style>
</head>
<body>
<h2>加载事件的执行时机</h2>
<!--4s后出现图片-->
<img src="./09.php" alt="" />
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="./jquery-1.4.4.js"></script>
<script type="text/javascript">
//jquery加载事件：全部内容在内存里边绘制好了就给执行，
// 有可能对应的内容还没有在浏览器里边显示
$(function(){
alert('abcd'); //先看到弹出框，4s后看到图片
});
</script>
<style type="text/css">
</style>
</head>
<body>
<h2>加载事件的执行时机</h2>
<!--4s后出现图片-->
<img src="./09.php" alt="" />
</body>
</html>
----------------------------------------------------------------------
3. jquery加载事件原理
jquery加载事件是对DOMContentLoaded的封装(非onload)
jquery加载事件的原理实现：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
//jquery加载事件原理：其是对DOMContentLoaded的封装(非onload)
document.addEventListener('DOMContentLoaded',function(){
alert('111222'); //先看到弹出框,4s后看到图片
});
</script>
<style type="text/css">
</style>
</head>
<body>
<h2>加载事件的执行时机</h2>
<!--4s后出现图片-->
<img src="./09.php" alt="" />
</body>
</html>
------------------------------------------------------------------------
八. 普通(简单)事件操作
① dom1级事件设置
<input type=”text” onclick=”过程性代码” value=’tom’ />
<input type=”text” onclick=”函数()” />
itnode.onclick = function(){}
itnode.onclick = 函数;
② dom2级事件设置
itnode.addEventListener(类型，处理，事件流);
itnode.removeEventListener(类型，处理，事件流);
node.attachEvent();
node.detachEvent();
③ jquery事件设置
$().事件类型(事件处理函数fn); //设置事件
$().事件类型(); //触发事件执行
事件类型：click、keyup、keydown、mouseover、mouseout、blur、focus等等
例如：
$(form).submit()可以使得表单进行提交。
$(‘div’).click(function(){事件触发过程this});
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(function(){
//页面加载完毕为div设置事件
//$().事件类型(处理函数);
$('div').mouseover(function(){
//this代表dom对象(如果有多个会分别依次代表每个dom对象)
$(this).css('background-color','lightgreen');
});
$('div').mouseout(function(){
$(this).css('background-color','lightblue');
});
});
</script>
<style type="text/css">
div {width:300px; height:200px; background-color:lightblue;}
</style>
</head>
<body>
<h2>简单事件操作</h2>
<div>Today is sunshine</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(function() {
//页面加载完毕为div设置事件
//$().事件类型(处理函数);
$('div').mouseover(function() {
$(this).css('background-color', 'lightgreen');
});
$('div').mouseout(function() {
$(this).css('background-color', 'lightblue');
});
//允许为同一个对象设置多个同类型事件
$('div').mouseover(function() {
$(this).css('font-size', '30px');
});
});
function f1() {
//"触发"对象事件执行
//(通过代码触发事件执行)
$('div').mouseover();
}
</script>
<style type="text/css">
div {
width: 300px;
height: 200px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>简单事件操作</h2>
<div>Today is sunshine</div>
<input type="button" value="触发" onclick="f1()" />
</body>
</html>
-------------------------------------------------------------------
九. jquery对文档的操作
通过jquery方式实现页面各种节点的追加、删除、复制、替换等操作
1. 节点追加
1.1 父子关系追加
1.1 append(content)
主动 向每个匹配的元素内部后置追加内容
1.3 prepend(content)
向每个匹配的元素内部前置追加内容
1.2 appendTo(content)
被动 把所有匹配的元素后置追加到另一个、指定的元素元素集合中
1.4 prependTo(content)
把所有匹配的元素前置追加到另一个、指定的元素集合中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1() {
//主动
//父节点.append()后置
$('#shu').append('<li>马超</li>'); //新节点
$('#shu').append($('#wu li:eq(1)')); //已有节点追加(物理位置移动)
//父节点.prepend()前置
$('#shu').prepend('<li>诸葛亮</li>'); //新节点
//被动
//被追加节点.appendTo(父节点) 后置
$('<li>黄忠</li>').appendTo($('#shu')); //新节点
//prependTo() 前置
$('<li>魏延</li>').prependTo($('#shu')); //新节点
$('#xiang').prependTo($('#shu')); //已有节点追加(物理位置移动)
}
</script>
</head>
<body>
<h2>节点追加(父子)</h2>
<ul id="shu">
<li>刘备</li>
<li>张飞</li>
<li>赵云</li>
<li>关羽</li>
</ul>
<ul id="wu">
<li>孙权</li>
<li>周瑜</li>
<li id="xiang">孙尚香</li>
</ul>
<input type="button" value="追加" onclick="f1()" />
</body>
</html>
---------------------------------------------------------------------
1.2 兄弟关系追加
2.1 after(content)
主动 在每个匹配的元素之后插入内容
2.2 before(content)
在每个匹配的元素之前插入内容
2.3 insertAfter(content)
被动 把所有匹配的元素插入到另一个、指定的元素集合的后面
2.4 insertBefore(content)
把所有匹配的元素插入到另一个、指定的元素集合的前面
兄弟关系节点追加的具体使用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="./jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
主动
//兄弟节点.after() 后置
$('#yun').after('<li>黄忠</li>');//新节点
//兄弟节点.before() 前置
$('#yun').before('<li>诸葛亮</li>');//新节点
$('#shu li:first').after($('#xiang'));//已有节点追加(物理位置移动)
被动
//被追加节点.insertAfter(追加节点) 后置
$('<li>马超</li>').insertAfter($('#fei'));//新节点
//insertBefore() 前置
$('<li>司马懿</li>').insertBefore($('#fei'));//新节点
$('#wu li:first').insertBefore($('#bei'));//已有节点追加(物理位置移动)
}
</script>
</head>
<body>
<h2>节点追加(兄弟)</h2>
<ul id="shu">
<li id="bei">刘备</li>
<li id="fei">张飞</li>
<li id="yun">赵云</li>
<li>关羽</li>
</ul>
<ul id="wu">
<li>孙权</li>
<li>周瑜</li>
<li id="xiang">孙尚香</li>
</ul>
<input type="button" value="追加" onclick="f1()" />
</body>
</html>
-----------------------------------------------------------------------------------------
2. 节点替换
$().replaceWith(); 被动替换
$().replaceAll(); 主动替换
具体使用(新旧节点都可以去替换)：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
//新节点去替换、已有节点去替换
// $('<li>马超</li>').replaceAll($('#fei')); //新节点去替换(主动)
$('#bei').replaceWith($('#quan'));//(被动)已有节点去替换,物理位置移动
}
</script>
</head>
<body>
<h2>节点替换</h2>
<ul id="shu">
<li id="bei">刘备</li>
<li id="fei">张飞</li>
<li id="yun">赵云</li>
<li>关羽</li>
</ul>
<ul id="wu">
<li id="quan">孙权</li>
<li>周瑜</li>
<li id="xiang">孙尚香</li>
</ul>
<input type="button" value="替换" onclick="f1()" />
</body>
</html>
---------------------------------------------------------------------------
3. 节点删除
$(父节点).empty(); //父节点清空子节点
$(匹配节点).remove(); //删除指定的节点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="./jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
//empty()/remove()
$('#wu').empty(); //清空对应的子节点
$('#bei,#yun').remove(); //删除匹配到的节点。基本选择器的联合选择器 $(s1,s2,s3)
}
</script>
</head>
<body>
<h2>节点删除</h2>
<ul id="shu">
<li id="bei">刘备</li>
<li id="fei">张飞</li>
<li id="yun">赵云</li>
<li>关羽</li>
</ul>
<ul id="wu">
<li id="quan">孙权</li>
<li>周瑜</li>
<li id="xiang">孙尚香</li>
</ul>
<input type="button" value="删除" onclick="f1()" />
</body>
</html>
----------------------------------------------------------------------------------
4. 复制节点
$().clone(true) //节点 和 其身上的事件都给复制
$().clone(false) //只给复制 节点 本身(包括节点内部信息)
给多个li的项目设置mouseover和mouseout事件，事件方法本身有遍历机制：
节点复制clone(true)，节点本身和其事件都给复制：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
//页面加载完毕要给#shu内部的li设置事件
$(document).ready(function(){
//mouseover()事件本身有"遍历机制"，会给每个li都设置时间
$('#shu li').mouseover(function(){
//this分别依次代表每个li的dom对象
$(this).css('background-color','pink');
});
$('#shu li').mouseout(function(){
//this分别依次代表每个li的dom对象
$(this).css('background-color','greenyellow');
});
});
function f1(){
//复制一份“张飞”节点， 并追加给#wu
var fu_fei = $('#fei').clone(false);//只复制节点(没有事件)
//var fu_fei = $('#fei').clone(true);//复制“节点”和其“事件”
$('#wu').append(fu_fei);
}
</script>
</head>
<body>
<h2>节点复制</h2>
<ul id="shu">
<li id="bei">刘备</li>
<li id="fei">张飞</li>
<li id="yun">赵云</li>
<li>关羽</li>
</ul>
<ul id="wu">
<li id="quan">孙权</li>
<li>周瑜</li>
<li id="xiang">孙尚香</li>
</ul>
<input type="button" value="复制" onclick="f1()" />
</body>
</html>
----------------------------------------------------------------------
十. 属性选择器使用
1. [attribute]用法:$("div[id]");
定义：匹配包含给定属性的元素,判断拥有某个属性的元素
2. [attribute=value]用法:$("input[name=newletter]").
定义：匹配给定的属性是某个特定值的元素，判断某个元素的属性值相等
3. [attribute!=value]用法:$("input[name!='newletter']").
定义：匹配给定的属性是不包含某个特定值的元素，判断某个元素的属性值不等
4. [attribute^=value]用法:$("input[name^='news']")
定义：匹配给定的属性是以某些值开始的元素，判断某个属性值以value为开始值
5. [attribute$=value]用法:$("input[name$='letter']")
定义：匹配给定的属性是以某些值开始的元素，判断某个属性值以value为结尾值
6. [attribute*=value]用法:$("input[name*='man']")
定义：匹配给定的属性是以包含某些值的元素，判断某个属性值包含value
7. [selector1][selector2][selectorN]用法:$("input[id][name$='man']")
定义：复合属性选择器，需要同时满足多个条件时使用，多个属性值去交集
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1() {
//① [name] 节点必须有"name"属性
// $("[size]").css('background-color', 'pink');
//② [name=value] 节点必须有name属性，其值等于“value”
// $("[size=30]").css('color', 'red');
//③ [name^=value] 节点必须有name属性，其值以“value”开始
// $("[value^=to]").css('font-size', '27px');
//④ [name$=value] 节点必须有name属性，其值以“value”结尾
// $("[value$=63]").css('width', '470px');
//⑤ [name!=value]
// A.节点如果有name属性，则其值不等于"value"
// B.节点没有name属性
// $("[class!=orange]").css('background-color', 'darkseagreen');
//⑦ [][][][]并且关系，同时满足多个条件
//我们需要的节点：有此class属性，并且属性值不等于"orange"
//$(s1s2s3s4) 获得的节点需要满足s1/s2/s3/s4等多个条件
$("[class][class!=orange]").css('background-color', 'lightblue');
// $("[size][value^=t][name]input").css('width', '500px');
//⑥ [name*=value] 节点必须有name属性，其值必须出现"value"字样
$("[class*=an]").css('color', 'red');
}
</script>
</head>
<body>
<h2 class="orange">属性选择器</h2>
<input type="text" size="10" value="tom" /><br />
<input type="text" size="30" name="useremail" value="tom@163.com" /><br />
<input type="text" size="30" name="usertel" class="orange" value="15243735363" /><br />
<input type="text" size="30" name="userqq" class="pear" value="84323998" /><br />
<input type="button" value="触发" onclick="f1()" /><br />
</body>
</html>
---------------------------------------------------------------------------------------------------
总结：
1. 加载事件使用
$(document).ready(function)
$().ready(function);
$(function)
与传统加载事件不同：
① 设置个数
② 执行时机
jquery加载事件原理：其是对DOMContentLoaded的封装。
2. 简单事件设置
$().事件类型(function事件处理函数)
$().事件类型();
3. 文档操作
a) 节点追加
父子：append() prepend() appendTo() prependTo()
兄弟：after() before() insertAfter() insertBefore()
b) 替换和删除
替换： replaceWith()被动 replaceAll()主动
删除： empty() remove()
c) 复制
被复制节点.clone(true/false)
4. 属性选择器使用
[name] [name=value]
[name^=value] [name$=value] [name*=value]
[name!=value]
---------------------------------------------------------------------
一．昨天内容回顾
1. $符号由来
$(‘li’) $(‘#apple’)
$符号就是一个全局的函数名称，同时还可以使用jQuery符号
2. jquery对象 和 dom对象 的关系
dom对象 是 jquery对象的数组组成部分
jquery对象---->dom对象： $()[下标]
dom对象---->jquery对象： $(dom对象)
3. jquery对象 的成员来源
jquery对象->addClass()/html()/text()/css()/attr()等等许多成员可调用
jquery对象调用的成员共分3种类型：
① jQuery.fn.init()
② jQuery.fn()
③ jQuery.fn.extend()
4. each()遍历方法
$.each(数组,funciton(k下标变量,v值变量){})
$.each(对象，function(k成员名称,v成员值){})
$(选择器).each(function(k dom对象的序号下标,v 分别依次代表每个dom对象){
this分别依次代表每个dom对象
$(this) 把this的dom对象变为jquery对象
})
5. 加载事件使用及与传统加载事件不同
三种体现形式：
$(document).ready(function);
$().ready(function);
$(function);
与传统加载事件不同：
① 设置个数
② 执行时机
6. 简单事件操作
事件类型：click/dblclick/focus/blue/mouseover/mouseout/keyup/keydown
$(选择器).事件类型(function);//设置事件
$(选择器).事件类型(); //触发事件执行
7. 文档操作
a) 追加
父子关系：append() prepend() appendTo() prependTo()
兄弟关系：after() before() insertAfter() insertBefore()
b) 替换
replaceWith()被动 replaceAll()主动
c) 删除
empty() remove()
d) 复制
clone(true/false)
8. 属性选择器
[name] [name=value] [name^=value] [name$=value]
[name!=value] ([name][name!=value])
--------------------------------------------------------------------------------
二．作业
1. 利用文档节点操作实现如下效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<style type="text/css">
select {
width: 150px;
height: 250px;
}
</style>
</head>
<body>
<h2></h2>
<select id="hebei" multiple="multiple">
<option>石家庄</option>
<option>邯郸</option>
<option>保定</option>
<option>邢台</option>
</select>
<select id="shandong" multiple="multiple">
<option>济南</option>
<option>青岛</option>
<option>泰安</option>
<option>烟台</option>
</select>
<br />
<input type="button" value="-->" onclick="toRight()" />
<input type="button" value="==>" onclick="toAllRight()" />
<input type="button" value="<--" onclick="toLeft()" />
<input type="button" value="<==" onclick="toAllLeft()" />
</body>
<script type="text/javascript">
//在加载事件里边给option项目设置双击事件，被双击移动到对方
$().ready(function() {
//双击判断父级节点，再做节点跳转
$('option').dblclick(function() {
//this分别依次代表每个option的dom节点对象
if (this.parentNode.id === 'hebei') {
$(this).appendTo($('#shandong'));
} else {
$(this).appendTo($('#hebei'));
}
});
//以下设置项目移动到对方就不能回来了
// $('#hebei option').dblclick(function(){
// $(this).appendTo($('#shandong'));
// });
// $('#shandong option').dblclick(function(){
// $(this).appendTo($('#hebei'));
// });
});
function toRight() {
//左侧"选中"项目移动到右侧
$('#hebei option:selected').appendTo($('#shandong'));
}
function toAllRight() {
//左侧全部项目移动到右侧
$('#hebei option').appendTo($('#shandong'));
}
function toLeft() {
//右侧"选中"项目移动到左侧
$('#shandong option:selected').appendTo($('#hebei'));
}
function toAllLeft() {
//右侧全部项目移动到左侧
$('#shandong option').appendTo($('#hebei'));
}
</script>
</html>
---------------------------------------------------------------------------
三．事件绑定
1. 事件绑定
jquery事件的简单操作：
$().事件类型(function事件处理);
$().事件类型();
1.1 jquery事件绑定
$().bind(事件类型，function事件处理);
$().bind(类型1 类型2 类型3，事件处理); //给许多不同类型的事件绑定同一个处理
$().bind(json对象); //同时绑定多个不同类型的事件
(事件类型：click mouseover mouseout focus blur 等等)
事件处理：有名函数、匿名函数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(function() {
//页面加载完毕，为div绑定事件
//① 简单绑定
//$('div').bind(事件类型，处理函数[有名/匿名]);
$('div').bind('mouseover', function() {
$(this).css('background-color', 'lightblue');
});
$('div').bind('mouseout', function() {
$(this).css('background-color', 'lightgreen');
});
});
</script>
<style type="text/css">
div {
width: 300px;
height: 200px;
background-color: lightgreen;
}
</style>
</head>
<body>
<h2>事件绑定</h2>
<div>today is rain</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(function() {
//页面加载完毕，为div绑定事件
//② 为同一个对象的“多个不同类型事件”绑定同一个处理
//$('div').bind(类型1 类型2 类型3...,function(){})
//注意：多个类型事件彼此通过“一个”空格连接
$('div').bind('click mouseover mouseout', function() {
console.log(1234);
});
});
</script>
<style type="text/css">
div {
width: 300px;
height: 200px;
background-color: lightgreen;
}
</style>
</head>
<body>
<h2>事件绑定</h2>
<div>today is rain</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(function() {
//页面加载完毕，为div绑定事件
//③ 通过一个“json对象”为节点同时绑定多个事件
//$('div').bind(json对象)
//批量方式设置事件
$('div').bind({
click: function() {
console.log('111')
},
mouseover: function() {
console.log('222')
},
mouseout: function() {
console.log('333')
}
});
});
</script>
<style type="text/css">
div {
width: 300px;
height: 200px;
background-color: lightgreen;
}
</style>
</head>
<body>
<h2>事件绑定</h2>
<div>today is rain</div>
</body>
</html>
---------------------------------------------------------------------------
1.2 取消事件绑定
之前取消事件：
dvnode.onclick = null; //dom1级事件取消
dvnode.removeEventListener(类型，(有名)处理，事件流); //dom2级事件取消
jquery方式取消事件绑定：
① $().unbind(); //取消全部事件(无视事件类型、无视处理函数类型)
② $().unbind(事件类型); //取消指定类型的全部事件(无视处理函数类型)
③ $().unbind(事件类型，有名(事件)处理函数); //取消指定类型事件的指定处理
注意：第③种取消事件绑定，事件处理必须是有名函数。
在加载事件里边给div节点进行各种事件的绑定：
三种方式实现取消事件绑定操作：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(function() {
//批量方式设置事件
$('div').bind({
click: function() {
console.log('111')
},
mouseover: function() {
console.log('222')
},
mouseout: function() {
console.log('333')
}
});
$('div').bind('mouseover', function() {
$(this).css('font-size', '30px');
});
$('div').bind('mouseout', function() {
$(this).css('font-size', '5px');
});
//"有名函数"事件绑定
$('div').bind('click', fa);
$('div').bind('click', fb);
$('div').bind('click', fc);
});
function fa() {
console.log('aaa');
}
function fb() {
console.log('bbb');
}
function fc() {
console.log('ccc');
}
function cancel() {
//事件取消
$('div').unbind(); //全部事件
//$('div').unbind('click');//取消指定类型事件
//$('div').unbind('click', fb); //取消指定类型、指定处理(有名函数)
}
</script>
<style type="text/css">
div {
width: 300px;
height: 200px;
background-color: lightgreen;
}
</style>
</head>
<body>
<h2>事件取消绑定</h2>
<div>today is rain</div>
<br />
<input type="button" value="取消" onclick="cancel()" />
</body>
</html>
----------------------------------------------------------------------------------------
2. 事件对象、阻止浏览器默认动作、阻止事件冒泡
$().bind(‘click’,function(evt){ });
$().click(function(evt){});
$().bind(‘mouseover’,f1);
function f1(evt){}
事件对象：就使用红色的evt即可，在jquery框架内部有做浏览器兼容处理。
以上红色的evt对主流的事件对象 和 IE的事件对象有封装。
阻止浏览器默认动作、阻止事件冒泡：
dom2级浏览器默认动作阻止：
事件对象.preventDefault(); 主流浏览器
事件对象.returnValue = false; IE浏览器
dom2级事件冒泡阻止：
事件对象.stopPropagation(); 主流浏览器
事件对象.cancelBubule = true; IE浏览器
在jquery里边：
$().bind(‘click’,function(evt){
evt.preventDefault();
evt.stopPropagation();
});
preventDefault()方法是jquery的方法，名字与js底层代码的名字一致而已。
并且其有做浏览器兼容处理
stopPropagation()方法是jquery的方法，名字与js底层代码的名字一致。
其有做浏览器兼容处理
-------------------------------------------------------------------------------
四. 动画效果
1. 基本动画
该动画效果的本质是 宽度、高度、透明度、display 在变化。
show(speed, [callback])
显示隐藏的匹配元素
hide(speed, [callback])
隐藏显示的元素
toggle()
切换元素的可见状态
toggle(switch)
根据switch参数切换元素的可见状态
（ture为可见，false为隐藏）。
toggle(speed, ?[callback])
以优雅的动画切换所有匹配的元素可见状态
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1() {
//隐藏
//$().hide([速度毫秒,回调函数]);
//回调函数：效果呈现完毕会自动调用函数执行
$('div').hide(3000, function() {
alert('我消失了');
});
}
function f2() {
//显示
//$().show([速度,回调函数]);
//回调函数：效果呈现完毕会自动调用函数执行
$('div').show(3000, function() {
alert('我又回来了');
});
}
function f3() {
//$('div').toggle(2000);
$('div').toggle(false);
}
</script>
<style type="text/css">
div {
width: 300px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div>today is rain</div>
<br />
<input type="button" value="隐藏" onclick="f1()" />
<input type="button" value="显示" onclick="f2()" />
<input type="button" value="开关" onclick="f3()" />
</body>
</html>
------------------------------------------------------------------
2. 垂直动画
效果的本质： 高度、display 在变化
slideDown(speed, [callback])
显示元素
slideUp(speed, [callback])
隐藏元素
slideToggle(speed, [callback])
切换所有匹配元素的可见性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1() {
//隐藏
//$().slideUp(速度毫秒=默认时间,[,回调函数]);
$('div').slideUp(5000);
}
function f2() {
//显示
//$().slideDown([速度=默认时间,回调函数]);
$('div').slideDown(2000);
}
function f3() {
//开关效果
//$().slideToggle(速度时间，回调函数);
$('div').slideToggle(500);
}
$(function() {
setInterval("f3()", 5000);
})
</script>
<style type="text/css">
div {
width: 300px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<h2>垂直动画效果</h2>
<div>today is rain</div>
<br />
<input type="button" value="隐藏" onclick="f1()" />
<input type="button" value="显示" onclick="f2()" />
<input type="button" value="开关" onclick="f3()" />
</body>
</html>
-------------------------------------------------------------------
3. 颜色渐变动画
fadeIn(speed, [callback])
不透明度的变化来实现所有匹配元素的淡入效果 (显示)
fadeOut(speed, [callback])
通过不透明度的变化来实现所有匹配元素的淡出效果 (隐藏)
fadeTo(speed, opacity, [callback])
把所有匹配元素的透明度以渐进方式调整到指定的不透明度
fadeToggle(speed,? [callback])
通过不透明度的变化来开关所有匹配元素的淡入和淡出效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1() {
//隐藏
//$().fadeOut(速度毫秒=默认时间,[,回调函数]);
$('div').fadeOut(2000);
}
function f2() {
//显示
//$().fadeIn([速度=默认时间,回调函数]);
$('div').fadeIn(2000);
}
function f3() {
//开关效果
//$().fadeToggle(速度时间，回调函数);
$('div').fadeToggle(3000);
}
</script>
<style type="text/css">
div {
width: 300px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<h2>颜色渐变动画效果</h2>
<div>today is rain</div>
<br />
<input type="button" value="隐藏" onclick="f1()" />
<input type="button" value="显示" onclick="f2()" />
<input type="button" value="开关" onclick="f3()" />
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="./jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
$('div').hide(2000,f2);
}
function f2(){
//显示
$('div').css('background-color','blue');
$('div').slideDown(2000,f3);
}
function f3(){
$('div').css('background-color','purple');
$('div').slideUp(2000,f4);
}
function f4(){
$('div').css('background-color','orange');
$('div').fadeIn(2000,function(){
alert('ok, it feel good');
});
}
</script>
<style type="text/css">
div{width:300px; height:200px; background-color:green;}
</style>
</head>
<body>
<h2>动画效果联合</h2>
<div>today is rain</div>
<br />
<input type="button" value="触发" onclick="f1()" />
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="./jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1(){
//给div层设置指定的透明度
//$('div').fadeTo(2000,透明度 清楚0-1不清楚,回调函数);
$('#son').fadeTo(0,0.2);
}
</script>
<style type="text/css">
#pat{width:400px; height:300px; background-color:green;}
#son{width:200px; height:100px; background-color:blue;
position:absolute; left:350px;
}
</style>
</head>
<body>
<h2>颜色渐变动画效果</h2>
<div id="pat"><div id="son">today is rain</div></div>
<br />
<input type="button" value="触发" onclick="f1()" />
</body>
</html>
--------------------------------------------------------------------------
五．jquery封装的ajax
具体操作：
$.get(url [,data] [,function(msg){}回调函数] [, dataType]);
data:给服务器传递的数据，请求字符串 、json对象 都可以设置
funtion(msg){}：回调函数，ajax请求完成后调用该函数，可以在此函数完成ajax的后续处理，msg泛指从服务器传递回来的信息
dataType：服务器返回数据类型，html、text、xml、json
$.post(url [,data] [,fn回调函数] [, dataType]);
该方法与$.get()方法使用完全一致，不同的是其为post方式请求
给服务器传递数据的时候，不需要设置header头
(以上两种ajax请求是异步的，如果需要设置同步请求，就换其他方法)
$.ajax({ //json对象
url:请求地址,
[data]:给服务器传递的数据(请求字符串/json对象)
[dataType]:默认字符串返回信息，数据从服务器返回格式html、text、xml、json
[type]:[get]/post请求方式
[success]:function(msg){} ajax成功请求后的回调函数，可以做后续处理使用
msg泛指服务器返回来的信息
async:[true]异步/false同步，
cache:[true]缓存/false不缓存,
})
$.get()的ajax的各种使用(封装层次稍高，可设置参数较少)：
相对底层的ajax方法使用$.ajax(json对象)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
function f1() {
$.ajax({
url: './11.php',
data: {
name: 'kitty',
age: 5
},
dataType: 'json',
type: 'post',
success: function(msg) {
alert(msg);
console.log(msg.city);
console.log(msg.temp);
}
});
}
</script>
<style type="text/css">
div {
width: 300px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<h2>Ajax请求</h2>
<div>today is rain</div>
<br />
<input type="button" value="触发" onclick="f1()" />
</body>
</html>
----------------------------------------------------------------------
总结:
1. 事件绑定
bind(类型，处理函数);
bind(类型1 类型2 类型3,处理函数);
bind(json对象);
取消绑定
$().unbind()
$().unbind(类型);
$().unbind(类型，有名函数处理)
2. 动画效果
基本：show(速度,function) hide(速度,function)
垂直：slideDown() slideUp()
颜色渐变： fadeIn() fadeOut() fadeTo()
3. ajax使用
$.get(url,data,funciton,dataType)
$.post(url,data,funciton,dataType)
$.ajax({
url:
data:
dataType:
type:
success:
})
-------------------------------------------------------------------
六. 地区三级联动
技术点：jquery + ajax + xml/json
1. 省份的获取和显示
通过“ajax+jquery”获得xml信息从中解析出省份信息并显示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
var xmldom = null; //声明一个全局变量，用于存储第一次请求回来的xml信息
function show_province() {
//①ajax去服务器把xml的地区信息都给请求回来
//②从中赛选“省份”信息并显示
$.get('js/ChinaArea.xml', function(msg) {
//对服务器返回的xml信息进行处理
//alert(msg);//object XMLDocument
xmldom = msg;
//我们需要供最大的 XMLDocument 节点里边获得 province 元素节点
//province 是 XMLDocument 的子节点
//从父节点获得内部的子节点 $(父节点).find(子节点选择器) 方法
$(msg).find('province').each(function(k, v) {
//this分别依次代表每个province的dom对象
//获得省份的名称并显示给 下拉列表
var nm = $(this).attr('province');
var id = $(this).attr('provinceID');
//给select框"追加"省份名称
$('#province').append("<option value='" + id + "'>" + nm + "</option>");
});
}, 'xml');
}
$(function() {
show_province();
});
//根据选取的省份显示对应的城市
function show_city() {
//① 获得选取的省份的id信息
var pid = $('#province option:selected').val();
var two_pid = pid.substr(0, 2); //只要前两位即可
//② 获得选取省份下的城市信息
// 限制条件：City标签 和 本身id的前两位与省份id的前两位一致
console.log($(xmldom).find('City[CityID^=' + two_pid + ']'));
$('#city').empty(); //清除旧节点
$('#city').append('<option value="0">-请选择-</option>');
//遍历城市信息，并显示到页面上
$(xmldom).find('City[CityID^=' + two_pid + ']').each(function() {
//this分别依次代表每个City节点的dom对象
var nm = $(this).attr('City');
var id = $(this).attr('CityID');
//把nm与option做结合显示到页面上
$('#city').append("<option value='" + id + "'>" + nm + "</option>");
});
}
</script>
<style type="text/css">
</style>
</head>
<body>
<h2>地区三级联动</h2> 省份：
<select id="province" onchange="show_city()">
<option value="0">-请选择-</option>
</select> 城市：
<select id="city">
<option value="0">-请选择-</option>
</select> 地区：
<select id="area">
<option value="0">-请选择-</option>
</select>
</body>
</html>
扫一扫
310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
