为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 jquery复习总结

jquery复习总结

标签：
JQuery

目录

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>



点击查看更多内容
发表于 2018.11.11 21:49， 共 1355 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

代码写到手抽筋

JAVA开发工程师
手记
篇
粉丝
26
获赞与收藏
113

关注作者，订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消