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

Web前端基础——jQuery(2)

www.MyException.Cn  网友分享于:2013-11-16  浏览:0次
Web前端基础——jQuery(二)

一、jQuery 中的常用函数

1) $.map(Array,fn);

对数组中的每个元素,都用fn进行处理,fn将处理后的结果返回,最后得到一个数组
                

//因为这些操作,没有与dom元素相关的,所以可以不用写在 $(function(){...}); 中
var arr=[1,3,5,7,9];
arr=$.map(arr,function(item){
     return item*10;
 });
                        
alert(arr); [10,30,50,70,90];
            
//上例是将数组中的每个元素乘10,然后返回新的数组

 2) $.each(Array,fn);

对数组中的每个元素,调用fn这个函数进行处理,但是,没有返回值,比上例更常用

//例一
var nameList=["哈利波特","伏地魔","小恶魔","本田","尼桑"];
                    
    $.each(nameList,function(key,value){  //对于上面的数组来说,key就是索引,value就是元素值
         alert(key+":"+value);
    });
//例二
var nameList={"aa":"哈利波特","bb":"伏地魔","cc":"小恶魔","dd":"本田","ee":"尼桑"};
    $.each(nameList,function(key,value){ 
        alert(key+":"+value);
    });
//例三 不关心key
    $.each(nameList,function(){ 
        alert(this);  //这里的this ,取到的是value
    });

二、jQuery 对象和Dom对象

jQuery对象 ,就是通过包装dom对象后产生的对象,dom 对象要想通过jQuery对象进行操作,要转成jQuery对象。

$("#span1").html():  //jQuery的写法 等价于

document.getElementById("span1").innerHTML;  //注意innerHTML 是属性,不是方法,不要加扩号

jQuery 对象不能直接调用dom对象的方法 ,同样,dom对象也不能直接调用jQuery对象的方法,可以将dom对象转成jQuery对象,也可以将jQuery对象转成dom对象。

1) 将dom对象转成jQuery对象  // $(dom对象)

var domObj = document.getElementById("span1");
alert( $(domObj).html());   //将dom对象,用 $() 包围 ,转成了jQuery对象,就可调用jQuery对象的方法了

2) 将jQuery对象转成dom对象  //取jQuery对象中的第[0]个元素或 get(0)

var jQueryObj=$("#span1");                     
jQueryObj[0].innerHTML="我现在是个dom对象"   //ok
jQueryObj.get(0).innerHTML="我现在是个dom对象,哈哈哈"  //ok

三、jQuery 的取值和赋值操作

1) 对于文本框类元素

取值  $("#userName").val();

传值  $("#userName").val("这是赋的值 ");              

2) 对于 div,span, label 类的

取值 $("#lblMsg").html();

传值  $("#lblMsg").html("这是赋的值 ");

取值 $("#lblMsg").text();

传值  $("#lblMsg").html("这是赋的值 ");

alert($("#span1").html());  //连文本,带标签一起取出
alert($("#span1").text());  //只取文本,不取html标签
                        
$("#span1").html("<h1>这是用text方式传的值</h1>");  //h1 会被当做元素解释
$("#span2").text("<h1>这是用text方式传的值</h1>");  //这里的h1,将会被当做文本,而不是标签

四、jQuery选择器

在1.4.4的文档中,列了九类选择器  基本  层级  基本  内容  可见性  属性  子元素  表单  表单属性

1) 基本 5个

第一个: #id
例子: $("#myDiv");

第二个:element

一个用于搜索的元素。指向 DOM 节点的标签名。

$("div").html("这是element选择器,我们都是div"); //查找所有div元素,为其赋值

思考:如何给所有的DIV元素都加上一个点击事件?并在点击事件中弹出div中的内容

$("div").click(function(){
     alert(this.innerHTML);
     alert($(this).html());
});

第三个:*

返回所有值,多数用来结合上下文进行操作

第四个:.Class

根据给定的类匹配元素。

$(".myClass");
 //例子
<style type="text/css">
  .cry
   {
     background:silver;   //说明,这个样式也可以没有,依然可以在下面使用.cry
   }
   </style>
                    
   <script type ="text/javascript">
      $(".cry").css("background","blue");
   </script>    
                                
    <div class="cry">这是用来验证class选择器的层</div>

第五个:selector1,selector2,selectorN

