您的位置：首页 > Web前端 > JQuery

jquery复习总结二

2017-07-22 12:12 429 查看
目录
jquery和html的整合
jquery入门
获取一个jquery对象
dom对象和jquery对象之间的转换
页面加载:
派发事件:
案例：
jquery中效果:
隐藏或展示
滑入或滑出
淡入或淡出
弹出广告案例
案例1-步骤分析（定时器）
选择器总结:
基本选择器
层次选择器
基本过滤选择器:
内容过滤:
可见过滤:
属性过滤器:
表单过滤:
案例2-隔行换色
属性和css操作总结:
对属性的操作:
对css操作:操作元素的style属性
案例3-全选或者全不选(prop操作属性)
案例4-省市联动
技术:
遍历数组
设置或者获取value属性
设置获取获取标签体的内容
创建一个元素:
案例代码实现
文档操作:
内部插入
外部插入
删除
案例5-左右移动
步骤分析:
1.确定事件
2.编写函数:
技术分析:
案例代码实现

选择器总结:

基本选择器

$("#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(){
$("#btn1").click(function(){
$("#one").css("background-color","#ff0");
});

$("#btn2").click(function(){
$(".mini").css("background-color","#ff0");
});

$("#btn3").click(function(){
$("div").css("background-color","#ff0");
});

$("#btn4").click(function(){
$("*").css("background-color","#ff0");
});

$("#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(){
$("#btn1").click(function(){
$("body div").css("background-color","#f0f");
});

$("#btn2").click(function(){
$("body>div").css("background-color","#f0f");
});

$("#btn3").click(function(){
$("#one+div").css("background-color","#f0f");
});

$("#btn4").click(function(){
$("#two~div").css("background-color","#f0f");
});
});
/* <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"/> */
</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 第一个
:last 最后一个
:odd 索引奇数
:even 索引偶数
:eq(index) 指定索引
:gt(index) >
:lt(index) <

内容过滤:

:has("选择器"):包含指定选择器的元素
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$("div:has('.mini')").css("background-color","#0ff");
});
});
</script>

可见过滤:

:hidden 在页面不展示元素 一般指 input type="hidden" 和 样式中display:none
:visible
<script type="text/javascript">
$(function(){
$("#b1").click(function(){
$("div:visible").css("background-color","#0ff");
});

$("#b2").click(function(){
$("div:hidden").css("background-color","#0ff").show(1000);
});
});
</script>

属性过滤器:

[属性名]
[属性名="值"]

表单过滤:

:input 所有的表单子标签 input select textarea button
//input

<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
//alert($("#form1 :input").size());
alert($("#form1 :input").length());
});
});
</script>
////////////////////////

案例2-隔行换色

技术分析:
1.页面加载成功
2.获取所有的奇数行 添加一个css
3.获取所有的偶数行 添加一个css
<script>
$(function(){
/* $("tr:odd").css("background-color","#0ff");
$("tr:even").css("background-color","#f0f"); */
$("tr:gt(0):odd").css("background-color","#0ff");
//tr:gt(0):选择索引值大于0的tr元素
$("tr:gt(0):even").css("background-color","#f0f");
});
</script>

属性和css操作总结:

对属性的操作:

attr():设置或者获取元素的属性
方式1:获取
attr("属性名称")
方式2:设置一个属性
attr("属性名称","值");
方式3:设置多个属性 json
attr({
"属性1":"值1",
"属性2":"值2"
})

removeAttr("属性名称"):移除指定属性

//添加class属性的时候
//attr("class","值");
addClass("指定的样式值"); 相当于 attr("class","指定的样式值");
removeClass("指定的样式值");
<script type="text/javascript">
$(document).ready(function(){
//1.1给username添加title属性
var $username=$("[name='username']");
$username.attr("title","姓名");
//1.2获取username的title属性
alert($username.attr("title"));

//1.3给username添加value和class属性
$username.attr({
"value":"许多多",
"class":"textClass"
});

//1.4删除username的class属性
$username.removeAttr("class");

//2.1给username添加一个名为textClass的样式
$username.addClass("textClass");

//2.2删除username的名为textClass的样式
$username.removeClass("textClass");

});
</script>
<style type="text/css">
.textClass {
background-color: #ff0;
}
</style>

对css操作:操作元素的style属性

css():获取或者设置css样式
方式1:获取
css("属性名")
方式2:设置一个属性
css("属性名","值")
方式3:设置多个
css({
"属性1":"值1",
"属性2":"值2"
});
获取元素的尺寸:
width()
height()
<script type="text/javascript">
//4.1 给div添加边框样式
var $div=$("div");
$div.css("border","1px solid red");

//4.2 获取div的表框样式
//alert($div.css("border"));

//4.3 给div添加多种样式
$div.css({
"width":"100px",
"height":"100px",
"background-color":"#0ff"
});

//5 获取div的位置
alert($div.offset().left());

//6 获取div的高和宽
Alert($div.width());
});
</script>

案例3-全选或者全不选(prop操作属性)

需求:
就是将内容中复选框的选中状态和最上面的复选框状态保持一致
步骤分析:
1.确定事件 复选框的单击事件
2.函数中
a.获取该复选框的选中状态 attr(获取不了checked属性)|prop
b.获取所有的复选框修改他们的状态
注意:
若jquery版本>1.6 统一使用 prop操作元素的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){

$("#selectAll").click(function(){
//获取当前元素对象：this获取的是当前dom对象
//alert($(this).prop("checked"));
$(".itemSelect").prop("checked",$(this).prop("checked"));
});
});
</script>
<body>
<table id="tab1" border="1" width="800" align="center" >
<tr>
<td colspan="5"><input type="button" value="添加"/> <input type="button" value="删除"></td>
</tr>
<tr>
<th><input type="checkbox" id="selectAll"></th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery
相关文章推荐
新的分享
章节导航