回顾上一节:
$工具的类方法(类似java中的静态方法)
jQuery控制属性设置以及css样式设置
用jQuery实现全选框与复选框的事件:
本节内容:
在jQuery对象数组中,筛选出一部分元素:
过滤:first():获取匹配的第一个元素
last():获得匹配的最后一个元素
eq(N):获取匹配的第N或-N个元素
filter(selector):筛选出与指定表达式匹配的元素集合
has(selector):筛选出包含特定特点的元素的集合
not(selector):筛选出不包含特定特点的元素的集合
在jQuery对象数组中,根据选择器查找孩子、父母、兄弟标签
查找:
children():子标签中找
find():后代标签中找
parent():父标签
prevAll():前面所有的兄弟标签
nextAll():后面所有的兄弟标签
siblings():前后所有的兄弟标签
文档处理的增删改查
增(内、外部两种类型):
内部插入(前后两种类型插入方式)
内部插入(在元素之前或者之后两种类型插入方式):
删(两种方法):
改(replaceWith)与克隆(clone):
城市选择案例:
效果图:
代码如下 :
本节全部代码和内容图:
回顾上一节:
$工具的类方法(类似java中的静态方法)
each()
parseJSON()
trim()|type()|isArray|isFunctionjQuery控制属性设置以及css样式设置
Attribute()
attr removeAttr
addClass removeClass
prop
html|text|val
css();
offset();
positio();
scrollTop();
用jQuery实现全选框与复选框的事件:
<script type="text/javascript"> // 实现全选|全不选 $("input:checkbox:first").click(function() { // console.log(this.checked);//原生调法 // 留下全选框的状态 var flag = $(this).prop('checked'); $("input:checkbox:gt(0)").each(function() { // console.log(this) // console.log($(this)); // 将全选框的状态值赋值给其他所有的复选框 prop // $(this) 子复选框 $(this).prop("checked", flag); }); }); // 完善全选 $("input:checkbox:gt(0)").click(function() { var flag = true; //假设所有子复选框全部为true // 验证 遍历 $("input:checkbox:gt(0)").each(function() { // 在得到所有复选框时,一个一个判断,只要有一个取消 全选就取消 if (!$(this).prop("checked")) { flag = false; } }); // flag赋值给全选框 $("input:checkbox:first").prop("checked", flag); }); </script>
本节内容:
在jQuery对象数组中,筛选出一部分元素:
过滤:first():获取匹配的第一个元素
// 获取ul中所有的li元素,然后找到第一个元素 // $("ul>li").first().css("background","red"); // $("ul>li:first").css("background","yellow"); // $("ul>li:eq(0)").css("background","yellow"); // $("ul>li:lt(1)").css("background","yellow");
last():获得匹配的最后一个元素
// 找到最后一个元素 // $("ul>li").last().css("background","red");
eq(N):获取匹配的第N或-N个元素
// 找到指定的某一个元素,例如第3个 // $("ul>li").eq(2).css("background","pink")
filter(selector):筛选出与指定表达式匹配的元素集合
//--过滤出指定表达式匹配的元素集合 // 1.找到属性title为a的元素 // $("ul>li").filter("[title=a]").css("background","green") // 2.筛选除有title属性或者title属性不等于b的元素集合 // $("ul>li").filter("[title][title=a]").css("background","orange"); // 3.筛选出有title属性的元素集合 // $("ul>li").filter("[title]").css("background","green");
has(selector):筛选出包含特定特点的元素的集合
// 筛选出有<span>标签的元素集合 has // $("ul>li").has("span").css("background","pink")
not(selector):筛选出不包含特定特点的元素的集合
// 筛选出没有title属性的元素集合 // $("ul>li").not("[title]").css("background","black");
在jQuery对象数组中,根据选择器查找孩子、父母、兄弟标签
查找:
children():子标签中找
// 1.查找ul的所有子标签 // $("ul").children().css("color","red"); // 2.查找ul的第一个子标签,并且指定为li子标签 // $("ul").children("li").first().css("color","red"); // 3.查找ul的第四个子标签,并且指定为li子标签 // $("ul").children("li").eq(3).css("color","red"); // 4.通过下标 返回的是js对象 // console.log($("ul").children("li")[2]) // $($("ul").children("li")[2]).css("background","red")
find():后代标签中找
// 查找ul下面所有的span标签 // $("ul").find("span").css("background","red")
parent():父标签
// 查找b标签的父元素标签 // $("b").parent().parent().CSS("border", "1px solid red"); // 所有所有的父节点 直到根节点找到后结束 // console.log($("b").parents());
prevAll():前面所有的兄弟标签
// 查找第三个li标签前面所有的兄弟标签 // $("ul").children("li").eq(2).prevAll("li").css("background","red");
nextAll():后面所有的兄弟标签
// 查找第三个li标签后面所有的兄弟标签,并且只能是li标签 // $("ul").children("li").eq(2).nextAll("li").css("background","red");
siblings():前后所有的兄弟标签
// 查找第三个li标签前面所有的兄弟标签 // $("ul").children("li").eq(2).siblings('li').css("background","red");
文档处理的增删改查
增(内、外部两种类型):
内部插入(前后两种类型插入方式)
// append():将内容添加到指定的元素后面 // 例子: // 插入到最后面(给ul中最后一个li中插入一个a标签) // $(".oBox>ul").children("li").last().append($("<a href = '#'>百度一下</a>")) // appendTo():将内容添加到指定的元素前面 // 例子: // 插入到最后面(给ul中最后一个li中插入一个a标签) // $("<a href = '#'>百度一下</a>").appendTo($(".oBox>ul").children("li").last()) // 插入到最前面(给ul中第3个li中插入一个按钮) // 例子: // $(".oBox>ul").children().eq(2).prepend($("<button>按钮</button>")) // $("<button>按钮</button>").prependTo($(".oBox>ul").children().eq(2))
内部插入(在元素之前或者之后两种类型插入方式):
// 在属性title为b的li前面插入一个a标签 // $(".oBox>ul").children("li").filter("[title=b]").before("<a href ='#'>haha</a>") // 在属性title为b的li后面插入一个a标签 // $(".oBox>ul").children("li").filter("[title=b]").after("<a href ='#'>haha</a>")
删(两种方法):
// empty remove //清空ul中所有li的内容 // $(".oBox>ul").children('li').empty() //移除ul中所有的li(但不删除其中的文档内容) // $(".oBox>ul").children('li').remove()
改(replaceWith)与克隆(clone):
//把li下面所有的span标签替换为<a>标签 // $(".oBox>ul").find("span").replaceWith("<a href = '#'>呵呵</a>") // 克隆(clone): // 复制ul中的第一个子节点 追加到末尾 // $(".oBox>ul").append($(".oBox>ul").children().first().clone(false))
城市选择案例:
效果图:
代码如下 :
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> select { width: 200px; background-color: teal; height: 200px; font-size: 20px; } .btn-box { width: 30px; display: inline-block; vertical-align: top; } </style> <body> <h1>城市选择:</h1> <select id="src-city" name="src-city" multiple> <option value="1">北京</option> <option value="2">上海</option> <option value="3">深圳</option> <option value="4">广州</option> <option value="5">西红柿</option> </select> <div class="btn-box"> <!--实体字符--> <button id="btn-sel-all"> >> </button> <button id="btn-sel-none"> << </button> <button id="btn-sel"> ></button> <button id="btn-back"> < </button> </div> <select id="tar-city" name="tar-city" multiple> </select> </body> </html> <script src="jquery-1.12.4.js"></script> <script> $(function () { //1.全部到右边 $('#btn-sel-all').click(function () { //找到左边select下拉菜单的所有option项,把这些option项都添加到右边的select下拉菜单中去. $('#src-city>option').appendTo($('#tar-city')); }); //2.全部到左边 $('#btn-sel-none').click(function () { //找到右边select下拉菜单中的所有option项,把这些option项都添加到左边的select下拉菜单中去. $('#tar-city>option').appendTo($('#src-city')); }); //3.选中的到右边. $('#btn-sel').click(function () { //找到左边select下拉菜单中,被选中的option项, 把这些option项添加到右边的select下拉菜单中. $('#src-city>option:selected').appendTo($('#tar-city')); }); //4.选中的到左边. $('#btn-back').click(function () { //找到右边select下拉菜单中,被选中的option项,把这些option项添加到左边的select下拉菜单中. $('#tar-city>option:selected').appendTo($('#src-city')); }); }); </script>
本节全部代码和内容图:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!-- 导入JQuery script --> <link rel="stylesheet" type="text/css" href="" /> <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script> <title></title> <!-- 引入外部 --> <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function() { // 一、 在jQuery对象数组中,筛选出一部分元素 //1.1 过滤 // first():获取匹配的第一个元素 // 例子: // 获取ul中所有的li元素,然后找到第一个元素 // $("ul>li").first().css("background","red"); // $("ul>li:first").css("background","yellow"); // $("ul>li:eq(0)").css("background","yellow"); // $("ul>li:lt(1)").css("background","yellow"); // last():获得匹配的最后一个元素 // 例子: // 找到最后一个元素 // $("ul>li").last().css("background","red"); // eq(N):获取匹配的第N或-N个元素 // 例子: // 找到指定的某一个元素,例如第3个 // $("ul>li").eq(2).css("background","pink") // filter(selector):筛选出与指定表达式匹配的元素集合 // 例子: //--过滤出指定表达式匹配的元素集合 // 1.找到属性title为a的元素 // $("ul>li").filter("[title=a]").css("background","green") // 2.筛选除有title属性或者title属性不等于b的元素集合 // $("ul>li").filter("[title][title=a]").css("background","orange"); // 3.筛选出有title属性的元素集合 // $("ul>li").filter("[title]").css("background","green"); // has(selector):筛选出包含特定特点的元素的集合 // 例子: // 筛选出有<span>标签的元素集合 has // $("ul>li").has("span").css("background","pink") // not(selector):筛选出不包含特定特点的元素的集合 // 例子: // 筛选出没有title属性的元素集合 // $("ul>li").not("[title]").css("background","black"); // 二、 在jQuery对象数组中,根据选择器查找孩子、父母、兄弟标签 //1.2 查找 // children():子标签中找 // 例子: // 1.查找ul的所有子标签 // $("ul").children().css("color","red"); // 2.查找ul的第一个子标签,并且指定为li子标签 // $("ul").children("li").first().css("color","red"); // 3.查找ul的第四个子标签,并且指定为li子标签 // $("ul").children("li").eq(3).css("color","red"); // 4.通过下标 返回的是js对象 // console.log($("ul").children("li")[2]) // $($("ul").children("li")[2]).css("background","red") // find():后代标签中找 // 例子: // 查找ul下面所有的span标签 // $("ul").find("span").css("background","red") // parent():父标签 // 例子: // 查找b标签的父元素标签 // $("b").parent().parent().CSS("border", "1px solid red"); // 所有所有的父节点 直到根节点找到后结束 // console.log($("b").parents()); // prevAll():前面所有的兄弟标签 // 例子: // 查找第三个li标签前面所有的兄弟标签 // $("ul").children("li").eq(2).prevAll("li").css("background","red"); // nextAll():后面所有的兄弟标签 // 查找第三个li标签后面所有的兄弟标签,并且只能是li标签 // $("ul").children("li").eq(2).nextAll("li").css("background","red"); // siblings():前后所有的兄弟标签 // 查找第三个li标签前面所有的兄弟标签 // $("ul").children("li").eq(2).siblings('li').css("background","red"); // 三、文档处理的增删改查 // 增(内、外部两种类型): // 内部插入(前后两种类型插入方式): // append():将内容添加到指定的元素后面 // 例子: // 插入到最后面(给ul中最后一个li中插入一个a标签) // $(".oBox>ul").children("li").last().append($("<a href = '#'>百度一下</a>")) // appendTo():将内容添加到指定的元素前面 // 例子: // 插入到最后面(给ul中最后一个li中插入一个a标签) // $("<a href = '#'>百度一下</a>").appendTo($(".oBox>ul").children("li").last()) // 插入到最前面(给ul中第3个li中插入一个按钮) // 例子: // $(".oBox>ul").children().eq(2).prepend($("<button>按钮</button>")) // $("<button>按钮</button>").prependTo($(".oBox>ul").children().eq(2)) // 内部插入(在元素之前或者之后两种类型插入方式): // 在属性title为b的li前面插入一个a标签 // $(".oBox>ul").children("li").filter("[title=b]").before("<a href ='#'>haha</a>") // 在属性title为b的li后面插入一个a标签 // $(".oBox>ul").children("li").filter("[title=b]").after("<a href ='#'>haha</a>") // 删(两种方法): // empty remove //清空ul中所有li的内容 // $(".oBox>ul").children('li').empty() //移除ul中所有的li(但不删除其中的文档内容) // $(".oBox>ul").children('li').remove() // 改: //把li下面所有的span标签替换为<a>标签 // $(".oBox>ul").find("span").replaceWith("<a href = '#'>呵呵</a>") // 克隆(clone): // 复制ul中的第一个子节点 追加到末尾 // $(".oBox>ul").append($(".oBox>ul").children().first().clone(false)) }) </script> </head> <body> <h2>jQuery03:筛选、文档处理</h2> <!-- 筛选和查找案例 --> <ul> <li title>1</li> <p>sb</p> <p>nb</p> <li title="a">2</li> <li title="b">3</li> <li>ssss</li> <li title="a"><span><b>4sunzi</b></span></li> <li title="b"><span>54sunzi</span></li> <li>43534</li> <p>sb</p> <ol> <li>6</li> <li>7</li> </ol> <span>8erzi</span> </ul> <hr> <h3>文档处理(CURD)</h3> <div class="oBox" style="border: 1px solid red;height: 400px;"> <ul> <li>item1</li> <li title="b">item2</li> <ol> <li><span></span></li> <li><span></span></li> <li><span></span></li> </ol> <li>item3 <span>asdsa</span></li> <li>item4</li> <li>item5 <span>ashdkjas</span></li> </ul> </div> </body> </html>
摸鱼中,。。。。