将每一个选择器匹配到的元素合并后一起返回。(多个选择条件都有效)

$("#div1,span,p.myClass") 同时使用了多种选择器 p.myClass 指的是所有拥有myClass样式的p标签

 

2) 层级 4个(注意不要乱加空格)

第一个:ancestor descendant

在给定的祖先元素下匹配所有的后代元素
 $("form input") //语法:选择from标签下的所有 input 元素,无论是第几代

  <form>
      <label>Name:</label>
      <input name="name" />
      <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
      </fieldset>
   </form>
      <input name="none" />
      <script type ="text/javascript">
        $("form input").val("这是层级选器的例子");
      </script>
                            
    $("div li") //获取div下所有的li元素(包扩后代,子的子)
//给table下所有tr下的td加个点击事件,一点就取出td中的内容
                         $("#table1 tr td").click(function(){
                                alert(this.innerHTML);
                            });

第二个:parent > child

$("div >li") //语法,获取div下所有的直接li子元素

第三个:prev + next

$("label + input") //语法 label 后面 (相邻的 )input 元素 (包扩子级里的)
    <form>
      <label>Name:</label>
         <input name="name" />  //被选中
      <fieldset>
         <label>Newsletter:</label>
           <input name="newsletter" /> //被选中
       </fieldset>
    </form>
<input name="none" /> 

第四个:prev ~ siblings

匹配 prev 元素之后的所有 siblings 元素

$("form ~ input")    //语法  找到所有与表单同辈的 input 元素
    <form>
        <label>Name:</label>
        <input name="name" /> //不被选中,
    <fieldset>
        <label>Newsletter:</label>
          <input name="newsletter" /> //不被选中
     </fieldset>
     </form>
<input name="none" />  //被选中,因为和form是同级

 

3) 基本(定位) 10个

:first  

$("tr:first") //语法 匹配找到的第一个元素

//$("#table1 tr:first").css("background","red");  //将table1 中的第一个tr的背景色变成红色

 :last

:not 

$("input:not(:checked)")  //没有被勾选的那个复选框 

:even //所有索引为偶数的 0,2,4

:odd //奇数 1,3,5

//隔行变色
$("#table1 tr:even").css("background-color","silver");
$("#table1 tr:odd").css("background-color","pink");

:eq  //匹配一个给定索引值的元素

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

:gt //匹配所有大于给定索引值的元素

$("#table1 tr:gt(1)").css("background","green"); //将table1中的第2行以后都变成绿色

:lt //与上例相反

:header //匹配如 h1, h2, h3之类的标题元素

$(":header").css("background", "#EEE");

:animated //匹配正在执行动画和元素

$("div:not(:animated)").animate({ left: "+=20" }, 1000); //对不执行动画的div执行一个动画效果

 

4)内容 4 个

第一个:

:contains  //匹配包含给定文本的元素

$("#table1 tr:contains('混球')" ).css("background","yellow");  //把含有混球的所有行高亮显示
$("#table1 tr td:contains('混球')" ).css("background","yellow"); //精确到td (注意,如果不严明的写好层级关系,会全选上)

第二个:

:empty //匹配所有不包含子元素或者文本的空元素

$("td:empty")

第三个:

:has //匹配含有选择器所匹配的元素的元素

<div><p>Hello</p></div>
<div>Hello again!</div>
$("div:has(p)").addClass("test"); //查询所有带有 p 的元素,并给它加上一个 test类(林式)

第四个:

:parent  //匹配含有子元素或者文本的元素

$("td:parent") //只要td中有内容,就会被选出来(主要用于判断自已是不是父级元素,而不是取自已的父级)

 

 5) 可见性 2 个

------  :hidden //匹配所有不可见元素,或者type为hidden的元素(隐含控件)

 $("#table1 tr:hidden").css("display","block"); //把表中隐藏的行显示出来

------  :visible //与上例相反

 

6) 属性 7 个

1.[attribute=value]

匹配给定的属性是某个特定值的元素 注意:后面的value也可以不扩,但扩上了更好

<input type="checkbox" name="c1" value="嘿嘿" />
<input type="checkbox" name="c2" value="嘻嘻" />
<input type="checkbox" name="c1" value="哈哈" />
                    
     $("button").click(function(){
     $("input[name=c1]").attr("checked",true);
      });
                        
