jQuery_00
jQuery_00
看官方文档吧
jQuery简介
jQuery特点
WRITE LESS,DO MORE.
- 免费
- 开源
- 轻量级
- 兼容性高
- 文档详细
- 插件多
JavaScript类库
封装了很多预定义的对象和实用函数,能帮助使用者建立有高难度交互客户端页面,并且兼容各大浏览器。
jQuery的分类
| Version | Apply |
|---|---|
| WEB | 学习研究 |
| UI | 集成UI组件 |
| mobile | 移动端开发 |
| qunit | js测试 |
版本说明
| 版本 | 用途 |
|---|---|
| jquery-1.11.0.js | 源码js,可直接使用,开发中使用,可查看源码 |
| jquery-1.11.0.min.js | 压缩版(回车换行删掉,变量简化),生产环境下使用 |
jQuery基本使用
- 导入
<script type="text/javascript" src="../js/jquery-1.8.3.js">script>- jQuery页面加载
$(document).ready(function(){
alert("页面加载");
});- jQuery获取数据
$(“选择器”) == jQuery(“选择器”)
<body>
<input type="text" id="username" value="jack"/>
<script type="text/javascript">
var username = $("#username");
// val()函数 用于获得 value属性的值
alert(username.val());
script>
body>- DOM和jQuery对象的转换
<body>
<input type="text" id="username" value="jack"/>
<script type="text/javascript">
//1 使用javascript获得value值
var username = document.getElementById("username");
//alert(username.value);
//2 将 dom对象 转换 jQuery对象
// * 语法：$(dom对象)
// * 建议：jQuery对象变量名，建议为$开头
var $username = $(username);
// alert($username.val());
//3 将 jQuery对象 转换 dom对象
//3.1 jQuery对象内部使用【数组】存放所有的数据，可以用数组的下标获取（索引）
var username2 = $username[0];
alert(username2.value);
//3.2 jQuery提供函数 get() 转换成dom对象
var username3 = $username.get(0);
alert(username3.value);
script>
body>选择器
基本
- #id: id选择器
- element: 标签选择器
- .class: 类选择器
- s1,s1,…: 多选择器,将多个选择器添加到一个数组中
层级
- A B ，获得A元素内部所有的B后代元素。（爷孙）
- A > B ，获得A元素内部所有的B子元素。（父子）
- A + B ，获得A元素后面的第一个兄弟B。（兄弟）
- A ~ B ，获得A元素后面的所有的兄弟B。（兄弟）
基本过滤
- :first , 第一个
- :last ,最后一个
- :eq(index) ，获得指定索引
- :gt(index) 大于
- :lt(index) 小于
- :even 偶数，从 0 开始计数。例如：查找表格的1、3、5…行（即索引值0、2、4…）
- :odd 奇数
- :not(selector) 去除所有与给定选择器匹配的元素
- :header 获得所有标题元素
- :animated 获得所有动画
- :focus 获得焦点
内容过滤
- :empty 当前元素是否为空（是否有标签体–子元素、文本）
- :has(…) 当前元素，是否含有指定的子元素
- :parent 当前元素是否是父元素
- :contains( text ) 标签体是否含有指定的文本
仿HTML的placeholder功能
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿HTML的placeholder功能title>
<script src="js/jquery-1.8.3.js" type="text/javascript">script>
<script type="text/javascript">
$(document).ready(function() {
$("input[type='text']").on("blur focus", function() {
//1 获得默认值
var dv = $(this).attr("defaultValue");
//2 判断是否获得焦点
if($(this).is(":focus")) {
//2.1 获得焦点，如果是默认值 ，清空value值 ，this 当前执行对象，是dom对象
if($(this).val() == dv) {
$(this).val("");
$(this).css("color", "#000");
}
} else {
//2.2 失去焦点，如果内容为空，设置默认值 , 或 $(this).val().length == 0
if($(this).val() == "") {
$(this).val(dv);
$(this).css("color", "#999");
}
}
});
});
script>
head>
<body>
<input type="text" value="请输入账号" defaultValue="请输入账号" style="color:#999" />
<input type="text" value="请输入密码" defaultValue="请输入密码" style="color:#999" />
body>
html>可见性过滤选择器
- :hidden 隐藏。特指 ，获得
- :visible 可见（默认）
<script type="text/javascript">
$(document).ready(function(){
//
$("#b1").click(function(){
$("div:visible").css("background-color","#ff0");
});
//
$("#b2").click(function(){
$("div:hidden").css("background-color","#ff0").show(1000);
});
//
$("#b3").click(function(){
//alert($("input:hidden").val()); //获得值时，默认第一个的值
// each函数
$("input:hidden").each(function(){
alert( $(this).val() );
});
});
//
$("#b4").click(function(){
// $.each 全局函数
// * 回调函数
// ** 参数1：index 遍历索引
// ** 参数2：domEle 当前遍历的对象，及==this
//
$.each($("input:hidden"),function(index, domEle){
alert(index + " @ " + $(domEle).val() );
});
});
});
script>属性
- [属性名] 获得指定的属性名的元素
- [属性名=值] 获得属性名 等于 指定值的 的元素【1】
- [属性名!=值] 获得属性名 不等于 指定值的 的元素
[as1][as2][as3]…. 复合选择器，多个条件同时成立。类似 where …and…and【2】
[属性名^=值] 获得以属性值 开头 的元素
- [属性名$=值] 获得以属性值 结尾 的元素
- [属性名*=值] 获得 含有属性值 的元素
子元素过滤
- :nth-child(index) ，获得第几个孩子，从1开始。
- :first-child ， 获得第一个孩子
- :last-child ， 获得最后孩子
- :only-child ， 获得独生子
表单过滤
- :input 所有的表单元素。（ / / / ）
- :text 文本框
- :password 密码框
- :radio 单选
- :checkbox 复选框
- :submit 提交按钮
- :image 图片按钮
- :reset 重置按钮
- :file 文件上传
- :hidden 隐藏域 ,还可以获得 其他值：、
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>09-表单选择器.htmltitle>
<script src="../js/jquery-1.8.3.js" type="text/javascript">script>
<script type="text/javascript">
//
$(document).ready(function(){
var $alltext = $("#form1 :text");
var $allpassword= $("#form1 :password");
var $allradio= $("#form1 :radio");
var $allcheckbox= $("#form1 :checkbox");
var $allsubmit= $("#form1 :submit");
var $allimage= $("#form1 :image");
var $allreset= $("#form1 :reset");
var $allbutton= $("#form1 :button"); // 和 都可以匹配
var $allfile= $("#form1 :file");
var $allhidden= $("#form1 :hidden"); // 和都可以匹配.
var $allselect = $("#form1 select");
var $alltextarea = $("#form1 textarea");
var $AllInputs = $("#form1 :input"); //#form1 表单中，所有的表单元素，可以获得input、select等
var $inputs = $("#form1 input"); //#form1表单中，所有的input元素
$("div").append(" 有" + $alltext.length + " 个（ :text 元素）
")
.append(" 有" + $allpassword.length + " 个（ :password 元素）
")
.append(" 有" + $allradio.length + " 个（ :radio 元素）
")
.append(" 有" + $allcheckbox.length + " 个（ :checkbox 元素）
")
.append(" 有" + $allsubmit.length + " 个（ :submit 元素）
")
.append(" 有" + $allimage.length + " 个（ :image 元素）
")
.append(" 有" + $allreset.length + " 个（ :reset 元素）
")
.append(" 有" + $allbutton.length + " 个（ :button 元素）
")
.append(" 有" + $allfile.length + " 个（ :file 元素）
")
.append(" 有" + $allhidden.length + " 个（ :hidden 元素）
")
.append(" 有" + $allselect.length + " 个（ select 元素）
")
.append(" 有" + $alltextarea.length + " 个（ textarea 元素）
")
.append(" 表单有 " + $inputs.length + " 个（input）元素。
")
.append(" 总共有 " + $AllInputs.length + " 个(:input)元素。
")
.css("color", "red")
//显示所有的隐藏标签名称
$allhidden.each(function(){
// $("div").append("
").append($(this).get(0).nodeName);
$("div").append("
").append(this.nodeName);
});
$("form").submit(function () { return false; }); // return false;不能提交.
});
//]]>
script>
head>
<body>
<form id="form1" action="#">
<input type="button" value="Button"/><br/>
<input type="checkbox" name="c"/>1<input type="checkbox" name="c"/>2<input type="checkbox" name="c"/>3<br/>
<input type="file" /><br/>
<input type="hidden" /><div style="display:none">testdiv><br/>
<input type="image" src="4-027.jpg" style="width:30px;height:30px;" /><br/>
<input type="password" /><br/>
<input type="radio" name="a"/>1<input type="radio" name="a"/>2<br/>
<input type="reset" /><br/>
<input type="submit" value="提交"/><br/>
<input type="text" /><br/>
<select><option>Optionoption>select><br/>
<textarea rows="5" cols="20">textarea><br/>
<button>Buttonbutton><br/>
form>
<div>div>
body>
html>
表单对象属性过滤选择器
- :enabled 可用
- :disabled 不可用。 或 或
- :checked 选中（单选框radio、复选框 checkbox）
- :selected 选择（下拉列表 select option）
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>08-表单对象属性过滤选择器.htmltitle>
<script src="../js/jquery-1.8.3.js" type="text/javascript">script>
<script src="./script/assist.js" type="text/javascript">script>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script type="text/javascript">
$(document).ready(function(){
//
$("#btn1").click(function(){
$("input:enabled").val("aaaaaaaaaaa");
});
//
$("#btn2").click(function(){
$("input:disabled").val("bbbbbbbbb");
});
//
$("#btn3").click(function(){
// var s1 = $("[name='newsletter']:checked").length;
var s1 = $("[name='newsletter']:checked").size();
alert(s1);
});
//
$("#btn4").click(function(){
// 获得选中标签
$(":selected").each(function(){
// val() 获得option时，如果没有value值，将获得text的值
// html() 获得标签体的内容
$("#selectDivId").append( $(this).html() );
});
});
});
script>
head>
<body>
<h3> 表单对象属性过滤选择器.h3>
<button type="reset">重置所有表单元素button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面label>
<br /><br />
<button id="btn1">对表单内 可用input 赋值操作.button>
<button id="btn2">对表单内 不可用input 赋值操作.button>
<button id="btn3">获取多选框选中的个数.button>
<button id="btn4">获取下拉框选中的内容.button>
<br /><br />
可用元素：<input name="add" value="可用文本框"/> <br/>
不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>
可用元素： <input name="che" value="可用文本框" /><br/>
不可用元素：<input name="name" disabled="disabled" value="不可用文本框"/><br/>
<br/>
多选框：<br/>
<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
<input type="checkbox" name="newsletter" value="test2" />test2
<input type="checkbox" name="newsletter" value="test3" />test3
<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
<input type="checkbox" name="newsletter" value="test5" />test5
<div id="checkboxDivId">div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
下拉列表1：<br/>
<select name="test" multiple="multiple" style="height:100px">
<option>浙江option>
<option selected="selected" value="hunan">湖南option>
<option>北京option>
<option selected="selected">天津option>
<option>广州option>
<option>湖北option>
select>
<br/><br/>
下拉列表2：<br/>
<select name="test2" >
<option>浙江option>
<option>湖南option>
<option selected="selected">北京option>
<option>天津option>
<option>广州option>
<option>湖北option>
select>
<br/><br/>
<div id="selectDivId">div>
body>
html>
选择器案例
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态列表效果.htmltitle>
<style type="text/css">
*{ margin:0; padding:0;}
body {font-size:12px;text-align:center;}
a { color:#04D; text-decoration:none;}
a:hover { color:#F50; text-decoration:underline;}
.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
.showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;}
.promoted a { color:#F50;}
style>
<script src="../js/jquery-1.8.3.js" type="text/javascript">script>
<script type="text/javascript">
$(document).ready(function(){
// 从第5个开始，不要最后一个，控制显示或隐藏
//1 隐藏
var $allLi = $("li:gt(4):not(:last)");
$allLi.hide();
//2 点击显示
$("span").click(function(){
// $allLi.show();
// $allLi.toggle();
//判断是否隐藏
if( $allLi.is(":hidden") ){
$allLi.show(1000);
$(this).html("隐藏部分品牌");
} else {
$allLi.hide(1000);
$(this).html("显示全部品牌");
}
});
});
script>
head>
<body>
<div class="SubCategoryBox">
<ul>
<li><a href="#">佳能a><i>(30440)i>li>
<li><a href="#">索尼a><i>(27220)i>li>
<li><a href="#">三星a><i>(20808)i>li>
<li><a href="#">尼康a><i>(17821)i>li>
<li><a href="#">松下a><i>(12289)i>li>
<li><a href="#">卡西欧a><i>(8242)i>li>
<li><a href="#">富士a><i>(14894)i>li>
<li><a href="#">柯达a><i>(9520)i>li>
<li><a href="#">理光a><i>(4114)i>li>
<li><a href="#">奥林巴斯a><i>(12205)i>li>
<li><a href="#">明基a><i>(1466)i>li>
<li><a href="#">爱国者a><i>(3091)i>li>
<li><a href="#">其它品牌相机a><i>(7275)i>li>
ul>
<div class="showmore">
<a href="#"><span>显示全部品牌span>a>
div>
body>
html>
属性和CSS
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title heretitle>
<script type="text/javascript" src="../js/jquery-1.8.3.js">script>
<script type="text/javascript">
jQuery(document).ready(function(){
//1 设置姓名文本框不可用
// $("[name='username']").attr("disabled","disabled");
$("[name='username']").attr("disabled","");
// 可用，必须移除
$("[name='username']").removeAttr("disabled");
//2 class
$("#buttonId").click(function(){
$("[name='username']").toggleClass("textClass");
});
//3 text /html
// alert($("div").text());
// alert($("div").html());
// $("div").text("你点我呀");
// $("div").html("你点我呀");
//4 css
$("div").css("border","1px solid #999");
$("div").css({
"width":"200px",
"height":"200px",
"font-size":"60px",
"color":"#f00"
});
});
script>
<style type="text/css">
.textClass {
background-color: #ff0000;
}
style>
head>
<body>
<h3>表单h3>
<form action="">
<table border="1">
<tr id="tr1">
<td><label>姓名label>td>
<td><input type="text" name="username" value="jack" />td>
tr>
<tr>
<td><span>密码span>td>
<td><input type="password" name="password" />td>
tr>
<tr>
<td>性别td>
<td>
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" />女
td>
tr>
<tr>
<td>爱好td>
<td>
<input type="checkbox" name="hobby" value="1"/>抽烟
<input type="checkbox" name="hobby" value="2"/>喝酒
<input type="checkbox" name="hobby" value="3"/>烫头
td>
tr>
<tr>
<td>我的照片td>
<td><input type="file" name="image" />td>
tr>
<tr>
<td>学历td>
<td>
<select name="edu">
<option value="1">小班option>
<option value="2">中班option>
<option value="3">大班option>
<option value="4">学前班option>
select>
td>
tr>
<tr>
<td>td>
<td>
<button id="buttonId" type="button">普通按钮button>
<input type="submit" value="提交按钮" />
<input type="reset" value="重置按钮" />
<input type="image" value="图片按钮" src="../image/0050.jpg" style="height: 30px;width: 50px" />
td>
tr>
table>
form>
<h3>公告信息h3>
<div>
未满18慎进
div>
body>
html>文档处理
内部插入
- A.append(B) 将B插入到A的内部后面（之后的串联操作，操作A）
<A>
....
<B>B>
<A>- A.prepend(B) 将B插入到A的内部前面
<A>
<B>B>
....
<A>外部插入
- A.after(B) , 将B插入到A后面（同级）
<A>A>
<B>B>- A.before(B) ，将B插入到A前面
<B>B>
<A>A>删除
- empty() 清空标签体
- remove() 删除当前对象。如果之后再使用，元素本身保留，绑定事件 或 绑定数据 都会被移除
- detach() 删除当前对象。如果之后再使用，元素本身保留，绑定事件 或 绑定数据 都保留
绑定数据
data(name) 获得
data(name,value) 设置
<html>
<head>
<title>05_删除节点.htmltitle>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.3.js">script>
head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京<p>海淀区p>li>
<li id="tj" name="tianjin">天津<p>河西区p>li>
<li id="cq" name="chongqing">重庆li>
ul>
<p class="hello">Hellop> how are <p>you?p>
body>
<script type="text/javascript">
// 将city移除，再追加body后面
//#1 绑定事件
$("#city").click(function(){
alert("O(∩_∩)O~");
});
//#2 绑定数据
$("#city").data("呵呵","呵呵");
//1 移除
var $city = $("#city").remove(); //移除绑定的事件、移除绑定的数据
// var $city = $("#city").detach(); //保留绑定的事件、保留绑定的数据
//2 追加
$("body").append($city);
//#3获得绑定的数据
alert($("#city").data("呵呵"));
script>
html>
复制
clone() 克隆
even ：指示事件处理函数是否会被复制。V1.5以上版本默认值是：false
<html>
<head>
<title>06_复制节点.htmltitle>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.3.js">script>
head>
<body>
<button class="save">保存button><br>
<p>段落p>
body>
<script type="text/javascript">
$(".save").click(function(){
var $new = $(this).clone(true);
$("body").append($new);
});
script>
html>
替换
- A.replaceWith(B) ，使用A将B替换掉
- A.replaceAll(B) ，使用B将A替换掉
<html>
<head>
<title>07_替换节点.htmltitle>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.3.js">script>
head>
<html>
<p>段落p>
<p>段落p>
<p>段落p>
<button>保存button>
html>
<script type="text/javascript">
// $("p").replaceWith("xxx
");
$("xxx
").replaceAll("p");
script>
html>
包裹
<html>
<head>
<title>10_包裹节点.htmltitle>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.3.js">script>
head>
<body>
<strong title="jQuery">jQuerystrong>
<strong title="jQuery">jQuerystrong>
body>
<script type="text/javascript">
//每一个包
// $("strong").wrap("");
//一个包
// $("strong").wrapAll("");
//标签体
$("strong").wrapInner("");
script>
html>