一、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;
}
来源：https://www.cnblogs.com/1693977889zz/p/7602863.html