//把name=c1的复选框的值全取出来
     $("button").click(function(){
     var list=$("input[name=c1]");
                              
     $.each(list,function(){
              alert(this.value);
              });
});

附:处理下拉框的选中

$("button").click(function(){
//    $("select[name=select1]").val("bb");  ok
//    $("select").attr("selectedIndex",2);  ok
});
                            
<select name="select1">
     <option value="aa" >aa</option>
     <option value="bb" >bb</option>
     <option value="cc" >cc</option>
</select>
//例子取页面中所有的 checkbox
$("input[type=checkbox]")

2.[attribute ! =value]  与上例相反

3.[attribute$=value] //匹配attribtue的值以value结尾的

<input type="checkbox" name="c1aaa" value="嘿嘿" />
<input type="checkbox" name="c2vvv" value="嘻嘻" />
<input type="checkbox" name="c1aaa" value="哈哈" />
                                var list=$("input[name$='vvv']")   
                                $.each(list,function(){
                                    alert(this.value);  //弹出 嘻嘻
                                })

4.[attribute^=value] //匹配以value开头的

5.[attribute*=value] //匹配包含的

6.[attribute] //匹配包含给定属性的元素

$("div[id]") //查找 带有id属性的 div

7.[selector1][selector2][selectorN] //复合的多条件属性选择器

$("input[id][name$='man']") //所有含有 id 属性,并且它的 name 属性是以 man 结尾的

 

7) 子元素 4 个

:first-child  //匹配第一个子元素    

<ul>
     <li>John</li>  它的颜色会变
     <li>Karl</li>
     <li>Brandon</li>
</ul>
<ul>
      <li>Glen</li>  它的颜色会变
      <li>Tane</li>
      <li>Ralph</li>
</ul>
                    
$("ul li:first-child").css("background","silver");

:last-child //匹配最后面的元素,与上例相反

:nth-child  //匹配父元素下的第N个子或奇偶元素

:eq(index)只匹配一个元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的
                    另外可以使用:
                    :nth-child(even)
                    :nth-child(odd)
                    :nth-child(3n)
                    :nth-child(2)
                    :nth-child(3n+1)
                    :nth-child(3n+2)
                    

$("ul li:nth-child(2)").css("background","pink"); //改变每个 ul 中 第二个 li的背景
$("ul li:nth-child(even)").css("background","pink"); //将每个 ul中的偶数行的背景进行设定

:only-child //如果某个元素是父元素中唯一的子元素,那将会被匹配 如果父元素中含有其他元素,那将不会被匹配。(找独生子)

<ul>
     <li>John</li>
     <li>Karl</li>
     <li>Brandon</li>
</ul>
<ul>
     <li>Glen</li>
</ul>
                    
$("ul li:only-child") //得到   <li>Glen</li>

 

8) 表单 11 个

--:input     匹配所有 input, textarea, select 和 button 元素 请密切注意,它匹配  textarea,select,button

$(":input")

--:checkbox //匹配所有复选框

$(":checkbox") 

--:button //匹配所有按钮 注意它不匹配 submit 之类的

--:file  //匹配所有文件域

--:hidden //匹配所有的不可见元素,input 元素的 type 属性为 "hidden" 的话也会被匹配到

<table>
     <tr style="display:none"><td>Value 1</td></tr>
     <tr><td>Value 2</td></tr>
</table>
$(":hidden") //每5) 条 前面也有一个hidden

--:image  //<input type=image>

--:radio

--:reset

--:password

--:submit

--:text  //$(":text") <input type="text" />

 

9) 表单属性 4个

--:enabled

<form>
       <input name="email" disabled="disabled" />
       <input name="id" />
</form>
$("input:enabled") //得到  <input name="id" /> 

--:disabled //与上面相反

--:checked //匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)

<form>  //注意这个form是可以不加的
    <input type="checkbox" name="newsletter" checked="checked" value="猫猫" />
    <input type="checkbox" name="newsletter" value="万里追风猪" />
    <input type="checkbox" name="newsletter" checked="checked" value="狗狗" />
</form>
                    
var list=$("input:checked");   //换成前面的写法 $("intput[checked=checked]")
$.each(list,function(){alert(this.value)}); //弹出 猫猫,狗狗 

--:selected 匹配所有选中的 option

