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; }
