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;
            }
时间： 2024-10-19 19:42:38

Web前端基础——jQuery（二）的相关文章

Web前端基础——jQuery（一）

前几天回老家呆了几天,几乎没有怎么学习新的知识,这期间一直有断断续续的看<Java编程思想>,还刷了一些前沿消息,也算没闲着.今天开始学习jQuery啦,继续前进. 在网上查了,买了这本书.现在是一边搜视频,一边看这本书. 认识jQuery,我将从以下几方面进行讲解. 一.JavaScript和JavaScript库 随着Web 2.0的兴起,JavaScript受重视的程度提高,带动JavaScript程序库也蓬勃发展起来. 过程:Prototype->Dojo->jQuery-

Web前端基础——jQuery（三）

本文主要从以下几方面介绍jQuery应用中的内容: 1 jQuery 节点遍历2 jQuery 中的过滤器3 jQuery 属性操作4 jQuery Dom节点操作5 几个jQuery例子6 jQuery 中的事件7 jQuery 中的动态效果 一. jQuery 节点遍历 == next()   //用于获取节点之后的第一个同辈元素 注意,next() 中可以加过滤器 例如 next("div") == nextAll()  //获取节点之后的所有同辈元素(注意: 是节点之后,这一点

《web 前端基础到实战系列课程》

<web 前端基础到实战系列课程> 摘要: mod_expires&mod_headers可以减少10%左右的重复请求,让重复的用户对指定的页面请求结果都CACHE在本地,根本不向服务器发出请求. 在使用之前,首先要确认一下"mod_expires"模组是否有启用.如果是自己安装Apache来架设网页主机的话,这里我们可以透过编辑Apache的"httpd.conf"设定档来处理 一.浏览器缓存原理 将该行前面的"#"字号删除

进击的Python【第十三章】：Web前端基础之HTML与CSS样式

进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/env python #coding:utf-8 import socket def handle_request(client): buf = client.recv(1024) client.send("HTTP/1.1 200 OK\r\n\r\n")

web前端测试（二）

web前端测试(二)   HTML 语言中,设置表格中文字与边框距离的标签是() * [单选题] * A.<table boder=””> B.<table cellspacing=””> C.<table cellpadding=””>(正确答案) D.<table width=””> 以下说法,错误的是() * [单选题] * A.mark用于显示变粗的文字(正确答案) B.<del>用于显示删除的文本 C.<ins>的文字会带下

web前端基础知识学习网站推介

内容:一．基础知识及学习资料1. HTML入门学习:http://www.w3school.com.cn/html/index.aspHTML5 入门学习:http://www.w3school.com.cn/html5/index.asp 2. CSS入门学习:http://www.w3school.com.cn/css/index.aspCSS3入门学习:http://www.w3schools.com/css3/default.asphttp://css3-tutorial.com/ 3.

WEB前端学习笔记 二

1.4  JavaScript和Jquery能做什么? JavaScript是Netscape公司开发的一种基于对象和事件驱动的脚本语言 ,并且可在所有主要的浏览器中运行 IE.Firefox.Chorme.Opera ,JavaScript 可用来向 HTML 页面添加交互行为,如表单数据合法性验证.网页特效.动画效果.数值计算,例如你现在浏览的网知博学的首页面上的图片循环播放和导航分类,淘宝和京东的商品分类菜单等.JavaScript 是一种弱类型语言,无需编译,可由浏览器直接解释运行 特点

web前端基础知识总结

上个寒假总结的web前端的一些知识点给大家分享一下 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1)  dir: 文本的显示方向,默认是从左向右 (2) lang: 表示整个文档中所使用的语言,en--英文,zh--中文 (3) version:定义创作文档的HTML的标准版本 2.<head></head>用于封装位于文档头部的其他标签 属性: (1) dir:文本的显示方向 (2)  Lang:语言信息 (3)  Prof

Web前端面试指导(二)：编写简历，吃透简历内容

2.1 简历模板(仅供参考,不得千篇一律) ~~~~~~温馨提示~~~~~~简历模板文件在QQ群 490916635  2.2 吃透简历内容 2.2.1 吃透自己的简历 简历出现的名词术语要非常熟悉 简历出现的技术要熟练应用,不能熟练的死记硬背也要记下 对于项目要非常熟悉,非常清楚自己所负责的模块 对自己的学历.阅历要非常清楚,特别是那些虚构的,更要下功夫. 2.2.2  项目经验修 Web前端项目经验一般要求在2~3年 项目个数不能少于3个,最好在3~4个之间,也不要太多. 2.2.3 进行模