JS学习记录(jQuery补充一)

Posted 天上一片红

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS学习记录(jQuery补充一)相关的知识，希望对你有一定的参考价值。

伪类选择器
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
</head>
<body>
<h1>欢迎来到北京大学</h1>
<ul>
    <li>烟台大学</li>
    <li>鲁东大学</li>
    <li>山东大学</li>
    <li>清华大学</li>
    <li>北京大学</li>
</ul>
爱好：<input type="checkbox">篮球
<input type="checkbox">足球

<br>

<button id="run">Run</button>
<span style="position: relative">qwer</span>

</body>
<script src="../js/jquery-3.2.1.min.js"></script>
<script>
    /*获取第一个元素*/
    /*first伪类和first()方法获取的元素一样的。*/
    console.log($("li:first"));
    /*当作选择器来使用*/
    console.log($("li").first());
    /*当作一个方法使用*/
    /*获取最后一个元素*/
    console.log($("li:last"));
    console.log($("li").last());

    /*取非选择器*/
    console.log($("input:not(:checked)"));
    console.log($("input:checked"));

    /*索引值为偶数的元素 实际返回奇数行的元素，因为索引开始为0*/
    console.log($("li:even"));
    /*索引值为奇数的元素 实际返回偶数行的元素，因为索引开始为0*/
    console.log($("li:odd"));

    /*获取指定索引值得元素*/
    console.log($("li:eq(3)"));
    /*获取索引值大于指定值得元素 直到最后一个（不包括索引值本身）*/
    console.log($("li:gt(2)"));
    /*获取索引值小于指定值得元素 直到第一个（不包括索引值本身）*/
    console.log($("li:lt(2)"));

    /*获取所有的标题元素*/
    console.log($(":header").css("color", "red"));

    /*获取所有包含动画的元素*/
    $("#run").click(function () {
        $("span:not(:animated)").animate({"left": "+=20"}, 1000);
    });
</script>
</html>

结果图:

 

内容选择器
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容选择器</title>
</head>
<body>
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn </div>
<div>
    <p>杰瑞教育</p>
</div>
<div></div>
</body>
<script src="../js/jquery-3.2.1.min.js"></script>
<script>
    /*查找所有包含指定文本的元素*/
    console.log($("div:contains(\'John\')"));
    /*查找所有没有子元素或内容的元素*/
    console.log($("div:not(:empty)"));
    /*查找所有包含指定元素的元素*/
    console.log($("div:has(p)"));
    /*查找包含子元素或内容的元素*/
    console.log($("div:parent"));
</script>
</html>

结果图:

 

可见性
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可见性</title>
</head>
<body>
<div>烟台大学</div>
<div style="display: none">杰瑞教育</div>
<div>
    <input type="text" value="烟台大学">
    <input type="hidden" value="杰瑞教育">
</div>
</body>
<script src="../js/jquery-3.2.1.min.js"></script>
<script>
    /*查找所有隐藏或者type类型等于hidden的元素*/
    console.log($("div:hidden"));
    console.log($("input:hidden"));
</script>
</html><html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可见性</title>
</head>
<body>
<div>烟台大学</div>
<div style="display: none">杰瑞教育</div>
<div>
    <input type="text" value="烟台大学">
    <input type="hidden" value="杰瑞教育">
</div>
</body>
<script src="../js/jquery-3.2.1.min.js"></script>
<script>
    /*查找所有隐藏或者type类型等于hidden的元素*/
    console.log($("div:hidden"));
    console.log($("input:hidden"));
</script>
</html>

结果图:

 

属性选择器
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
<div id="div5">div5</div>
<div id="div51">div51</div>
<div class="div6">div6</div>
</body>
<script src="../js/jquery-3.2.1.min.js"></script>
<script>
    /*查找所有包含id属性的元素*/
    console.log($("div[id]"));
    /*查找所有属性值的等于某个值的元素*/
    console.log($("div[id=div2]"));
    /*查找所有属性值的不等于某个值的元素*/
    console.log($("div[id!=div2]"));
    /*查找属性值以某个值开头的元素*/
    console.log($("div[id^=div]"));
    /*查找所有属性值以某个值结尾的元素**/
    console.log($("div[id$=1]"));
    /*查找所有属性值包含某个值的元素**/
    console.log($("div[id*=5]"));
    /*复合选择器*/
    console.log($("div[id][id!=div2]"));
