A .jquery的调试
1.通常我们可以用firebug进行debug一下，
2.可以用类似于这种形式去验证参数的取值问题:
//alert("keyword:"+keyword+" menuId:"+menuId+" currentPage:"+currentPage);
B.jquery对于dom操作的几种方式:
//${".class"} 类
//${"#id"} ID
//${"element"} element(ALL)
//${"#id"} ID
//$("element,.class,#id") 综合
//$("*") 通配符，所有
C.jquery中常用的dom操作:
1.划过div增加样式:
$("#hoverMethod").hover(
function () {
$(this).addClass("hover2");
},
function () {
$(this).removeClass("hover2");
}
);
2.给div增加事件:
$("#hoverMethod").bind("click", function(){
//$(this).load("test.jsp");
$("#hoverMethodDiv").load("test.jsp");
});
3.常用的一些jquery的操作:
//$("#hoverMethod").load("test.jsp");
//$("div:contains('John')"); 查找所有包含 "John" 的 div 元素 <div>John Resig</div>,
//$("td:empty"); 查找所有不包含子元素或者文本的空元素 <td></td>
//$("div:has(p)").addClass("test"); 给所有包含 p 元素的 div 元素添加一个 text 类
//$("td:parent"); 查找所有含有子元素或者文本的 td 元素 <td>Value 1</td>
//$("tr:hidden");查找所有不可见的 tr 元素 <tr style="display:none"><td>Value 1</td></tr>
//$("tr:visible"); 与$("tr:hidden");相反
//$("ul li:first-child") 在每个 ul 中查找第一个 li
//$("ul li:last-child") 在每个 ul 中查找最后一个 li
//$("ul li:nth-child(2)") 在每个 ul 查找第 2 个li (从1开始)
//$("ul li:only-child") 在 ul 中查找只有唯一子元素的 li
//$("form input") 找到表单中所有（可以是子级的子级）的 input 元素 <input name="name" />,
//$("form > input") 匹配表单中所有的子级input元素（当前子级）。
//$("label + input").css({"height":"50px"}); //匹配所有跟在 label 后面的 第一个 input 元素
//$("form ~ input").css({"height":"50px"}); //找到所有与表单同辈的 input 元素(后面，不包括表单前面的)
//$("input[name*='man']") 查找所有 name 包含 'man' 的 input 元素
//$("input[name!='newsletter']").attr("checked", true); 查找所有 name 属性不是 newsletter 的 input 元素
//$("input[name='newsletter']").attr("checked", true); 查找所有 name 属性 是 newsletter 的 input 元素
//$("input[name$='letter']") 查找所有 name 以 'letter' 结尾的 input 元素
//$("div[id]") 查找所有含有 id 属性的 div 元素
//$("input[name^='news']") 查找所有 name 以 'news' 开始的 input 元素
//$("input[id][name$='man']") 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的 input 元素
//$("#run").click(function(){ //只有对不在执行动画效果的元素执行一个动画特效
// $("div:not(:animated)").animate({ left: "+=20" }, 1000); });
//$("input:eq(2)").css({"height":"50px"}); //查找第三行 (从 0 开始计数)所有的第一个，返回一个元素
//$("input:even").css({"height":"50px"}); //查找input的1、3、5...行（即索引值0、2、4...）
//$("tr:odd").css({"height":"50px"}); //查找表格的2、4、6行（即索引值1、3、5...）
//$("tr:first") 查找表格的第一行 $("tr:last")
//$("tr:gt(0)") 查找第二或更大，即索引值是1和2，也就是比0大 (从 0 开始计数) 匹配所有大于给定索引值的元素
//$("tr:lt(2)") 查找第一第二行，即索引值是0和1，也就是比2小 匹配所有小于给定索引值的元素
//$(":header").css("background", "#EEE"); 给页面内所有标题加上背景色 匹配如 h1, h2, h3之类的标题元素
//$("input:not(:checked)") 查找所有未选中的 input 元素 <input name="apple" /> 去除所有与给定选择器匹配的元素
//**********表单**********
//$("#subList :input").css({"border":"solid 2px red"});
//$(":button") 查找所有按钮. <input type="button" />,<button></button>
//$(":checkbox")查找所有复选框 $(":file")查找所有文件域 $("input:hidden")匹配type为hidden的元素 $("tr:hidden")查找隐藏的 tr
//$(":image")匹配所有图像域 $(":input")查找所有的input元素 $(":password") $(":radio") $(":reset") $(":submit") $(":text")
//$("input:checked") 查找所有选中的复选框元素
//$("input:disabled") 查找所有不可用的input元素，$("input:enabled") 查找所有可用的input元素
//$("select option:selected") 查找所有选中的选项元素
//**********筛选**********
//$("form").find("fieldset").find("input").andSelf().css({"border":"solid 2px red"}); //加入先前所选的加入当前元素中
//选取所有form内部的fieldset已及fieldset内部的input（父一级），并加上CSS，包含fieldset和input，无andSelf()则只有input
//$("p").find("span").end() 选取所有的p元素，查找并选取span子元素，然后再回过来选取p元素
//回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。
//**********值**********
//val()获得第一个匹配元素的当前值。包括select。如果多选，将返回一个数组，其包含所选的值。
//<input type="text" value="some text"/> $("input").val();
//val("#aa")为AA赋值
//attr(key,fn/value)为所有匹配的元素设置一个计算的属性值。
//$("img").attr("title", function() { return this.src }); <img src="test.jpg" title="test.jpg" />
//attr(name)取得第一个匹配元素的属性值。$("img").attr("src"); test.jpg
//$("img").attr({ src: "test.jpg", alt: "Test Image" });
//果你要设置对象的class属性，你必须使用'className' 作为属性名。或者你可以直接使用.addClass( class ) 和 .removeClass( class ).
//$("img").removeAttr("src");
//text()取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。
//<p><b>Test</b> Paragraph.</p><p>Paraparagraph</p> $("p").text();
//Test Paragraph.Paraparagraph
//text(val)设置所有匹配元素的文本内容与 html() 类似, 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体).
//$("p").text("<b>Some</b> new text.");
D.jquery之ajax操作:
<script type="text/javascript">
//修改个人信息 异步方法修改个人信息
$$(document).ready(function(){
//给div增加点击事件
$$(".ui_pi3_setpi").bind("click", function(){
var userid = $$("#userid").val();
alert("userid"+userid);
$$.post("${ctp }/user/userUser_user_mfinfo",{userid:userid},function(data){
if(null!=data&&data!='null'){
$$("#ud_ct22_div").replaceWith(data);
}
});
});
});
</script>
简单的介绍一下post的用法，
这里的是用的是，$$.post("url（地址）这里是将请求转发的action中，当然具体的实现是struts2中先拦截请求然后转发到action最后返回视图"、 pras参数、回调函数)
然后更新div的数据、整个过程是非常简单的。当然这里用的$$是防止jquery对象和struts2标签的混淆问题，做法也很简单，在jquery源码中设置一下
window.$ = jQuery;修改为window.$$=jQuery.
E：jquery ajax源码解析:
以load为例：
// 载入远程 HTML 文件代码并插入至 DOM 中。
// 默认使 用 GET 方式 - 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中，
//可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。
// 语法形如 "url #some > selector"。
load : function(url, params, callback) {
if (typeof url !='string') returnthis._load(url);
var off = url.indexOf("");// 找到第一个空格处
if (off >=0) { ①
var selector = url.slice(off, url.length);// 第一个空格之后的字符
url = url.slice(0, off);// 第一个空格之前的字符
}
callback = callback ||function() {
};
var type ="GET";// 默认的是get类型
// 这里是判断第二参数，如果是 fn,那么就是指callback
// 如果是object,那么就是指data.load(url, [data],[callback])
if (params)
if (jQuery.isFunction (params)) {
callback = params; params =null;}
elseif (typeof params =='object') {
params = jQuery.param(params);type ="POST"; ②
}
var self =this;
jQuery.ajax( {//Ajax请求 ③
url : url, type : type,dataType : "html",data : params,
complete : function(res, status) {
// 成功就注射html到所有匹配的元素中
if (status =="success"|| status =="notmodified")
// selector是否指定？没有的话就是全部的内容
// 指定的话 ，就是生成dom文档的形式，之后在中间找到满足条件的元素。
// 这中间删除 scripts 是避免IE中的 'Permission Denied' 错误
self.html(selector ? jQuery("<div/>") ④
.append(res.responseText.replace(/<script(.|s) *?/script>/g, ""))
.find(selector) : res.responseText);
self.each(callback, [res.responseText, status, res]); // 执行回调⑤
}
});
returnthis;
F：jquery截取字符串（用于前台展示新闻信息类标题过长与div设置宽度不一致的情况）
<!--截取内容简介并添加省略号-->
<script type="text/javascript">
$$(document).ready(function() {
$$(".twrContent").each(function() {
//alert("截取字符串测试");
var inText = $$(this).text();
if (inText.length >7) {
$$(this).text(inText.substr(0, 7) + "...")
}
});
});
</script>
jQuery 常见操作实现方式
$("标签名") //取html元素 document.getElementsByTagName("")
$("#ID") //取单个控件document.getElementById("")
$("div #ID") //取某个控件中 控件
$("#ID #ID") // 通过控件ID取其中的控件
$("标签.class样式名") //通过class来取控件
$("#ID").val(); //取value值
$("#ID").val(""); //赋值
$("#ID").hide(); //隐藏
$("#ID").show(); //显示
$("#ID").text(); //相当于取innerHTML
$("#ID").text(""); //相当于innerHTML=""
$("#ID").css("属性","值") //添加CSS样式
$("form#表单id").find("#所找控件id").end() //遍历表单
$("#ID").load("*.html") //载入一个文件
例如：
$("form#frmMain").find("#ne").css("border", "1px solid #0f0").end() // end()返回表单
.find("#chenes").css("border-top","3px dotted #00f").end()
$.ajax({ url: "Result.aspx", //数据请求页面的url
type:"get", //数据传递方式(get或post)
dataType:"html", //期待数据返回的数据格式(例如 "xml", "html", "script",或 "json")
data: "chen=h", //传递数据的参数字符串，只适合get方式
timeout:3000, //设置时间延迟请求的时间
success:function(msg)//当请求成功时触发函数
{
$("#stats").text(msg);
},
error:function(msg) //当请求失败时触发的函数
{
$("#stats").text(msg);
}
});
$(document).ready(function(){});
$("#description").mouseover(function(){});
//ajax方法
$.get( "Result.aspx", //数据请求页面的url
{ chen: "测试",age:"25"}, //传递数据的参数字符串
function(data){ alert("Data Loaded: " + data); } //触发后的函数
);
});
});
//取得下拉选单的选取值
$(#testSelect option:selected').text(); //取文本值
或$("#testSelect").find('option:selected').text();
或$("#testSelect").val();
jQuery中常用的函数方法总结
事件处理
ready(fn)
代码：
$(document).ready(function(){
// Your code here...
})；
作用：它可以极大地提高web应用程序的响应速度。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。
bind(type,[data],fn)
代码：
$("p").bind("click", function(){
alert( $(this).text() );
});
作用：为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。起到事件监听的作用。
toggle(fn,fn)
代码：
$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);
作用：每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。挺有趣的一个函数，在动态实现某些功能的时候可能会用到。
(像click(),focus(),keydown()这样的事件这里就不提了，那些都是开发中比较常用到的。)
外观效果
addClass(class)和removeClass(class)
代码：
$(".stripe tr").mouseover(function(){
$(this).addClass("over");}).mouseout(function(){
$(this).removeClass("over");})
});
也可以写成：
$(".stripe tr").mouseover(function() { $(this).addClass("over") });
$(".stripe tr").mouseout(function() { $(this).removeClass("over") });
作用：为指定的元素添加或移除样式，从而实现动态的样式效果，上面的实例中实现鼠标移动双色表格的代码。
css(name,value)
代码：
$("p").css("color","red");
作用：很简单，就是在匹配的元素中，设置一个样式属性的值。这个个人感觉和上面的addClass(class)有点类似。
slide(),hide(),fadeIn(), fadeout(), slideUp() ,slideDown()
代码：
$("#btnShow").bind("click",function(event){ $("#divMsg").show() });
$("#btnHide").bind("click",function(evnet){ $("#divMsg").hide() });
作用：jQuery中提供的比较常用的几个动态效果的函数。还可以添加参数：show(speed,[callback])以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。
animate(params[,duration[,easing[,callback]]])
作用：制作动画效果用到的函数，功能非常的强大，可以连续使用此函数。
查找筛选
map(callback)
HTML 代码:
<p><b>Values: </b></p>
<form>
<input type="text" name="name" value="John"/>
<input type="text" name="password" value="password"/>
<input type="text" name="url" value="http://www.fufuok.com/>
</form>
jQuery 代码:
$("p").append( $("input").map(function(){
return $(this).val();
}).get().join(", ") );
结果:
[ <p>John, password, http://www.fufuok.com/</p> ]
作用：将一组元素转换成其他数组（不论是否是元素数组）你可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。这都可以用'$.map()'来方便的建立。
find(expr)
HTML 代码:
<p><span>Hello</span>, how are you?</p>
jQuery 代码:
$("p").find("span")
结果:
[ <span>Hello</span> ]
作用：搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
文档处理
attr(key,value)
HTML 代码:
<img/><img/>
jQuery 代码:
$("img").attr("src","test.jpg");
作用：取得或设置匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined 。在控制HTML标记上是必备的工具。
html()/html(val)
HTML 代码:
<div><p>Hello</p></div>
jQuery 代码:
$("div").html();
结果:
<p>Hello</p>
作用：取得或设置匹配元素的html内容，同类型的方法还有text()和val()。前者是取得所有匹配元素的内容。，后者是获得匹配元素的当前值。三者有相似的地方常用在内容的操作上。
wrap(html)
HTML 代码:
<p>Test Paragraph.</p>
jQuery 代码:
$("p").wrap("<div class='wrap'></div>");
结果:
<div class="wrap"><p>Test Paragraph.</p></div>
作用：把所有匹配的元素用其他元素的结构化标记包裹起来。
这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。 可以灵活的修改我们的DOM。
empty()
HTML 代码:
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
jQuery 代码:
$("p").empty();
结果:
<p></p>
作用：删除匹配的元素集合中所有的子节点。
Ajax处理
load(url,[data],[callback])
url (String) : 待装入 HTML 网页网址。
data (Map) : (可选) 发送至服务器的 key/value 数据。
callback (Callback) : (可选) 载入成功时回调函数。
代码：
$("#feeds").load("feeds.aspx", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});
作用：载入远程 HTML 文件代码并插入至 DOM 中。这也是Jquery操作Ajax最常用最有效的方法。
serialize()
HTML 代码:
<p id="results"><b>Results: </b> </p>
<form>
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<select name="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" name="check" value="check1"/> check1
<input type="checkbox" name="check" value="check2"
checked="checked"/> check2
<input type="radio" name="radio" value="radio1"
checked="checked"/> radio1
<input type="radio" name="radio" value="radio2"/> radio2
</form>
jQuery 代码:
$("#results").append( "<tt>" + $("form").serialize() + "</tt>" );
作用：序列化表格内容为字符串。用于 Ajax 请求。
工具
jQuery.each(obj,callback)
代码：
$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
});//遍历数组
$.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );//遍历对象
});
作用：通用例遍方法，可用于例遍对象和数组。
jQuery.makeArray(obj)
HTML 代码:
<div>First</div><div>Second</div><div>Third</div><div>Fourth</div>
jQuery 代码:
var arr = jQuery.makeArray(document.getElementsByTagName("div"));
结果:
Fourth
Third
Second
First
作用：将类数组对象转换为数组对象。使我们可以在数组和对象之间灵活的转换。
jQuery.trim(str)
作用：这个大家应该很熟悉，就是去掉字符串起始和结尾的空格。
1、查找所有符合条件的元素 find()
举例： $('ul').find('li').addClass('tmpExample');
查找页面中ul元素下的所有li元素，并为查找到的li元素增加tmpExample样式。
2、查找指定元素的兄弟节点 siblings()
举例：$('li#tmpCarrot').slblings().addClass('tmpExample');
查找ID为tmpCarrot的li元素所有的兄弟节点，并为查找到的兄弟节点增加tmpExample样式。
可以在slblings()的括号中添加选择器来查找指定条件的兄弟节点。如：slblings('.tmpClass'),就是查找类
为tmpClass的兄弟节点。
3、查找指定节点的下一个兄弟节点 next()
举例：$('li#tmpBroccoli').next().addClass('tmpExample');
查找ID为tmpBroccoli的li节点的下一兄弟节点。并为查找到的兄弟节点增加tmpExample样式。
4、查找指定节点的后面的所有兄弟节点 next()
举例：$('li#tmpBroccoli').nextAll().addClass('tmpExample');
查找ID为tmpBroccoli的li节点后面的所有兄弟节点。并为查找到的兄弟节点增加tmpExample样式。
5、查找指定节点的前一个兄弟节点 prev()
举例：$('li#tmpBroccoli').prev().addClass('tmpExample');
查找ID为tmpBroccoli的li节点的前一个兄弟节点。并为查找到的兄弟节点增加tmpExample样式。
6、查找指定节点的前面所有的兄弟节点 prevAll()
举例：$('li#tmpBroccoli').prevAll().addClass('tmpExample');
查找ID为tmpBroccoli的li节点的前面所有的兄弟节点。并为查找到的兄弟节点增加tmpExample样式。
可以在prevAll()的括号中添加选择器来查找指定条件的兄弟节点。如：prevAll('li.tmpClass'),就是查找当
前节点前面所有类为tmClass的兄弟节点。
7、查找所有符合条件的上级节点 parents()
举例：$('li#tmpCarrot').parents('div#tmpSelection').addClass('tmpExample');
查找ID为tmpCarrot的li节点所有id为tmpSelection的div上级节点。并为查找到的节点增加tmpExample样
式。
8、查找上级节点 parent()
举例：$('li#tmpCarrot').parent().addClass('tmpExample');
查找ID为tmpCarrot的li节点的上级节点。并为查找到的节点增加tmpExample样式。
9、查找子节点 children()
举例：$('div.tmpList').children('h4').addClass('tmpExample');
查找class为tmplist的div下面的子节点中为h4标签的。并为查找到的节点增加tmpExample样式。
10、查找到的节点集合中反选 not()
举例：$('ul li').not('li.tmpVegetables').addClass('tmpExample');
查找到的li集合中，除了class为tmpVegetables的节点，都增加一个tmpExample样式。
11、选择节点集合中的片段 slice()
举例：$('ul li').slice(1,4).addClass('tmpExample');
查找到的li集合中，选择从第1个（从0计数，第一个其实是第二个）节点开始的，向后4个节点，并为这4个
节点增加tmpExample样式。
12、向查找的结果集中添加节点 add()
举例：$('ul#tmpAnimals li').add('li#tmpBrocoli,li#tmpPepper').addClass('tmpExample');
id为tmpAnimals的ul节点下的li节点集，添加id为tmpBrocoli的li节点和添加id 为tmpPepper的li节点。并
将组合后的集合中所有li节点增加tmpExample样式。
13、结果集中选择指定元素 eq()
举例：$('ul li').eq(10).addClass('tmpExample');
页面ul下面的li集合中，给第10元素增加tmpExample样式。
扫一扫
2001
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
