MyException - 我的异常网
当前位置:我的异常网» jQuery » Web前端基础——jQuery(3)

Web前端基础——jQuery(3)

www.MyException.Cn  网友分享于:2013-10-08  浏览:0次
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>

文章评论

程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
如何成为一名黑客
如何成为一名黑客
代码女神横空出世
代码女神横空出世
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
我的丈夫是个程序员
我的丈夫是个程序员
10个调试和排错的小建议
10个调试和排错的小建议
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
鲜为人知的编程真相
鲜为人知的编程真相
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
总结2014中国互联网十大段子
总结2014中国互联网十大段子
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
编程语言是女人
编程语言是女人
每天工作4小时的程序员
每天工作4小时的程序员
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
程序员的鄙视链
程序员的鄙视链
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
 程序员的样子
程序员的样子
那些争议最大的编程观点
那些争议最大的编程观点
程序员都该阅读的书
程序员都该阅读的书
程序员必看的十大电影
程序员必看的十大电影
中美印日四国程序员比较
中美印日四国程序员比较
老程序员的下场
老程序员的下场
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
程序员和编码员之间的区别
程序员和编码员之间的区别
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
漫画:程序员的工作
漫画:程序员的工作
我是如何打败拖延症的
我是如何打败拖延症的
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
旅行,写作,编程
旅行,写作,编程
程序员应该关注的一些事儿
程序员应该关注的一些事儿
Java程序员必看电影
Java程序员必看电影
一个程序员的时间管理
一个程序员的时间管理
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有