Web前端基础——jQuery（三）

本文主要从以下几方面介绍jQuery应用中的内容：

1 jQuery 节点遍历
2 jQuery 中的过滤器
3 jQuery 属性操作
4 jQuery Dom节点操作
5 几个jQuery例子
6 jQuery 中的事件
7 jQuery 中的动态效果

一、 jQuery 节点遍历

== next() //用于获取节点之后的第一个同辈元素注意,next() 中可以加过滤器例如 next("div")

== nextAll() //获取节点之后的所有同辈元素(注意: 是节点之后,这一点是和siblings不同的)

<html>

     <head>

      <script type="text/javascript" src="js\jquery-1.4.4.js"></script>

      <script type="text/javascript">

       $(function(){

        $("#ulAAAA li").click(function(){

         $(this).css("background","yellow");

         $(this).next().css("background","pink");

        });

       });

      </script>

     </head>

     <body>

      <form>

            <table id="table1" width="80%" border="1" cellspacing=0>

            <tr><td>姓名</td><td>年龄</td><td>职业</td><td>爱好</td></tr>

            <tr style="display:none"><td>杨帆</td><td>38</td><td>运营</td><td>唱歌（这一行不可见）</td></tr>

            <tr><td>王小花</td><td>23</td><td>设计师</td><td>绘画</td></tr>

            <tr><td>张明明</td><td>34</td><td>产品经理</td><td>书法</td></tr>

            <tr><td>赵志明</td><td>21</td><td>大学生</td><td>计算机</td></tr>

            <tr><td>马大利</td><td>46</td><td>董事长</td><td>旅游</td></tr>

            </table>

      </form>

      <ul id="ulAAAA">

       <li>刘备</li>

       <li>关羽</li>

       <li>张飞</li>

       <li>诸葛</li>

       <li>孙权</li>

       <li>曹操</li>

       </ul>

     </body>

</html>

==siblings() //获取所有的同辈元素 (可以不是同类的,只要是同辈就行) 注意它也可以传参例如 siblings(li)

//表格的被点击行高亮 :

("#table1 tr").click(function(){

   $(this).css("background","pink");

   $(this).siblings().css("background","white");

});

//用链式风格写:

//本例为用鼠标滑过的时候,加亮滑过的表格

$("#table1 tr").mouseover(function(){

$(this).css("background","springgreen").siblings().css("background","white");

     });

//星级评分的例子

     $(function(){

     $("#table2 td").html("<img src='star.jpg' />");

     $("#table2 td").mouseover(function(){

     $("#table2 td").html("<img src='star2.jpg' />" );

     $(this).nextAll().html("<img src='star.jpg' />" );

    });

});

二、jQuery 中的过滤器

$("#table1 tr:eq(3)").css("background","green"); //将table1中第四行置成绿色 这是前面用的

$("#table1 tr").eq(2).css("background","red");  //这个用的是过滤

注意: 过滤与上面的不同之处在于,过滤,是对已选出来的元素,再进行过滤

例子：

//第一行加大,变粗体

$("#tableScore tr:first").css("font-size","35").css("font-weight","bold");

//第二,三,四行变红

$("#tableScore tr:gt(0):lt(3)").css("color","red") //注意,它是从前一个gt(0)选择后的集合中再过滤

//最后一行背景变绿色

$("#tableScore tr:last").css("color","green")

//改变最后一行,最后一个单元格的文字

$("#tableScore tr td:last").html("打狼了");

//隔行变色

$("#tableScore tr:gt(0):even").css("background","pink"); //注意,隔行变色,要把第一行刨出去,所以用了 gt(0)

//$("#table1 tr:gt(0):even").css("background","pink").next().css("background","silver") 这样也行, next() 取的是该奇数行下面的一行

三、jQuery 属性操作

在帮助文档的属性标签下,有三大类属性 CSS HTML代码,文本/值

== 属性

--attr(key,value) //为所有匹配的元素设置一个属性值

<img />     <img />

$("img").attr("src","star2.jpg").attr("title","这是动态加上的属性");

--attr(key)

alert($("img").attr('src'));             

alert($("img").attr('dog')); //可以取自己写上去的属性值

--attr(properties) // 将一个“名/值”形式的对象设置为所有匹配元素的属性(即可同时设置多个属性)

