jQuery知识点(下)
9、jQuery获取父、子、兄弟节点元素
9.1parent()、parents()获取父节点元素
9.1.1 parent()获取父一级节点元素
.parent()取得父级节点元素的jQuery对象
获得当前匹配元素集合中每个元素的父元素,使用选择器进行筛选是可选的。
几个上级就用几个.parent(),可连续使用。
以下代码现将所有p标签的父节点背景设置为蓝色,然后将class="selected"的p标签的父节点背景色设置为黄色。
代码清单:
<body>
<div><p>Hello</p></div>
<div class="selected"><p>Hello Again</p></div>
<script>
$("p").parent().css("background", "blue");
$("p").parent(".selected").css("background", "yellow");
</script>
</body>
网页效果:
.parent()[0] 取得父级节点元素的DOM对象
以下示例,使用.parent()[0]取得父节点DOM对象进行传参。
<asp:Repeater runat="server" ID="rTree">
<HeaderTemplate>
<ul class="head">
</HeaderTemplate>
<ItemTemplate>
<li class="item" alt='<%# Eval("ID") %>'>
<asp:Image runat="server" onmouseover="var item=$(this).parent()[0]; groupMouseOver(item)"onmouseout="var item=$(this).parent()[0];groupMouseOut(item)" Height="13px" CssClass="flag" />
<a rel='<%# Eval("Photo") %>' id='<%# Eval("ID") %>' href="#"><%# Eval("Name") %></a>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
9.1.2parents([expr])获取各级父节点元素
parents() 获得当前匹配元素集合中每个元素的祖先元素,使用选择器进行筛选是可选的。
.parents() 方法允许我们在 DOM 树中搜索这些元素的祖先元素,并用从最近的父元素向上的顺序排列的匹配元素构造一个新的 jQuery 对象。
从父元素开始匹配寻找,一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤 。
以下示例,在<b>标签中显示父元素标签名称:
代码清单:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<div>
<p>
<span>
<b>我的父元素是:</b>
</span>
</p>
</div>
<script>
var parentEls = $("b").parents()
.map(function () {
return this.tagName;
})
.get().join(", ");
$("b").append("<strong>" parentEls "</strong>");
</script>
</body>
</html>
网页效果:
9.2 children() 获取子节点元素方法
.children(selector)
返回匹配元素集合中每个元素的子元素,添加可选参数可通过选择器进行过滤。
找到类名为 "selected" 的所有 div 的子元素,并将其设置为蓝色:
$("div").children(".selected").css("color", "blue");
9.3 jQuery获取兄弟节点元素方法
siblings()方法用于获取所有同辈元素
next()用于获取节点之后的挨着的第一个符合筛选的同辈元素:$(".menuitem").next("div")
nextAll()用于获取节点之后的所有符合筛选的同辈元素,$(".menuitem").nextAll("div")
prev()、prevAll()获取节点之前的兄弟元素。
9.3.1 siblings()
siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的。
查找每个 p 元素的所有类名为 "selected" 的所有同胞元素:
$("p").siblings(".selected")
以下示例将每个 p 元素的所有类名为 "selected" 的同胞元素背景置为黄色:
代码清单:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<p>Hello</p>
<p class="selected">Hello Again</p>
<div>
<span class="selected">Hello!!</span>
<p>And Again</p>
</div>
<script>
$("p").siblings(".selected").css("background", "yellow");
</script>
</body>
</html>
网页效果:
9.3.2 next()、nextAll()
next()
next() 获得匹配元素集合中每个元素之后紧邻的同胞元素。如果提供选择器,则取回匹配该选择器的下一个同胞元素。
如果给定一个表示 DOM 元素集合的 jQuery 对象,.next() 方法允许我们搜索 DOM 树中的元素紧跟的同胞元素,并用匹配元素构造新的 jQuery 对象。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third">list item 3</li>
<li id="fourth">list item 4</li>
<li>list item 5</li>
</ul>
<script>
$('li.third').next().css('background-color', 'red');
$('li#fourth ').next().css('background-color', 'blue');
</script>
</body>
</html>
nextAll()
nextAll() 获得匹配元素集合中每个元素的所有跟随的同胞元素,由选择器筛选是可选的。$(".bg").nextAll().css("background", "green")
9.3.3 prev()、prevAll()
prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素,通过选择器进行筛选是可选的
prevAll() 获得当前匹配元素集合中每个元素的前面的所有同胞元素,使用选择器进行筛选是可选的。
$(function () {
$("a").prev().css("background", "pink")
$("#p1").prevAll().css("background", "blue")
});
9.3.4 获取兄弟节点应用
应用1 评分控件:
$("#rating li").mouseover(function () {
$(this).prevAll().andSelf().text("★").end().end().nextAll().text("☆");
})
应用2选美女:选中项高亮--highlight风格
$(function () {
var bg = $("#mv li").css("background-color");
$("#mv li").mouseover(function () {
$(this).css("background-color", "red").siblings().css("background-color", bg);
});
});
10、jQuery中对setInterval的调用
10.1 setInterval对方法的调用
10.1.1 常规写法:change方法在$(function () {})之外
以下示例实现图片自动切换。
<head>
<title></title>
<style type = "text/css">
li
{
display:none;
}
</style>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
setInterval("change()", 1000);
})
var i = 0;
function change() {
if (i == $("#mv a").length - 1) {
i = 0;
}
else {
i ;
}
$("#pic").attr("src", $("#mv a:eq(" i ")").attr("href"));
}
</script>
</head>
<body>
<ul id = "mv">
<li><a href=".\picture\53.jpg">图片0</a></li>
<li><a href=".\picture\67.jpg">图片1</a></li>
<li><a href=".\picture\72.jpg">图片2</a></li>
<li><a href=".\picture\36.jpg">图片3</a></li>
</ul>
<img id = "pic" src = ".\picture\00.jpg" alt="Alternate Text" />
</body>
10.1.2 change方法写在$(function () {})方法内部
setInterval()方法中调用方法时,直接使用方法名change传参。
<script type="text/javascript">
$(function () {
var i = 0;
setInterval(change, 1000);
function change() {
if (i == $("#mv a").length - 1) {
i = 0;
}
else {
i ;
}
$("#pic").attr("src", $("#mv a:eq(" i ")").attr("href"));
}
})
</script>
10.2 setInterval实现倒计时注册
使用attr("disabled", false),倒计时过程中禁用按钮功能
<head>
<title></title>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
var count = 5;
var interId;
$(function () {
interId = setInterval(setCount, 1000);
})
function setCount() {
if (count > 0) {
count--;
$("input[name=zc]").val("请仔细阅读协议," count "秒后再注册");
}
else {
$("input[name=zc]").attr("disabled", false).val("同意");
clearInterval(interId);
}
}
</script>
</head>
<body>
<input type = "text" name = "xy" value =""/>
<input type = "button" name = "zc" disabled="disabled" value ="请仔细阅读协议,5秒后再注册" />
//此处可用三种方式 disabled="disabled" disabled="true" disabled=true </body>
11、jQuery CSS控制
css() //设置或返回被选元素的一个或多个样式属性
$("p").css("background-color");
$("p").css("background-color","yellow");
addClass("myclass") //不影响其他样式)
removeClass("myclass") //移除样式
toggleClass("myclass") //如果存在样式则去掉样式,如果没有样式则添加样式
hasClass("myclass") //判断是否存在样式
$(function () {
$("#btn").click(function () {
$("body").toggleClass("dark");
if ($("body").hasClass("dark")) {
$("#btn").val("开灯");
}
else {
$("#btn").val("关灯");
}
})
})
控件获取聚焦和失去焦点
$(function () {
$("input[type=text]").focus(function () {
$(this).addClass("txt");
}).blur(function(){
$(this).removeClass("txt")
});
});
11.1 搜索文本框空值判断及处理 addClass() removedClass() val()
<style type ="text/css">
.color
{
color:Gray;
}
</style>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("input[name = search]").focus(function () {
//如果文本是初始值,做如下处理
if ($(this).val() == "请输入关键字!") {
$(this).val("").removeClass("color");
}
}).blur(function () {
if ($(this).val() == "") {
$(this).val("请输入关键字!").addClass("color");
}
});
})
</script>
11.2文本框空值控制 addClass hasClass removedClass
<style type="text/css">
.new
{
border: 2px dotted red;
}
</style>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("input[type=text]").each(function () {
$(this).focus(function () {
$(this).removeClass();
}).blur(function () {
if ($(this).val() == "") {
$(this).addClass("new");
}
});
});
});
11.3 选美女链式编程应用addClass、removedClass等方法
$(function () {
//实现mouseover效果和点击事件移动到另一个区域
$("#all li").each(
function movemethod() {
$(this).mouseover(function () {
$(this).css("cursor", "pointer");
$(this).addClass("color");
}).mouseout(function () {
$(this).removeClass("color");
}).click(function () {
//$(this).remove().removeClass().css("cursor", "auto").appendTo($("#mm"))
//实现新的样式效果以及点击再移回去(有问题的再次点击无法重复移动了)
$(this).remove().removeClass().appendTo($("#mm"))
.mouseover(function () {
$(this).css("cursor", "pointer");
$(this).addClass("mmcolor");
}).mouseout(function () {
$(this).removeClass("mmcolor");
}).click(function () {
$(this).remove().removeClass().css("cursor", "auto").appendTo($("#all"));
});
})
})
})
12、jQuery动态创建、添加删除:
12.1 jQuery创建、添加append() prepend()等
12.1.1动态创建超链接append() prepend() before() after()
a.before在被选元素a前插入指定的内容,在开始标签前添加元素
a.after在被选元素a后插入指定的内容,在结束标签外添加元素
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function(){
$link=$("<a href='http://www.qiushibaike.com'>糗事百科</a>");
$("#d1").append($link);
})
$("#prepend").click(function(){
$link=$("<a href='http://www.qiushibaike.com'>糗事百科</a>");
$("#d0").prepend($link);
})
$("#btnAfter").click(function(){
$link=$("<a href='http://www.qiushibaike.com'>糗事百科</a>");
$("#d1").after($link);
})
$("#before").click(function(){
$link=$("<a href='http://www.qiushibaike.com'>糗事百科</a>");
$("#d1").before($link);
})
})
</script>
12.1.2 动态创建文本框 append()empty()
$(function () {
$("#btn").click(function () {
//清空div
$("#d1").empty();
//获取文本框的值,转化成数值
var num = parseInt($("#txt").val());
//循环动态创建文本框加载到div中
for (var i = 1; i <= num; i ) {
var $txt = $("<input type='text' />");
$("#d1").append($txt);
//如果输出三个文本框,输出一个换行
if (i % 3 == 0) {
$("#d1").append($("<br />"));
}
}
})
})
12.1.3 动态创建表格,显示网站列表json对象 append()方法 $.each
$(function () {
var json = [
{ "name": "cnbeta", "url": "http://www.cnbeta.com" },
{ "name": "cnblogs", "url": "http://www.cnblogs.com" },
{ "name": "qiushibaike", "url": "http://www.qiushibaike.com" }
];
//动态创建控件,变量用$修饰 ,好识别,指示这是在jQuery的变量
var $table = $("<table id = 'tb'></table>");
$table.attr("border", "1px");
$("#d1").append($table); //此处是引用传值,修改$table,div中就改了
//遍历json,为每个子元素创建一个tr,并加到$table中,然后加数据td
$.each(json, function () {
var $tr = $("<tr></tr>");
$table.append($tr);
var $td = $("<td><a href = '" this.url "'>" this.name "</a></td>");
$tr.append($td); //$tr追加指向了$td指向的person,然后就跟$td没关系了
$td = $("<td>" this.url "</td>"); //这里是对$td变量重新赋值,没有改变上面已经追加到$tr中的对象//例如此处使用$td.empty(),则会修改对象(清空内容)
$tr.append($td);
});
})
12.2jQuery添加操作appendTo()、prependTo()等
appendTo(a)在被选元素a的结尾(仍然在内部)插入指定内容。
prependTo(a)在被选元素a的开头(仍位于内部)插入指定内容。
insertBefore(a)在被选元素a前插入指定的内容
insertAfter(a)在被选元素a后插入指定的内容
12.2.1 实现权限选择功能 option:selected
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("input[value=>]").click(function () {
$("#all option:selected").appendTo($("#sel"));
})
$("input[value=>>]").click(function () {
$("#all option").appendTo($("#sel"));
})
$("input[value=<]").click(function () {
$("#sel option:selected").appendTo($("#all"));
})
$("input[value=<<]").click(function () {
$("#sel option").appendTo($("#all"));
})
})
</script>
</head>
<body>
<select id="all" size="5" multiple="multiple">
<option>查询</option>
<option>添加</option>
<option>编辑</option>
<option>删除</option>
</select>
<input type="button" value=">" />
<input type="button" value="<" />
<input type="button" value=">>" />
<input type="button" value="<<" />
<select id="sel" size="5" multiple="multiple">
</select>
</body>
12.2.2无刷新评论及动态创建jQuery元素
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
//如果表不存在,创建一个表格加载到div中
var $tb = $("#tbcomment");
if ($tb.length <= 0) {
$tb = $("<table id ='tbcomment' ></table>");
$("#re").append($tb);
}
//获取值准备数据
var name = $("#userName").val();
var comment = $("#content").val();
//动态创建表的行加载
var $tr = $("<tr></tr>");
$tr.prependTo($tb);
//动态创建表的列加载数据
var $td = $("<td>" name "</td>");
$td.appendTo($tr);
$td = $("<td>" comment "</td>");
$td.appendTo($tr);
});
})
</script>
12.3jQuery删除remove()、empty()
remove()删除节点,empty()清空内容
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
//删除该节点
$("#mv li:last").remove();
//清空标签之间的内容
//$("#mv li:last").empty();
})
})
</script>
</head>
<body>
<input type="button" id="btn" value="remove" />
<ul id="mv">
<li>
贵妃
</li>
<li>
貂蝉
</li>
<li>
西施
</li>
</ul>
</body>
13、动画效果
13.1简单动画
$(function () {
$("input[value=btn]").click(function () {
$("#d1").hide(1500).show(1500).slideUp(1800).fadeIn(1500).toggle(1800).slideDown(1800).fadeOut(1800).slideToggle(1800);
})
$("input[value=toggle]").click(function () {
$("#d1").toggle(800).slideToggle(800);
})
$("#stop").click(function () {
("#d1").stop();
)
})
13.2复杂动画 animate()
$("#btn").click(function () {
$("#d1").animate({ "left": "200px", "top": "200px" }, 2000).animate({ "width": "400px", "height": "200px" }, 1000).animate({ "opacity": 0 }, 2000);
})
//左移
$("#btn1").click(function () {
$("#d1").animate({"left":"-=40"},800);
})
//右移
$("#btn2").click(function () {
$("#d1").animate({ "left": " =40" }, 800);
})
<input type="button" value="click" id="btn" /><br />
<input type="button" id="btn1" value="向左" /><input type="button" id="btn2" value="向右" />
<div id="d1"></div>
13.3 slider照片
$("#tb img").hover(function () {
$(this).animate({"width":"270px","height":"180px"},"slow")
}, function () {
$(this).animate({ "width": "150px", "height": "100px" }, "slow")
})
13.4 图片飞到鼠标点击的地方
$(function () {
$(document).click(function (e) {
var x = e.pageX -parseInt($("#pic").css("left")) ;
var y = e.pageY -parseInt($("#pic").css("top"));
$("#pic").animate({ left: " =" x, top: " =" y }, 3000);
});
})
13.5广告弹出与消失
$(function () {
$("#pic").animate({ right: 0, bottom: 0 }, 5000)
.animate({ "opacity": 0 }).animate({right:0,bottom:-120 },5000);
})
14、Tab切换等效果
14.1 QQTab
$(function () {
//全部隐藏
$("h3").next().hide();
//注册单击事件
$("h3").click(function () {
$(this).next().slideToggle(500);
});
//显示第一项
$("#qqTab h3:first").next().slideDown(500);
})
<div id="qqTab">
<h3>我的好友</h3>
<ul>
<li>jing</li>
<li>bang</li>
<li>悟空</li>
</ul>
<h3>陌生人</h3>
<ul>
<li>lad</li>
<li>007</li>
</ul>
<h3>黑名单</h3>
<ul>
<li>lad</li>
<li>芙蓉</li>
</ul>
</div>
14.2 TabControl
$("#qqTab li").mouseover(function () {
//1 bg
$(this).addClass("activeTab").siblings().removeClass("activeTab");
//2 div display
var index = $("#qqTab li").index($(this));
$("#tabs div").hide().eq(index).fadeIn("fast");
})
<div id="qqTab">
<ul>
<li class="activeTab">国内新闻</li>
<li>国际新闻</li>
<li>火星新闻</li>
</ul>
<div id="tabs">
<div id="tabPage1" >
国内新闻111111111111
</div>
<div id="tabPage2" style="display:none">
国际新闻2222222222222
</div>
<div id="tabPage3" style="display:none">
火星新闻333333333333
</div>
</div>
</div>
14.3伸缩导航条
$(function () {
$("#navigation li:not(.current_page) a").css("left", "-120px");
$("#navigation li:not(.current_page)").hover(function () {
$("a", $(this)).animate({"left":"0px"},"fast");
}, function () {
$("a", $(this)).animate({ "left": "-120px" }, "fast");
})
})
15.jQuery中trim()函数报错问题
经常碰到JQuery里的trim()函数在firefox支持,但是在IE里不支持
其主要原因是写法不对,下面是错误的写法:
var content = $('#content').val();
if(content.trim() == '')
alert('空');
上面的写法在firefox下不会报错,但在ie下确会报错
正确的写法应该为:
var content = $('#content').val();
if($.trim(content) == '')
alert('空');
或者为:
var content = $('#content').val();
if(jQuery.trim(content) == '')
alert('空');
16.Ajax请求的编码处理
XML格式字符串参数导致在Ajax请求时错误,需处理参数格式(编码处理),再请求。