管理选择器所得到的结果
用jQuery选择出来的元素与数组非常类似,可以通过jQuery提供的一系列方法对其进行处理。包括获取长度,查找某个元素、筛选元素、遍历每个元素等。
size() | 获取选择器中元素的个数,类似数组中的length |
---|---|
index(element) | 查找元素在集合中的位置 |
add() | 给集合添加元素 |
not() | 去除元素集合中的某个元素 |
filter() | 筛选元素集合中的元素 |
find() | 通过查询获取新的元素集合 |
each() | 对选择器中的元素进行遍历 |
示例代码
<!--jQuery管理选择器得到的结果演示-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>管理选择器得到的结果</title>
<script src="scripts/jQuery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
var li1 = $("li");
//查看包含元素的个数:length属性
alert(li1.length); //4
var li2 = $("li:eq(2)");
//index():
// 用法1:查找元素的位置在多个查找到的元素集合中的位置
var i = li1.index(li2);
alert(i); //2
//用法2:查找指定元素在其父亲下的子元素的索引
alert($("li:eq(2)").index()); //3
//add() 返回一个新的集合,包含所有,原来的集合不变
var temp = li1.add("span");
alert(temp.length); //5
alert(li1.length); //4
//not() 去除一部分,返回一个新集合,原来的集合不变
temp = li1.not(":odd"); //去掉奇数个
alert(temp.length); //2
//filter() 筛选出一部分,返回一个新集合,原来的集合不变
temp = li1.filter(":odd");
alert(temp.text()); //苹果小米
//find() 找指定元素下的符合选择器的子元素
temp = $("ul").find("li");
alert(temp.length); //4
//each() 对选择器中的元素遍历(循环) 重用
//index:元素索引
$("ul li").each(function (index) {
//this:当前对象,是js对象,转换成jQuery对象:$(this)
alert(index + "," + $(this).text()); //遍历输出
if(index==2) {
//提前结束循环,返回false
return false;
}
})
});
</script>
</head>
<body>
<h3>常用的手机品牌</h3>
<ul>
<span>test</span>
<li>华为</li>
<li>苹果</li>
<li>vivo</li>
<li>小米</li>
</ul>
<li>testli</li>
</body>
</html>
jQuery的一个强大地方就是可以使用链式操作,可以大大缩短代码的长度,其中有两个方法用的多,比如:end()-回到操作对象的上一个对象,andSelf()-将前面对象进行组合后共同处理。
jQuery对元素节点的操作
- jQuery元素节点的操作
通过jQuery来动态对节点进行操作是很容易的,对节点的操作主要分为:查询节点、创建节点、插入节点、删除节点、复制节点、替换节点、包裹节点、对节点的属性操作、对节点的样式操作、设置和获取节点的HTML、文本和值、遍历元素、对节点的CSS-DOM操作。 - 创建元素节点
可以通过使用jQuery的工厂函数$()来完成对节点的创建
var $node_1=$("<p></p>"); //创建一个空的元素节点
var $node_2=$("<p>hello</p>"); //创建一个带文本的元素节点
var $node_3=$("<p title='hi'>world</p>"); //创建一个带属性的元素节点
- 插入元素节点
append() | 向每个匹配的元素内部追加内容 |
---|---|
appendTo() | 将所有匹配的元素追加到指定的元素中 |
prepend() | 向每个匹配的元素内部前置内容 |
prependTo() | 将所有匹配的元素前置到指定的元素中 |
after() | 在每个匹配的元素之后插入内容 |
insertAfter() | 将所有匹配的元素插入到指定元素的后面 |
before() | 在每个匹配的元素之前插入内容 |
insertBefore() | 将所有匹配的元素插入到指定的前面 |
- 删除元素节点
remove()方法
var $remove_li=$("ul li:eq(1)").remove(); //删除ul元素中的第2li元素,返回被删除的li元素对象
$("ul li:eq(1)").remove("li[title!='苹果']");//通过传递参数来进行选择性的删除
detach()方法
var $detach_li=$("ul li:eq(1)").detach();
//和remove类似删除指定的元素,与remove不同的是,所有绑定的事件、附加的数据都会保留下来
empty()方法
$("ul li:eq(1)").empty();
//empty方法并不是删除元素节点,而是清空节点,它能清空元素中的所有后代节点
- 复制节点
clone()方法
$("li:eq(1)").clone().appendTo("ul"); //复制第二个li元素插入到ul中
//传递了一个参数为true,代表复制元素的同时复制元素中所绑定的事件
$("li:eq(1)").clone(true).appendTo("ul");
- 替换节点
replaceWith()方法和replaceAll()方法
$("li:eq(1)").replaceWith("<li>草莓</li>");//把第二个元素替换掉
$("<li>草莓</li>").replaceAll("li:eq(1)"); //把第二个li元素替换掉
//结果一样,语法颠倒
- 包裹节点
wrap()方法、wrapAll()方法和wrapInner()方法
$("li").wrap("<i></i>"); //用i标签把没个li标签包裹起来
$("li").wrapAll("<i></i>");//用i标签把多个li标签整体包裹起来,要是被包裹的多个元素有其它元素,其它元素会被放到包裹元素之后
$("li").wrapInner("<i></i>");//吧匹配到元素内部内容用i标签包裹起来
- 节点属性操作
设置获取属性的方法attr(), 删除属性的方法:removeAttr()
alert($("li:eq(1)").attr("title")); //获取第二个li元素的title属性
$("ul").attr({"title":"列表","id":"mysql"});//一次设置多个属性
$("li:eq(1)").removeAttr("title");//删除第二个li内的title属性
- 节点样式操作
获取和设置样式可以用前面讲的设置获取属性(attr())方法来实现
var li_class=$("li:eq(2)").attr("class"); //获取第二个li元素的class属性
$("li:eq(2)").attr("class","myclass");//给第二个元素设置class属性为myclass
追加样式使用addClass()方法
$("li:eq(2)").addClass("another");//给第二个li元素追加another类选择器,和前面设置的样式不同的功能会叠加,相同的功能会覆盖
移除样式使用removeClass()方法
$("li:eq(2)").removeClass("myClass"); //移除一个class选择器
$("li:eq(2)").removeClass("myClass another");//以空格方式隔开来同时移除多个class选择器
切换样式使用toggleClass()方法
$("li:eq(2)").toggleClass("another");//重复切换another选择器,已经使用的时候移除,没有使用的时候设置
判断是否有某个样式使用hasClass()方法
$("li:eq(2)").hasClass("another"); //有返回true,没有返回false
//此方法和$("li:eq(2)").is("another");等同
- 设置和获取HTML、文本和值
主要方法有html()方法、text()方法、val()方法
$("li:eq(2)").html("西瓜"); //设置第二个li元素的内容为西瓜
alert($("li:eq(2)").html());//获取第二个li元素的内容
$("li:eq(2)").text("<b>西瓜</b>");//设置第二个li元素的内容
alert($("li:eq(2)").text());//获取第二个li元素的内容
$("input").val("请输入电子邮箱地址");//设置input元素的value值
alert($("input").val());//获取指定input元素内的value值
$("#single").val("选择3号");//设置下拉框选中项
$(":multiple").val("选择2号","选择3号");//设置下拉列表选中多项
$(":checkbox").val(["check1","check2"]);//设置复选框选中项
$(":radio").val(["radio1"]);//设置单选框选中
- 遍历节点
children()方法:该方法用于获得匹配元素的子元素集合
alert($("ul").children().size()); //获取ul内子元素的数量
next()和prev()方法:用于获得匹配元素后面(前面)紧邻的同辈元素
$("#city").next(); //获取id为city元素的下一个同级元素
$("#city").prev().prev(); //获取id为city元素的上两个同级元素
parent()方法:用于取得匹配元素的父级元素
$("#city").parent(); //获取id为city元素的父级元素
siblings()方法:该方法用于获取匹配元素前后所有的同辈元素
$("#city").siblings(); //获取id为city元素的前后所有个同级元素
closest()方法:该方法用于取得最近的匹配元素。首先检查当前元素是否匹配,如果匹配则直接返回元素本身,如果不匹配则逐级向上查找父元素,找到则返回,找不到则返回空的对象。
- CSS-DOM技术简单来说就是对读取和设置style对象的各种属性。
常用的CSS-DOM方法如下
获取和设置某个元素的样式属性
$("p").css("color"); //取得段落的color样式属性的值
$("p").css({"color":"#ff0011","background":"blue"});//将所有段落的字体颜色设置为红色并且背景为蓝色
$("p").css("color":"red");//将所有段落字体设为红色
获取和设置元素的宽度和高度
$("p").height(); //取得段落的高度
$("p").height(20);//将所有段落的高设为20px
$("p").width();//获取所有段落的宽度
$("p").width(20); //将所有段落的宽度设为20px
关于定位元素定位的几个常用方法
scrollTop()和scrollLeft()方法
$("div.demo").scrollTop(300); //设置相对滚动条顶部的偏移
var p=$("p:first");
$("p:last").text("scrollTop:" + p.scrollTop());//获取第一段相对滚动条顶部的偏移
$("div.demo").scrollLeft(300); //设置相对滚动条左侧的偏移
var p=$("p:first");
$("p:last").text("scrollLeft:" + p.scrollLeft());//获取第一段相对滚动条左侧的偏移
offset()方法:获取和设置元素在当前视窗的相对偏移,主要有top和left属性。
$("#dv").offset({top:10,left:30});//设置dv的偏移量
var $offset = $("#dv").offset();
//获取dv相对视窗的偏移量
$("dv").html("left: " + $offset.left + ", top: " + $offset.top);
关于offset()方法的一个漂浮块小程序:
<!--在浏览器中生成一个漂浮的块,遇到边界改变运动方向-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div漂浮运动块</title>
<style type="text/css">
div{
position: absolute;
width: 150px;
height: 30px;
border: 3px solid yellow;
background-color: cyan;
}
</style>
<script src="scripts/jQuery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
//利用定时器
window.setInterval(move,20);
});
var leftFlag = 1;
var topFlag = 1;
function move() {
//窗口的宽度和高度
//当前div的宽度和高度
var maxLeft = $(window).width() - $("div").width();
var maxTop = $(window).height() - $("div").height();
var offset = $("div").offset();
//当前左偏移量
var left = offset.left;
//当前上偏移量
var top = offset.top;
if(left >= maxLeft || left <= 0) {
leftFlag = -leftFlag;
}
if(top >= maxTop || top <= 0) {
topFlag = -topFlag;
}
//移动
left = left + 2*leftFlag;
top = top + 2*topFlag;
$("div").offset({"left":left,"top":top});
}
</script>
</head>
<body>
<div>这是一个漂浮的块</div>
</body>
</html>
position()方法:获取匹配元素相对父元素的偏移,同样有两个属性top和left。
var p = $("p:first);
var position = p.position();
//获取p元素在父容器中的偏移量
$("p:last").html("left: " + position.left + ", top: " + position.top);
元素节点操作示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery节点操作</title>
<style type="text/css">
.li{
background-color: yellow;
}
#div1{
background-color: yellow;
width: 200px;
height: 100px;
}
#div2{
position:absolute;
left: 50px;
top: 150px;
background-color: cyan;
}
</style>
<script src="scripts/jQuery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
//创建元素 属性,内容一步到位
var li = $("<li id='meizu'>魅族</li>");
//============添加元素=======================
//追加:append() 追加到指定元素的内部
//$("ul").append(li);
//appendTo() 作用和append()一样,但是反过来
//li.appendTo("ul");
//prepend() prependTo 前置到指定元素的内部
//$("ul").prepend(li);
//after() insertAfter() //添加到指定元素之后
//$("li:eq(0)").after(li); //添加到华为之后
//before() insertBefore() //添加到指定元素之前
//$("li:eq(0)").before(li); //添加到华为之前
//=============删除元素=======================
//给每一个li添加点击事件
$("li").click(function () {
//切换class属性,如果没有,则添加,如果有则删除 class=li
$(this).toggleClass("li");
})
//remove() 删除元素,不会保留事件和附加数据,适合删除后不再利用
/*var li1 = $("li:eq(0)").remove();
$("ul").append(li1); //从第一个移除,追加到最后一个位置*/
//detach() 删除元素,保留事件和附加数据,适合删除后再利用
//var li1 = $("li:eq(0)").detach();
//$("ul").append(li1);
//empty() 清空, 清空文本和子元素
//$("li:last").empty();
//============复制元素=============================
//clone()
//复制vivo到小米后面
//$("li:eq(2)").clone(true).appendTo("ul"); //true参数表示保留事件和附加数据
//============替换元素=========================
//replaceWith()
//$("li:eq(3)").replaceWith("<li>红米</li>");
//replaceAll() 作用一样,语法相反
//$("<li>红米</li>").replaceAll("li:eq(3)");
//============包裹元素==============================
//wrap() 每一个选中的li都包裹一个i标签 <i><li>...</li><i> <i><li>...</li><i>
//$("li").wrap("<i></i>")
//wrapAll() //所有li之外包裹一个i标签 <i><li></li><li></li><i>
//$("li").wrapAll("<i></i>") //使用<span>标签测试
//wrapInner() 匹配到元素内部 <li><i>...</i></li>
//$("li").wrapInner("<i></i>")
//============属性操作============================
//attr() 获取属性的值,设置属性的值
//获取
//alert($("li:eq(0)").attr("id"));
//设置
//$("li:eq(0)").attr("id","hh");
//alert($("li:eq(0)").attr("id"));
//设置多个值,使用JSON格式
//$("li:eq(0)").attr({"id":"hh","name":"hw"});
//alert($("li:eq(0)").attr("name"));
//removeAttr() 删除属性
//$("li:eq(0)").removeAttr("id");
//prop(),针对单选框复选框,checked,下拉框,列表框选择,selected
$("option:eq(1)").prop("selected",true);
//============节点样式操作==========================
//针对class属性直接提供了对应的方法
//addClass() 加class属性
//removeClass() 移除class
//toggleClass() 切换样式,如果有,则移除,如果没有,则添加
//hasClass() 是否有对应的样式,是:返回true,没有:false
//is() 等价于hasClass()
//在加载后,奇数索引的li背景色都是黄色
//$("li:odd").addClass("li");
//============设置和获取HTML、文本和值==================
//html() ---> 等价于js:innerHTML
//alert($("ul").html()); //返回内部所有的部分
//alert($("ul").text()); //只获取内部文本,标签不返回
//text() ---> 等价于js:innerText
//$("#info").html("<span>test</span>");
//$("#info").text("<span>test</span>"); //把<span>当成普通文本
//val() --> 等价于js:value
//alert($("select").val()); //获取select选中的值
//$("select").val("Dalian"); //设置一个值
//$("select").val(["Dalian","Tianjin"]); //设置多个值,使用数组
//============变量节点===========================
//children():所有子元素
//parent():父元素
//next():后一个兄弟, prev():前一个兄弟
//siblings() 所有的兄弟
//closest() 最近的,从它自己开始查找,如果不匹配,则逐级向上
//alert($("#span1").closest("div").html());
//============CSS-DOM===============================
//$("#span1").css("color","red"); //一个样式属性
/*$("#span1").css({"color":"red","background-color":"blue"});
alert($("#span1").css("color"));*/
//height():元素高度
//alert($("#div1").height());
//$("#div1").height(50);
//width():元素宽度
//============CSS-DOM 定位==========================
//scrollTop(),scrollLeft() 设置滚动条的滚动位置,
//$("select").scrollTop(500); //可能有浏览器不支持
//offset() 相对当前窗口的偏移,主要有两个属性,left,top
//获取偏移量
//alert($("#div2").offset().left + "," + $("#div2").offset().top);
//设置偏移量
$("#div2").offset({"left":200,"top":300});
});
</script>
</head>
<body>
<h3>常用的手机品牌</h3>
<ul>
<li id="huawei">华为</li>
<li>苹果</li>
<!--<span>test</span>--> <!--用于测试wrapAll-->
<li>vivo</li>
<li>小米</li>
</ul>
<select name="city" size="4" multiple>
<option value="Beijing" selected>北京</option>
<option value="Nanjing">南京</option>
<option value="Tianjin">天津</option>
<option value="Shijiazhuang">石家庄</option>
<option value="Dalian">大连</option>
<option value="Nanchang">南昌</option>
<option value="Zhengzhou">郑州</option>
</select>
<div id="info"></div>
<div id="div1">
<div><span id="span1">test</span></div>
</div>
<div id="div2">我是一个div</div>
</body>
</html>