Jquery的学习

最新推荐文章于 2024-01-18 16:27:26 发布

Mccree1997

最新推荐文章于 2024-01-18 16:27:26 发布

阅读量195

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/Mccree1997/article/details/79000861

版权

javascript 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

Jquery选择器

Jquery的选择器类似与CSS的选择器

    <div>div1</div>
    <div>div2</div>
    <p>jack</p>
    <ul>
        <li>1</li>
        <li>2</li>
        <li id="third">3</li>
        <li>4</li>
    </ul>
   //Jquery代码
   //需要先引入Jquery.js
   $("ul").css("background-color","red");//整个UL颜色变红
   $("#third").css("background-color","pink");//ID为third的li变成粉色
   $("li#third,div").css("background-color","pink");//div和#third都变成了粉色

我们可以通过类似CSS选择器的方式选择到我们需要的节点，Jquery提供给了我们过滤器，子选择器，内容过滤等等方式来帮我们选择到一个节点，通过特有的方式来减少DOM操作。

基础过滤
:eq() 在匹配的集合中选择索引值为index的元素，从0开始
:even() ：从0开始，寻则到index为偶数的元素
:odd() ：从0开始，寻找index为奇数的元素，暂不演示
:focus ：选择当前获取焦点的元素
:gt() ：选择匹配集合中所有大于给定index的元素
:lt() ：选择匹配集合中所有小于给定index的元素
:not()：选择除给定元素外的节点

    <ul>
        <li>1</li>
        <li>2</li>
        <li id="third">3</li>
        <li>4</li>
    </ul>
   //Jquery.js
   //eq()
   $("li:eq(1)").css("background-color","pink");//第二个li变成粉色
   $("li:even()").css("background-color","yellow");//第0，2个变成黄色
   $("li:gt(1)").css("background-color","orange");//index为2和3的元素变成黄色
   $("li:gt(1)").css("background-color","orange");//卜想解释
    $("li:not(':eq(2)')").css("background-color","orange");//除li3都变成了橘色

子元素选择器
Jquery的子元素选择器和CSS的相同
:first-child 选择所有父级元素下的第一个子元素
:first-of-type 选择所有相同的元素名称的第一个兄弟元素
:last-child选择所有父级元素下的最后一个子元素
:last-of-type 选择所有相同的元素名称的最后一个兄弟元素
:nth-child() 选择父级元素下的第n个元素
:nth-last-child() 选择父级元素下的最后第n个元素
:nth-of-type() 选择第N个相同名称的兄弟元素
:nth-last-of-type() 选择最后第N个相同名称的兄弟元素
:only-child 如果该元素是这个父元素的唯一元素，则选中他
:only-of-type 如果该元素是这个兄弟元素中的唯一元素，则选择它

内容过滤

Jquery提供了对innerHTML的过滤
:contains()选择所有包含指定文本的元素。
:empty 选择了内容为空的元素
:has() 选择元素其中至少包含指定选择器匹配的一个种元素。
:parent() 选择所有含有子元素或者文本的父级元素。

    <div>div1</div>
    <div>div2</div>
    <div></div>
    <div><p></p></div>
    <p>jack</p>
    <p>div1</p>
    //Jquery.js
    $("p:contains('div1')").css("background-color","pink");
    $("div:empty").text("hello,world");
    $("div:has(p)").css("border","solid 1px #ccc");
    $("div:parent").css("border","solid 1px #ccc")//除了div[2]都被添加上了边框

部分表单选择器

:checkbox 选择所有类型为复选框的元素
:checked 选择所有被勾选的复选框元素
:disabled 选择所有被禁用的元素
:enabled 选择所有可用的表单元素
:file 选择所有类型为file的元素
:image 选择所有图像类型的元素
:password 选择所有类型为密码的元素
:radio 选择所有为单选框的元素
:reset 选择所有类型为重置的元素
:selected 获取 select 元素中所有被选中的元素
:submit 选择所有类型为submit的元素
:text 选择所有类型为text的元素

过滤

.eq() ：减少匹配元素的集合为指定的索引的哪一个元素。
.filter() ：筛选元素集合中匹配表达式或通过传递函数测试的那些元素集合。
.has()：功能等同于:has()
.map()：通过一个函数匹配当前集合中的每个元素
.not() ：等同于:not
.slice(start,end) ：得到start到end的元素，一个参数表示包括start和之后的元素

    <ul>
        <li>1</li>
        <li>2</li>
        <li id="third">3</li>
        <li>4</li>
    </ul>
    //Jquery.js
    $("li").eq(1).text('jack')//第二个li设置了文字节点jack;
    $("li.filter("#third").css("border","solid 1px #ccc");
    $("li").map(function(){
        this.innerHTML="jack";
    })
    $("li").slice(1).css("border","solid 1px green")

DOM属性

.addClass() 给元素添加指定类（可以多个）;
.attr() 获取匹配的元素集合中的第一个元素的属性的值或设置每一个匹配元素的一个或多个属性。
hasClass() 如果被选择的元素存在该属性则返回true
prop() 获取匹配的元素集中第一个元素的属性（property）值或设置每一个匹配元素的一个或多个属性。在处理表单中checked selected的时候应该使用prop，prop的返回值是true，而att的返回值时属性值本身，一个是true一个是checked。
removeAttr() 删除一个元素的属性值
removeClass() 删除一个元素的类，无参数则全部删除
toggleClass() 如果该元素存在这个类，则删除这个类，如果该元素没有这个类，这添加这个类
val() 提取表单元素的value值

/css
        .heightLight{
            background-color: #ffff00;
        }
        .borderBox{
            border: solid 2px pink;
        }
//HTML
        <div>div1</div>
        <div>div2</div>
        <div></div>
        <div><p></p></div>
        <img title="burning">
//Juqery.js
$("div:contains('div1')").addClass("borderBox heightLight");
//设置img的src
$("img").attr("src","https://www.baidu.com/img/bd_logo1.png");
//获取img的title属性
    var title=$("img").attr("title");
    $("div:nth-of-type(3)").text(title);
//查看是否存在该类
var is=$("div:contains('div1')").hasClass("borderBox");
    console.log(is);
    //利用html将第四个DIV变成button
$("div:nth-of-type(4)").html("<button>按钮</button>")
//删除img的title属性
$("img").removeAttr("title");

<form>
    <input type="text">
    <button type="button">按钮</button>
</form>
//val()方法
    var btn=$("button");
    btn.click(function(){
        console.log($("input").val());
    })