$("img").attr({ src: "test.jpg", alt: "Test Image" });

--removeAttr //移除属性

$("img").removeAttr("src");

== CSS

--addClass(class) //为每个匹配的元素添加指定的css类名,注意,它会进行叠加

//例子,点击一个按纽,给一个<p>加上样式

.waring{

    color: red;

}

   <p> dog</p>

     $("button").click(function(){

     $("p").addClass("waring");

});

//  例子,处理文本框的得到焦点和失去焦点事件

$(function(){

$("#userName").focus(function(){

$("#lblMsg").removeClass("ok").addClass("info");

}).blur(function(){

$("#lblMsg").removeClass("info").addClass("ok");

    });

});

// 上例也可以这样写

$(function(){

$("#userName").focus(function(){

$("#lblMsg").attr("class","info");   //这里的class 也可以写成 className

                              }).blur(function(){

$("#lblMsg").attr("class","error");

                              });

    });

});

--toggleClass(class) //如果存在（不存在）就删除（添加）一个类

--removeClass([class]) // 删除css

$("p").removeClass("waring");

== 文本/值

--html() //取得第一个匹配元素的html内容

--html(val) //设置每一个匹配元素的html内容

--text() //略

--text(val) //略

--val() //获得第一个匹配元素的当前值

注意：在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。

$(function(){

$("button").click(function(){

$("p").empty();

$("p").append(

  "单选的值:"+$("#country").val() +"<br>"+ "多选的值" +$("#badMan").val().join('-')

   );

});

 });

<select id="country">

  <option>中国</option>

  <option selected>德国</option>

  <option>马来西亚</option>

</select>

<select id="badMan" multiple="multiple">

  <option selected="selected">安倍晋三</option>

  <option>秦桧</option>

  <option selected="selected">奥八马</option>

</select>

<p>
.......
</p>

-- val(array) // checkbox,select,radio等都能使用为之赋值

<select id="country">

   <option>中国</option>

   <option>德国</option>

   <option>马来西亚</option>

</select>

   <hr>

<select id="badMan" multiple="multiple">

   <option selected="selected">安倍晋三</option>

   <option>秦桧</option>

   <option >奥八马</option>

</select>

<hr>

  <input type="checkbox" value="西瓜"/> check1

  <input type="checkbox" value="鱼"/> check2

  <input type="radio" value="水蜜桃"/> radio1

  <input type="radio" value="虾"/> radio2

<button>开选</button>

$("button").click(function(){

$("#country").val("马来西亚");

$("#badMan").val(["奥八马", "秦桧"]); //给能多选的下拉框同时选两个值

$("input").val(["鱼", "虾"]);

});

四、jQuery Dom节点操作

在帮助文档的文档处理项下,有四大类内部插入,外部插入,包裹,替换,删除,复制动态创建Dom结点，使用 $(html字符串)来创建Dom结点,并且返回一个jQuery对象，然后调用append等方法,将新创建的节点添加到Dom中。

//例:

$("#divNewNode").append("<a href='http://www.sin.com'>新浪</a>"); // 这个没有使用$强转也行,在帮助手册中,就没有使用强转

  <% List<CateInfo> cateList=CateDao.getCateList(); %>

  <% for(CateInfo c:cateList) { %>

$("#select1").append("<option value='<%=c.getCateId()%>'><%=c.getCateName()%></option>");

  <%

   }

  %>

});

 var link=$("<a href='http://www.sin.com'>馊狐</a>"); //本例使用了强转

 link.css("font-size",30); //因为强转后的对象就是一个jQuery对象,所以可以使用jQuery的任何方法

$("#divNewNode").append(link);

== 内部插入

---append(content) //向每个匹配的元素内部追加内容。上例用的就是这个方法

---prepend(content) //向每个匹配的元素内部前置内容。

<p>I would like to say: </p>

$("p").prepend("<b>Hello</b>");

例子:根据给定数据,动态创建一个table

var tData={"陈某":"95","张某某":"80","孙某某":"80","范跑跑":"56","杨达才":"80"};

$.each(tData,function(key,value){

var tr="<tr><td>"+key+"</td><td>"+value+"</td></tr>"  这里为什么没写 value.value? 因为它不是对象类型的,就是一个常量

$("#tableBBB").append(tr);

});