</script>
</html>

结果图:

 

子元素选择器
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素选择器</title>
</head>
<body>
<ul>
    <li>烟台大学</li>
    <li>鲁东大学</li>
    <li>山东工商学院</li>
    <li>北京大学</li>
</ul>
<div>
    <p>123</p>
</div>
<div>
    <p>345</p>
    <p>345</p>
</div>
</body>
<script src="../js/jquery-3.2.1.min.js"></script>
<script>
    /*返回符合条件的子元素*/
    console.log($("li:nth-child(1)"));
    /*返回第一个子元素*/
    console.log($("li:first-child"));
    /*返回最后一个子元素*/
    console.log($("li:last-child"));
    /*返回独生子*/
    console.log($("p:only-child"));

</script>
</html>

结果图:

 

表单选择器
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单选择器</title>
</head>
<body>
<form>
    <input type="button" value="Input Button"/><br>
    <input type="checkbox"/><br>

    <input type="file"/><br>
    <input type="hidden"/><br>
    <input type="image"/><br>

    <input type="password"/><br>
    <input type="radio"/><br>
    <input type="reset"/><br>

    <input type="submit"/><br>
    <input type="text"/><br>
    <select>
        <option>Option1</option>
        <option>Option2</option>
    </select>
    <textarea></textarea>
    <button>Button</button>

</form>
</body>
<script src="../js/jquery-3.2.1.min.js"></script>
<script>
    /*返回表单里的所有元素: input texttarea button select*/
    console.log($(":input"));
    /*返回type类型为button的和button标签元素*/
    console.log($(":button"));
    console.log($(":text"));
    console.log($(":checkbox"));
    console.log($(":radio"));
    console.log($(":image"));
    console.log($(":password"));
    console.log($(":reset"));
    console.log($(":submit"));
</script>
</html>

结果图:

 

表单对象属性
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单对象属性</title>
</head>
<body>
<form>
    <input name="email" disabled="disabled" /><br>
    <input name="id" /><br>
    <input type="checkbox" name="newsletter" checked="checked" value="Daily" /><br>
    <input type="checkbox" name="newsletter" value="Weekly" /><br>
    <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /><br>
    <select>
        <option value="1">Flowers</option>
        <option value="2" selected="selected">Gardens</option>
        <option value="3">Trees</option>
    </select>
</form>

</body>
<script src="../js/jquery-3.2.1.min.js"></script>
<script>
console.log($("input:enabled"));
console.log($("input:disabled"));
console.log($("input:checked"));
console.log($("select option:selected"));
</script>
</html>

结果图:

 

属性操作
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性操作</title>
</head>
<body>
<img src="../img/tu4.png" alt="图4" id="img" title="NB的安卓">
<button onclick="changeImg()">换图</button>
<button onclick="deleteAlt()">移除提示</button>
</body>
<script src="../js/jquery-3.2.1.min.js"></script>
<script>
    /*js提供的方法*/
    //    /*1:getAttribute*/
    //   var src = document.getElementById("img").getAttribute("src");
    //    /*2:点符号法*/
    //   var src = document.getElementById("img").src;



    /*jQuery提供获取属性的方法*/
    var src = $("#img").attr("src");
    console.log(src);

    /*jQuery提供修改属性的方法*/

    /*方法1:键值对方法  比较慢  属性需要一个一个修改*/
    //        $("#img").attr("src", "../img/tu1.png");
    //        $("#img").attr("alt", "图1");

    /*方法2:对象方法*/
    function changeImg() {
        var img = {
            src: "../img/tu1.png",
            alt: "图1"
        };
        $("#img").attr(img)
    }
    /*jQuery提供移除属性的方法*/
    function deleteAlt() {
        $("#img").removeAttr("alt");
    }
