深入jQuery

最新推荐文章于 2022-05-07 09:11:47 发布

Zhweb_box

最新推荐文章于 2022-05-07 09:11:47 发布

阅读量175

点赞数

分类专栏： jq 文章标签： jquery

本文链接：https://blog.csdn.net/ZiXiaweb/article/details/109296597

版权

jq 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jQuery怎么获取并设置文本

text() 获取和设置文本

获取这个文本
var text = $(".div1").text()
console.log(text);
获取全部的文本
console.log($("div").text());//jquery里面封装了迭代的方法  隐式迭代

设置文本

只需要给text（参数）加了参数后就是给参数设置文本会覆盖原来的文本包括子元素如果新设置的文本包括了标签那么他是不会解析标签的当作文本内容来解析

 $("#setBtn").click(function () {
            $("#box").text("<p>我是新设置的文本</p>")
})

获取样式的方法

在所有的ie浏览器中，获取样式，要写准确的样式，例如我们这里写的获取上边框的宽度颜色

console.log($(".div1").css("border-top-width"));
console.log($(".div1").css("border-top-color"));

eg：

$(".div1").css({
            width:"300px",
            height:300,
           "background-color":"red",
            backgroundColor:"green",
            border:"10px solid gold"
        })

选择器

基础选择器
id选择器 $("#id名")
类选择器 ( " . 类名 " )
标签选择器 (" .类名")
标签选择器(".类名")标签选择器(“标签名”)
交集选择器 $(“div.two”)要选择元素是div 而且类名要是two 并集选择器
$(" . o n e, . t w o ") 这个是只要有类名为 o n e 或者 t w o 的都可以子代选择器$ (“父元素>子元素”)
后代选择器$(“父元素后代元素”)

eg:

$(function() {
    //需求1 :找到类名为father的盒 子下的所有子代div标签
        console.log($(".father>div"));
    //需求2 :我要找到类 名为father的盒子下的所有的子代div标签和p标签
    // console. 1og($(" . father>div, p")); // 获取到. father下的所有的子代div标签，和页面 上所有的p标签
    // console.1og($(" . father>(div, p)")); // 报错jquery里面 压根没这种写法
        console.log($(".father>div, .father>p" ));
    //需求3 :找到. father盒子下所有的后代div
        console.log($(".father div"));
    })

过滤选择器
过滤选择器前面都会加一个冒号
：odd找到索引号为奇数行的元素
：even找到索引号为偶数行的元素
：eq(index)找到传入的索引号对应的元素
eg:（隔行变色）

<script>
        $(function () {
            $("li:odd").css("backgroundColor","pink")
            $("li:even").css("backgroundColor","yellow")

            //把首行和最后一行变成金色
            $("li:eq(0)").css("backgroundColor","gold")
            $("li:eq(9)").css("backgroundColor","gold")

            //给li元素注册鼠标移入事件
            $("li").mouseover(function(){
                //在颜色修改之前先获取样式
                bgColor = $(this).css("backgroundColor");
                //当鼠标移入哪一行 哪一行就变绿
                $(this).css("backgroundColor","green")
            })

            //给li元素注册鼠标移出事件
            $("li").mouseout(function () {
                //当鼠标移出哪一行 哪一行就
                $(this).css("backgroundColor",bgColor)
            })
        })
</script>

jQuery获取属性及设置属性

获取属性 jquery对象.attr("")

$("#get").click(function () {
	console.log($("img").attr("src"));
    console.log($("img").attr("alt"));
    console.log($("img").attr("title"));
    console.log($("img").attr("sb"));
    console.log($("img").attr("aaa"));
    //undefined  如果这个属性  在元素中不存在  那么就会得到undefined
})

设置属性 jquery对象.attr(“属性名”,“属性值”)
原本就存在的属性设置之后就是修改原本就不存在那么就是添加
jquery对象.attr(“属性名”,“属性值”)

$("#set").click(function () {
    $("img").attr({
        src:"./img/02.jpg",
        "title":"京剧小生",
        "sb":"222",
        "aaa":"555"
    })
})

移除单个属性:

$("img").removeAttr("src");
$("img").removeAttr("aaa");

移除多个属性:

 ("img").removeAttr("src aaa");
  $("img).attr("src","")

遍历：
parent()返回被选元素的直接父元素

parents()返回被选元素所有祖先元素，一直返回到处

可以接收一个参数，用来得到他所有祖先元素的中的指定元素

parentsUntil()返回介于两个给定元素之间的所有祖先元素，不包括两边上的元素

实例：


<style>
    .ancestors *{
        display: block;
        border: 2px solid lightgray;
        color: lightgray;
        padding: 5px;
        margin: 15px;
    }
</style>
<body>
	<div class="ancestors">
         <div style="width:500px;">div(曾祖父)
             <ul>ul
                 <il>li
                    <span>span</span>
                 </il>
             </ul>
         </div>
     </div>
	<script src="../JS/jquery-1.8.3.js" type="text/javascript"></script>
	<script>
   		//查找指定元素的父元素  红
   		// $(document).ready(function() {
   		//     $("span").parent().css({"color": "red", "border": "2px solid red"});
   		// });
   		// //找到指定所有祖先元素
   		// $(function () {
   		//$("span").parents().css({"color":"blue","border":"2px solid blue"});
   		// });
   		//找到他所有祖先中指定元素
   		// $(function () {
   		//$("span").parents("ul").css({"color":"blue","border":"2px solid blue"});
   		// });
   		//找到指定元素之间的元素
   	 $(function () {
      $("span").parentsUntil("div").css({"color":"blue","border":"2px solid blue"});
    });
	</script>
</body>

以上都是向上寻找，接下来是想下寻找
childern()返回指定元素的直接子元素，也可以指定相关的搜索
$(“div”).children(“p.1”); 用来返回类名为“1”的所有是

子元素的

元素
find() 返回该元素的所有子元素，一直到最后一代，它也可以设置一个参数，用来指定的标签

例子：


<style>
    .ancestors *{
        display: block;
        border: 2px solid lightgray;
        color: lightgray;
        padding: 5px;
        margin: 15px;
    }
</style>
<body>
	<div class="ancestors">
	    <div style="width:500px;">div(曾祖父)
	        <ul>ul
	            <il>li
	                <span>span</span>
	            </il>
	        </ul>
	    </div>
	</div>
	<script src="../JS/jquery-1.8.3.js" type="text/javascript"></script>
	<script>
        //返回div的直接子元素
        // $(function () {
        //    $("div").children().css({"color": "red", "border": "2px solid red"});
        // });
        //返回所有的元素
        $(function () {
           $("div").find().css({"color": "red", "border": "2px solid red"});
        });
	</script>
</body>

接下来是返回同层次的元素，同胞元素
siblings()返回所选元素的所有同胞元素，它的参数用来指定要选择的元素标签
next()用于返回被选元素的下一个同胞元素
nextAll()用来返回被选元素所跟随的所有同胞元素
nextUntil()要指定一个参数，返回被选元素之间的同胞元素
prev() prevAll() prevUntil()与上面三个用法相似，只不过返回的是前边的