<select>
     <option value="1">石灰</option>
     <option value="2" selected?"selected">水泥</option>
     <option value="3">河卵石</option>
</select>
       alert($(":selected").val()); //2
       alert($(":selected").text()); //水泥

五、权限设计(设计如下)
            菜单表
            id
            menuName
            URL
            target
            parentId
            pic
            level //菜单是几级菜单 (千万注意,如果oracle数据库,这个是关键词)
            
            管理员表
            id
            userName
            password
            ....
            
            
            用户权限表
            userId
            menuId

            0009   1
            0009   2
                   ...
                   
            0009   99

代码:

  //left.jsp中
    List<MenuInfo> menuList=new MenuDao().getMenuList(0,user.getId());
    
//操作菜单表
        public class MenuDao {
            
            //查询用户有多少菜单,根据用户的id
            public List<MenuInfo>getMenuList(int parentId,int userId){
                //先根据用户的id,把他据有的菜单查出来
                String menuListStr=getUserMenuListStr(userId);
                
                Connection conn=null;
                PreparedStatement stm=null;
                ResultSet rs=null;
                List<MenuInfo> menuList=new ArrayList<MenuInfo>();
                try{
                    conn=DBUtil.getConn();
                    String sql="select * from menuInfo where parentId=?  and id in ("+menuListStr+")"; 
                    stm=conn.prepareStatement(sql);
                    stm.setInt(1, parentId);
                    rs=stm.executeQuery();
                    
                    while(rs.next()){
                        MenuInfo m=new MenuInfo();
                        m.setId(rs.getInt("id"));
                        m.setMenuName(rs.getString("menuName"));
                        m.setTarget(rs.getString("target"));
                        m.setUrl(rs.getString("url"));
                        m.setParentId(rs.getInt("parentId"));
                        m.setPic(rs.getString("pic"));
                        
                        if(parentId==0){
                            m.setSubMenuList(getMenuList(m.getId(),userId));  //递归
                        }
                    
                        menuList.add(m);
                    }
            
                }catch(Exception ex){
                    ex.printStackTrace();
                }finally{
                    DBUtil.close(rs, stm, conn);
                }
                
                return menuList;
            }
            
            //根据用户的id,查询他有哪些菜单,并拼成字符串返回
            public String getUserMenuListStr(int userId){
                Connection conn=null;
                PreparedStatement stm=null;
                ResultSet rs=null;
                String result="";
                try{
                    conn=DBUtil.getConn();
                    String sql="select menuId from userMenu where userId=?"; 
                    stm=conn.prepareStatement(sql);
                    stm.setInt(1, userId);
                    rs=stm.executeQuery();
                    
                    while(rs.next()){
                        result+=rs.getInt(1)+",";
                    }
                    
                    if(!"".equals(result)){
                        result=result.substring(0,result.length()-1);
                    }
                    
                    System.out.println(result);
                    
                }catch(Exception ex){
                    ex.printStackTrace();
                }finally{
                    DBUtil.close(rs, stm, conn);
                }
        
                return result;    
            }

文章评论

团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
那些争议最大的编程观点
那些争议最大的编程观点
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
代码女神横空出世
代码女神横空出世
每天工作4小时的程序员
每天工作4小时的程序员
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
中美印日四国程序员比较
中美印日四国程序员比较
漫画:程序员的工作
漫画:程序员的工作
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
旅行,写作,编程
旅行,写作,编程
编程语言是女人
编程语言是女人
程序员的鄙视链
程序员的鄙视链
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
程序员都该阅读的书
程序员都该阅读的书
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
我的丈夫是个程序员
我的丈夫是个程序员
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
为什么程序员都是夜猫子
为什么程序员都是夜猫子
鲜为人知的编程真相
鲜为人知的编程真相
程序员和编码员之间的区别
程序员和编码员之间的区别
程序员应该关注的一些事儿
程序员应该关注的一些事儿
我是如何打败拖延症的
我是如何打败拖延症的
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
老程序员的下场
老程序员的下场
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
10个调试和排错的小建议
10个调试和排错的小建议
程序员必看的十大电影
程序员必看的十大电影
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
Java程序员必看电影
Java程序员必看电影
总结2014中国互联网十大段子
总结2014中国互联网十大段子
一个程序员的时间管理
一个程序员的时间管理
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有