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>

结果图:

时间： 2024-12-28 00:24:17

JS学习记录(jQuery补充一)的相关文章

JS学习记录(jQuery)

jQuery入门<html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery入门</title> </head> <body> <p id="content" class="first">青岛理工大学</p> <p id="content2&qu

JS学习记录（补充四）

History对象<html lang="en"> <head> <meta charset="UTF-8"> <title>History对象</title> </head> <body> <a href="Demo40.html">Demo40</a> <button onclick="forward()"&g

JS学习记录（补充三）

函数<html lang="en"> <head> <meta charset="UTF-8"> <title>函数</title> </head> <body> <button onclick="showName('ccy')">显示陈传印名字</button> <button onclick="showName('lzw

JS学习记录（补充二）

循环变量<html lang="en"> <head> <meta charset="UTF-8"> <title>循环变量</title> </head> <body> <script> /*1+2+3+...10*/ var i = 1; //循环变量的定义 var sum = 0; while (i <= 10) { //循环变量的判断 if (i % 2 =

JS学习记录（补充一）

国际通用命名规则<html lang="en"> <head> <meta charset="UTF-8"> <title>命名规则</title> </head> <body> <!--国际通用的命名规则:驼峰法则 <一:变量> 1:单个单词的全小写 var name = "lzw"; 2:多个单词 第一个单词全小写,其余单词首字母大写 var

学习记录jQuery的animate函数

很久之前就对jQuery animate的实现非常感兴趣,不过前段时间很忙,直到前几天端午假期才有时间去研究. jQuery.animate的每种动画过渡效果都是通过easing函数实现的.jQuery1.4.2中就预置了两个这样的函数: easing: {linear: function( p, n, firstNum, diff ) {return firstNum + diff * p;},swing: function( p, n, firstNum, diff ) {return ((

JS学习记录（事件补充一）

HTML事件<html lang="en"> <head> <meta charset="UTF-8"> <style> #container{ height: 800px; background-color: red; } </style> <!--<script> function loaded() { var name1 = document.getElementById("

js学习总结----jquery常用方法

http://jquery.cuishifeng.cn(可以看一下他的手册) 1.jQuery的回调函数 function fn1(value){ console.log('fn1函数'+value) } function fn2(value){ console.log('fn2函数'+value) } var $call = $.CallBacks();//创建一个回调函数的列表集合 $call.add(fn1)//向集合中增加一个叫做fn1的函数 $call.fire(100);//触发fi

js学习总结----jQuery之动画 ajax 事件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> //ajax $.ajax({ url:'json/test.txt?_='+Math.random(), type:"get&q