== 外部插入

----after(content) // $("p").after("<b>Hello</b>"); 注意它是添加兄弟

----before(content)

== 删除

--- remove([expr]) //从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除

<p>哈喽</p>你<p>好</p>

$("p").remove(); //结果  你

注意:remove 方法,有返回值,返回被删除的结点对象,还可以继续使用被删除的节点,比如将其移动到别的地方

比如：

ar list=$("#ul1 li").remove();

$("#ul2 ").append(list);

其实写成一句即可 $("#ul2 ").append($("#ul1 li").remove());

--- empty() ///删除匹配的元素集合中所有的子节点

<p>Hello, <span>Person</span> <a href="#">and person</a></p>

$("p").empty(); // <p></p>

--- detach([expr]) //从DOM中删除所有匹配的元素这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

//例子:

<style type="text/css">

.shengxiu{background:pink        }

</style>

    <ul id="ulRemove">

        <li>刘备</li>

        <li class="shengxiu">关雨生锈了</li>

        <li>张非</li>

        <li class="shengxiu">孙权生锈了</li>

        <li>黄盖</li>

        <li class="shengxiu">吕布生锈了</li>

    </ul>

<button id="btnRemove">除锈</button>

$("#btnRemove").click(function(){

$("#ulRemove li.shengxiu").remove();

});

//权限列表的添加

<select id="selRole" multiple="multiple" style="width:15%; height:15%">

    <option>增加</option>

    <option>删除</option>

    <option>修改</option>

    <option>查询</option>

</select>

<button id="btnGo" >>></button>

    $("#btnGo").click(function(){

    $("#descRole").append(

        $("#selRole option:selected").remove());

});

五、几个jQuery例子

//例一：设置一排复选框,在勾选时,将已经勾选的项取出,列在一个<p>内

<input type="checkbox" name="ckStudent" value="赵明明">赵明明

<input type="checkbox" name="ckStudent" value="杨显彪">杨显彪

<input type="checkbox" name="ckStudent" value="矫咪">矫咪

<input type="checkbox" name="ckPerson" value="杨国福">杨国福  //注意,它的name与其他不同,要过滤掉

<input type="checkbox" name="ckTeacher" value="老王头">老王头 //注意,它的name与其他不同,要过滤掉

    <p id="pMsg"> </p>

    $("input[name=ckStudent]").click(function(){

    var array=new Array();
    $("input[name=ckStudent]:checked").each(function(key,obj){

        array[key]=obj.value;

                          }); 

   /* 这是以前用过的,也可以

      $.each($("input[name=ckStudent]:checked"),function(key,obj){

         array[key]=obj.value;

                          });

  */

    $("#pMsg").text(" 共选中了"+array.length+"项   "+ array.join(","));

});

//例二,计算器

<input type="text" id="num1" />+<input type="text" id="num2"/><button id="btnAdd" >=</button><input type="text"  id="num3" />

 $("#btnAdd").click(function(){

    var num1=$("#num1").val();

    var num2=$("#num2").val();

    var result= parseInt(num1)+parseInt(num2);

 $("#num3").val(result);

});

//例三 10秒钟后可用的按钮

var second=10;

var interval;

$(function(){

$("#btnArgee").attr("disabled" ,true );

 interval=setInterval("tick()",1000);

});

 function tick(){

 if(second ==0){

$("#btnArgee").val("同意");

$("#btnArgee").attr("disabled" ,false );

 clearInterval(interval);

               }

else{

$("#btnArgee").val("看好点协议内容,你还有 "+second-- +" 秒");

               }

}

<button id="btnArgee">  </button>

//例子

$(function(){

$("#btnPub").click(function(){

var title=$("#txtTitle").val();

var content=$("#txtContent").val();

var tr="<tr><td>"+title+"</td><td>"+content+"</td></tr>";

$("#tableTTT").append(tr);

   });

});

<p>十一快放假了,都乐的不是动静了</p>

   <table id="tableTTT">

   <tr><td>匿名</td><td>沙发</td></tr>

   </table>

   <input type="text" id="txtTitle" /> <br />

   <textarea id="txtContent" rows="10" cols="30"></textarea>

<button id="btnPub">发布</button>

