一、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对象" ??//okjQueryObj.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属性的 div7.[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; ???????????????}Web前端基础——jQuery（二）
原文地址：http://www.cnblogs.com/1693977889zz/p/7602863.html