代码改变世界

jq:静态页面常会用到的jq操作(记录)

2013-11-19 15:26  xbread  阅读(570)  评论(0编辑  收藏  举报
 1 在php的mvc模式中通常需要做数据异步处理,其中也包含了对htm页面的操作,下面是近期长用到的jq操作,后续会继续补充
 2 
 3 1:修改input框的value值
 4 <input type = "hidden" value = "" id = "questionID"/>
 5 $('#questionID').val("0506"); //修改input框的value值
 6 
 7 2:获取input框的value值
 8 <input type = "hidden" value = "0506" id = "questionID"/>
 9 $('#questionID').val(); //获取input框的value值
10 
11 3:修改标签内的html代码
12 <span id = "title"></span>
13 $('#title').html("好好学习"); //修改标签内的html代码
14 
15 4:获取第一个匹配元素的html内容
16 <span id = "title">好好学习</span>
17 $('#title').html(); //获取第一个匹配元素的html内容
18 
19 5:修改标签内属性的值
20 <a href = "" title = "查看原页面" target = "_blank" id = "qurl">
21 $("#qurl").attr("href", "http://www.####.com/"); //修改标签内属性的值
22 
23 6:获取标签第一个匹配元素的值
24 <a href = "" title = "查看原页面" target = "_blank" id = "qurl">
25 $("#qurl").attr("title"); //获取标签内属性的值
26 
27 7:children() 返回匹配对象的子节点
28 <p>one</p>
29 <div id = "ch">
30 <span>two</span>
31 </div>
32 $("#ch").children().html();
33 $("#ch").children()得到对象[<span>two</span>], 所以.html()的结果是”two”
34 
35 8:children(expr) 返回匹配对象的子节点中符合表达式的节点
36 <div id = "ch">
37 <span>two</span>
38 <span id = "sp">three</span>
39 </div>
40 $("#ch").children(“#sp”).html();
41 $("#ch").children()得到对象[<span>two</span><span id = "sp">three</span>].
42 $("#ch").children(“#sp”)过滤得到[<span id = "sp">three</span>]
43 
44 9:parent() 返回匹配对象的父节点,参照children()理解
45 
46 10:parent(expr) 返回匹配对象的父节点中符合表达式的节点,参照children(expr)理解
47 
48 11:parents() 查找所有祖先元素,不限于父元素
49 
50 12:find(expr) 在匹配的对象中继续查找符合表达式的对象
51 <p>Hello</p><p id = "a">Hello Again</p><p class = "selected">And Again</p>
52 $("p").find("#a").html()
53 在$("p")对象中查找id为a的对象
54 
55 13:remove()
56 $('#a_alertBox_main1').remove(); //div的ID为a_alertBox_main1的代码移除,移出匹配对象
57 
58 14:empty() 删除匹配对象的所有子节点
59 
60 15:$('#a_alertt1').after(box); //box为用js拼接的html代码,意思是将box插入id为a_alertt1的html代码后面
61 
62 16:$(document).ready(function(){
63 var tmp = $("#siteID").val();
64 if(tmp==''){
65 $("#siteboxhide").hide();
66 } })
67 
68 17:$(document).ready(function(){
69 $("#aa").click(function(){
70 $("#siteboxhide").show();
71 }) })
72 
73 18:$('a').click( function() { })  //如果事件就点击一次,可以使用,只绑定原先页面
74 
75 19:$('#subBtnQuest').live('click',function () { }) //如果事件有通过jq压入能触发的代码,要用live,对新压入的代码也可以触发
76 
77 20:$(".wzx").css('bottom', '0') //改变样式的值
78 
79 21:$("#minmax").removeClass("t_max") //移除类
80 
81 22:$("#minmax").addClass("t_min") //添加类
82 
83 23:$("[name='a']").each(function(i){}) //根据属性name等于a的div进行遍历操作
84