//例子 选择水果

<ul id="uiShuiguo">

    <li>香蕉</li>

    <li>苹果</li>

    <li>哈蜜瓜</li>

    <li>芒果</li>

    <li>草梅</li>

    <li>水蜜桃</li>

</ul>

$("#uiShuiguo li").css("cursor","pointer").mouseover(function(){

$(this).css("background","springgreen").siblings().css("background","white").click(function(){

$(this).css("background","lightskyblue").appendTo($("#ul2"));

    });

})

六、jQuery 中的事件

分为以下几类页面载入, 事件处理 ,事件委派,事件切换,事件

1.页面载入

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数

$(document).ready(function(){

// 在这里写你的代码...

});

//简单的写法

$(function(){

// 在这里写你的代码...

})

2.事件处理

-- bind(type, [data], fn) //为每个匹配元素的特定事件绑定事件处理函数

下例:在 btn1 这个按纽点击的时候,给 div 这个元素加个 onclick事件

$("#btn1").click(function(){

$("#div1").bind("click",function(){

    alert($(this).html());

    });

});

思考:它和直接写 $("#div1").click(function(){...}) 有什么区别?

主要是后者一般都在 $.ready() 中初始,而bind可以随时绑定事件

-- one(type, [data], fn) 绑定事件只执行一次

例子:将上例中的 bind 直接改成 one 即可

-- unbind([type], [fn]) //将绑定事件取消

$("p").unbind() //取消所有绑定事件

$("p").unbind( "click" )  //取消绑定的click事件

例子,动态给div的click绑定两个函数,然后取消一个

$(function(){

$("#btn1").click(function() {

$("div").bind("click",test);

$("div").bind("click",eat);

            });

$("#btn2").click(function() {

$("div").unbind("click",test);

                         });

});

  function test(){

   alert("ok");

   }

  function eat(){

   alert("正在eat 东西");

   }

<div>我是div </div>

<button id="btn1">激活div</button>

<button id="btn2">取消div事件</button>

3.事件委派

4.事件切换

-- hover(over,out) //一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。

参数 over 表示鼠标移到元素上要触发的函

参数 out 表示鼠标移出元素时要触发的函数

//鼠标移动到表格上的时候高亮

$("td").hover(

 function(){

$(this).addClass("light");

           },

 function(){

$(this).removeClass("light");

           }

);

-- toggle() //切换元素的可见状态

-- toggle(speed, [easing], [callback]) // easing 用来指定切换效果，默认是"swing"，可用参数"linear"

$("p").toggle("fast",function(){

      alert("Animation Done.");

});

--toggle(switch) //根据switch参数切换元素的可见状态（ture为可见，false为隐藏）。

var flip = 0;

$("button").click(function () {

$("p").toggle( flip++ % 2 == 0 );

});

5.事件

--blur() //调用被选中元素的 blur事件

--blur(fn) //设定blur事件

注:常用的事件

blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick,mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, // mouseout, mouseenter 组合起来其实就是hover,mouseleave,change,select,submit,keydown,keypress,keyup,error

七、jQuery 中的动态效果

jQuery中动态效果主要有以下几类：

基本、滑动、淡入淡出、自定义、设置

1.基本

--hide() //slow", "normal", "fast

--hide(speed, [easing], [callback]) //，easing 默认是"swing"，可用参数"linear"

用200毫秒将段落迅速隐藏，之后弹出一个对话框。

$("p").hide("fast",function(){

         alert("Animation Done.");

         });

--show()

--show(speed, [easing], [callback])

2.滑动

--slideDown(speed, [easing], [callback]) //通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数

$("p").slideDown("slow"); //实验发现,它的效果和show 和 hide很象,只不过它只在是垂直方向上动作

--slideToggle(speed, [callback])

--slideUp(speed, [easing], [callback])

3.淡入淡出

--fadeIn(speed, [easing], [callback])

--fadeOut(speed, [easing], [callback])

--fadeTo(speed, opacity, [easing], [callback]) // $("div").fadeTo("slow", 0.2); 调到指定的透明度

--fadeToggle(speed, [easing], [callback])

$("p").fadeToggle("slow");
<table id="table1"  width="80%" border="1" cellspacing=0 >

