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()); //
       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;
            }