</script>
</html>

结果图:

分别给不同的元素添加不同的属性
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分别给不同的元素添加不同的属性</title>
</head>
<body>
<ul>
    <li id="l1">烟台大学</li>
    <li id="l2">烟台大学2</li>
    <li>烟台大学3</li>
    <li>烟台大学4</li>
</ul>
</body>
<script src="../js/jquery-3.2.1.min.js"></script>
<script>
   $("li").attr("id",function (index,att) {
       /*1:index:元素的索引
       * 2:att:某元素属性原来的值*/
       console.log(att);
       return "li"+(index+1);
   })
</script>
</html>

结果图:

 

样式类
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .h1{
            color: red;
            text-align: center;
            font-family: 宋体;
        }
        .h2{
            color: yellow;
            text-align: center;
            font-family: 宋体;
        }
        .h3{
            color: darkorange;
            text-align: center;
            font-family: 宋体;
        }
        .h4{
            color: blue;
            text-align: center;
            font-family: 宋体;
        }
    </style>
    <title>样式类</title>
</head>
<body>
<h1 class="title">欢迎大家来烟台</h1>
<ul>
    <li>烟台大学</li>
    <li>烟台大学2</li>
    <li>烟台大学3</li>
    <li>烟台大学4</li>
</ul>
</body>
<script src="../js/jquery-3.2.1.min.js"></script>
<script>
    /*方法1:attr属性方法实现*/
//    $(".title").attr("style","color:red","text-align: center","font-family: 宋体")
    /*方法2:添加样式类*/
//    $(".title").addClass("h1");


    $("li").addClass(function (index) {
        return "h"+(index+1);
    });

</script>
</html>

结果图:

 

移除和切换样式类
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .jereh{
            color: red;
            font-size: 50px;
            text-align: center;
        }
    </style>
    <title>移除和切换样式类</title>
</head>
<body>
<div class="jereh" id="jredu">杰瑞教育</div>
<button onclick="toggleCss()" >切换样式类</button>
</body>
<script src="../js/jquery-3.2.1.min.js"></script>
<script>
    /*移除样式类*/
//    $(".jereh").removeClass("jereh");
    /*切换样式类 没有就添加    有就删除*/
    function toggleCss() {
        $("#jredu").toggleClass("jereh");
    }
    /*切换样式  没有就添加  有就不变了*/
//     function toggleCss() {
        $("#jredu").toggleClass("jereh",true);
 //   }
</script>

</html>

结果图:

 

 

html
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html</title>
</head>
<body>
<div>杰瑞教育</div>
<div>杰瑞教育2</div>
</body>
<script src="../js/jquery-3.2.1.min.js"></script>
<script>
    /*获取所有匹配元素中第一个元素的内容*/
    console.log($("div").html());

    /*修改所有匹配元素的内容*/
    $("div").html("<h1>燕大</h1>");

    /*分别给不同的元素返回不同的结果*/
    $("div").html(function (index,val) {
        return val+(index+1);
    })
</script>
</html>

结果图:

text
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text</title>
</head>
<body>
<div>杰瑞教育1</div>
<div>杰瑞教育2</div>
</body>
<script src="../js/jquery-3.2.1.min.js"></script>
<script>
    /*获取所有匹配元素的内容*/
    console.log($("div").text(""));

    /*设置所有匹配元素的内容*/
//   ($("div").text("烟大"));

    $("div").text(function(index,val){
        return val +"hh";
    });


    /*html和text不同点总结:
    * 1:html不能使用于xml ,但是text可以.
    * 2:html有解析标签的能力, 但是text不可以.
    * 3:html只获取第一个匹配元素的值,text获取全部匹配元素的内容*/

</script>
</html>

结果图:

 

以上是关于JS学习记录(jQuery补充一)的主要内容，如果未能解决你的问题，请参考以下文章

JS学习记录（补充一）

26个jQuery代码片段使用技巧

JS学习记录（补充三）

JS学习记录（补充四）

JS学习记录（补充二）

js常用代码片段