<tr><td>这是不变的</td><td>数据一</td><td>数据三</td></tr>
</table>

Web前端基础——jQuery（三）的更多相关文章

Web前端基础——jQuery（一）
前几天回老家呆了几天,几乎没有怎么学习新的知识,这期间一直有断断续续的看<Java编程思想>,还刷了一些前沿消息,也算没闲着.今天开始学习jQuery啦,继续前进. 在网上查了,买了这本书 ...
web前端基础——jQuery编程进阶
1 jQuery本质 jQuery不是一门独立的语言,它是JavaScript的一个类库或框架.jQuery的核心思想就是:选取元素,对其操作.很多时候写jQuery代码的关键就是怎样设计合适的选择器 ...
web前端基础——jQuery编程基础
1 jQuery简介 jQuery是一个兼容多浏览器的JavaScript库,核心理念是write less,do more(写得更少,做得更多).它对JavaScript进行了封装,使开发更便捷,并 ...
Web前端基础——jQuery（二）
一.jQuery 中的常用函数 1) $.map(Array,fn); 对数组中的每个元素,都用fn进行处理,fn将处理后的结果返回,最后得到一个数组 //因为这些操作,没有与dom元素相关的,所以可 ...
进击的Python【第十六章】：Web前端基础之jQuery
进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...
web前端基础知识及快速入门指南
web前端基础知识及快速入门指南做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
Python web前端 09 jQuery
Python web前端 09 jQuery 一.三个重要网址 http://jquery.cuishifeng.cn/ #中文查询网站 http://www.bootcdn.cn/ #引入jq ht ...
进击的Python【第十五章】：Web前端基础之DOM
进击的Python[第十五章]:Web前端基础之DOM 简介:文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示 ...
进击的Python【第十四章】：Web前端基础之Javascript
进击的Python[第十四章]:Web前端基础之Javascript 一.javascript是什么 JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编 ...

随机推荐

MySQL八、备份和还原
MySQL 八.数据库备份和还原 1.二进制日志相关配置 1)查看使用中的二进制日志文件列表,及大小 SHOW {BINARY | MASTER} LO ...
[UWP]不那么好用的ContentDialog
ContentDialog是UWP开发中最常用的组件之一,一个体验良好的UWP应用很难避免不去使用它.博客园里也有许多的文章介绍如何来利用ContentDialog实现各种自定义样式的弹窗界面.不过实 ...
背水一战 Windows 10 (85) - 文件系统: 获取文件夹和文件, 分组文件夹, 排序过滤文件夹和文件, 搜索文件
[源码下载] 背水一战 Windows 10 (85) - 文件系统: 获取文件夹和文件, 分组文件夹, 排序过滤文件夹和文件, 搜索文件作者:webabcd 介绍背水一战 Windows 10 之 ...
Lerning Entity Framework 6 ------ Working with in-memory data
Sometimes, you need to find some data in an existing context instead of the database. By befault, En ...
跨站请求伪造和csrf_token使用
day70 csrf简单用法什么是CSRF ? 跨站请求伪造, 问题: 1. 钓鱼网站的页面和正经网站的页面对浏 ...
koa-static与react-create-app搭配的路径
概述前端路由与后端路由的结合一直是一个难题.koa-static这个中间件能够把静态资源"搬到"后端路由上面去,react-create-app在不解构的情况下只会把资源打包到b ...
zookeeper常用指令
zk服务 bin 目录下常用的脚本解释 zkCleanup 清理 Zookeeper 历史数据,包括日志文件和快照数据文件 zkCli Zookeeper 的一个简易客户端 zkEnv 设置 Zook ...
分布式任务调度系统xxl-job源码探究（二、服务中心）
接下来看下服务端代码服务端源码服务端通过管理quartz定时任务组件,分发任务先从入口看起,由web.xml进入,可以看出,自己编写的代码从applicationcontext-xxl-job- ...
vscode中iview的</Col>标签报错问题
直接看问题截图: 这是vetur中eslint的问题,在vscode菜单中,文件->首选项->设置找到 “vetur.validation.template”: true 将其改为fal ...
django 中文入门文档
django中文入门文档:阅读地址

Web前端基础——jQuery（三）

Web前端基础——jQuery（三）的更多相关文章

随机推荐

热门专题