jQuery

_喆
245 阅读4分钟

1.文本文档准备

2. hide 隐藏 show 显示 toggle 切换

// hide 隐藏 show 显示 toggle 切换
//$(selector).hide(speed,callback);
//$(selector).show(speed,callback);
//$(selector).toggle(speed,callback);
// 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
// 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

    <div>显示与隐藏测试</div>
    <button class="btn1">显示</button>
    <button class="btn2">隐藏</button>
    <button class="btn3">切换</button>

    <script src="./jquery.js"></script>
    <script>
        // hide 隐藏 show 显示 toggle 切换
        //$(selector).hide(speed,callback);
        //$(selector).show(speed,callback);
        //$(selector).toggle(speed,callback);
        // 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
        // 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
        $(".btn1").click(function(){
            console.log("1")
            $('div').show(1000,function(){
                setTimeout(function(){
                    console.log('10000执行函数')
                },2000)
            });
        })
        $('.btn2').click(function(){
            $('div').hide();
        })
        $('.btn3').click(function(){
            $('div').toggle();
        })

3. 淡入淡出

// fadeIn() 用于淡入已隐藏的元素。
// fadeOut() 用于淡出可见元素。
// fadeToggle() 可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
// fadeTo()  方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
//$(selector).fadeIn(speed,callback);
//$(selector).fadeOut(speed,callback);
//$(selector).fadeToggle(speed,callback);
//$(selector).fadeTo(speed,opacity,callback);

// 必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
// 可选的 callback 参数是该函数完成后所执行的函数名称。
// fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

4.滑动

//$(selector).slideDown(speed,callback); 用于向下滑动元素。
//$(selector).slideUp(speed,callback);用于向上滑动元素。
//$(selector).slideToggle(speed,callback);可以在 slideDown() 与 slideUp() 方法之间进行切换。

5.动画

//animate() 方法用于创建自定义动画。
//$(selector).animate({params},speed,callback);
//动画操纵多个属性
//使用相对值 += -= 等
//使用预定值 toggle
// 使用队列功能 :这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。

        $(".btn1").click(function () {
            $('div').animate({
                left: '+=250px',
                opacity: '0.5',
                height: 'toggle',
                width: '+=150px'
            }, 2000)
        })
        $(".btn2").click(function () {
            $('div').animate({ height:'250px',opacity:'0.4'},1000)
            $('div').animate({ opacity:'0.8',width:'250px'},1000)
            $('div').animate({ height:'150px',opacity:'0.4',},1000)
            $('div').animate({ width:'150px',opacity:'0.8'},1000)
        })
    </script

6.css样式操作

//返回指定的 CSS 属性的值 $("p").css("background-color");
//设置指定的 CSS 属性 $("p").css("background-color","yellow");
//设置多个 CSS 属性 $("p").css({"background-color":"yellow","font-size":"200%"});

7.设置元素

// text() - 设置或返回所选元素的文本内容  $("#test1").text("Hello world!");
// html() - 设置或返回所选元素的内容（包括 HTML 标记）
// val() - 设置或返回表单字段的值

//attr() 方法也允许您同时设置多个属性。

// text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
i表示当前元素在父元素中所有i元素中的坐标 
$("#test1").text(function (i, origText) {
    return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
});

        $(document).ready(function () {
            $("#btn1").click(function () {
                console.log($("#test1").text())//这是一个段落
                $("#test1").text("Hello world!");
            });
            $("#btn4").click(function () {
                $("#test1").attr({
                    title:'你好',
                })
            });
            $("#btn2").click(function () {
                $("#test2").html("<b>Hello world!</b>");
            });
            $("#btn3").click(function () {
                $("#test3").val("RUNOOB");
            });
        });

   <script>
        $(document).ready(function () {
            $("#btn1").click(function () {
                $("ul p").text(function (i, origText) {
                    return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
                });
            });

            // $("#btn2").click(function () {
            //     $("#test2").html(function (i, origText) {
            //         return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";
            //     });
            // });

        });
    </script>
</head>

<body>

    <p >这是一个有 <b>粗体</b> 字的段落。</p>
    <p >这是另外一个有 <b>粗体</b> 字的段落。</p>
    <ul>
        <p >这是一个有 <b>粗体</b> 字的段落。</p>
        <button></button>
        <p >这是另外一个有 <b>粗体</b> 字的段落。</p>
    </ul>
    <button id="btn1">显示 新/旧 文本</button>
    <button id="btn2">显示 新/旧 HTML</button>

8.设置属性

attr() 方法也允许您同时设置多个属性。
"title": "jQuery 教程"  设置属性值
$("#runoob").attr('title','你好'); 设置属性值
$("#runoob").attr('title');获取属性值

    <p><a href="//www.runoob.com" id="runoob">菜鸟教程</a></p>
    <button>修改 href 和 title</button>
    <p>点击按钮修改后，可以查看 href 和 title 是否变化。</p>

    <script src="./jquery.js">
    </script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("#runoob").attr({
                    "href": "http://www.runoob.com/jquery",
                    "title": "jQuery 教程"
                });
                // 通过修改的 title 值来修改链接名称
                title = $("#runoob").attr('title');
                $("#runoob").html(title);
            });
        });
    </script>

9.添加子元素

// append() -  结尾添加子元素  可添加 text也可添加HTML
// prepend() - 开头添加子元素 可添加 text也可添加HTML
//append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML  

        $(".btn1").click(function(){
            $(".li1").append("你好")
            $('.li1').append("<p>添加HTML列表</p>")
        })

        $(".btn2").click(function(){
            console.log(1)
            console.log($("li")[1])
            $($("li")[1]).prepend("prepend你好")
            $($("li")[1]).prepend("<p>prenpend添加HTML列表</p>")
        })

10.添加同级别的元素

// after() - 在被选元素之后插入内容
// before() - 在被选元素之前插入内容
//after() 和 before() 方法添加若干新元素
 $("body").after(txt1,txt2,txt3);        // 追加新元素

        $(".btn1").click(function(){
            $(".li1").append("你好")
            $('.li1').append("<p>添加HTML列表</p>")
        })

        $(".btn2").click(function(){
            console.log(1)
            console.log($("li")[1])
            $($("li")[1]).prepend("prepend你好")
            $($("li")[1]).prepend("<p>prenpend添加HTML列表</p>")
        })

11.删除元素

        // remove() - 删除被选元素（及其子元素）
        // empty() - 从被选元素中删除子元素
          //remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
        //删除 class="italic" 的所有 <p> 元素：
        $(".btn3").click(function () {
            $("p").remove(".italic");
        });

        // remove() - 删除被选元素（及其子元素）
        // empty() - 从被选元素中删除子元素
        $(".btn1").click(function () {
            $("#div1").remove();
        });
        $(".btn2").click(function () {
            $("#div1").empty();
        });
        //remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
        //删除 class="italic" 的所有 <p> 元素：
        $(".btn3").click(function () {
            $("p").remove(".italic");
        });

12 class操作

// $("div").addClass("base") 增加class
// $("div").addClass("red base") 
// $("div").removeClass("base red") 删除 class
$("div").toggleClass("base red") //有则产出class 没有则创建class
// classList.add remove toggle
获取className $("div").attr('class')

13.获取宽度高度

console.log($("div").width())//width
console.log($("div").innerWidth())//width+padding
console.log($("div").outerWidth())//width+padding+border
console.log($("div").outerWidth(true))//width++padding+border+margin

14.遍历祖先 后代 同胞

14.1 遍历祖先

// parent() 返回被选元素的直接父元素。

// parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)  
//$("span").parents("ul"); 返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素：

// parentsUntil() 返回介于两个给定元素之间的所有祖先元素。
//$("span").parentsUntil("div"); 返回介于 <span> 与 <div> 元素之间的所有祖先元素：

14.2 遍历后代

//children() 方法返回被选元素的所有直接子元素。
//children('elem')
// $("div").children("p.1"); 返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素

//find('elem')
//$("div").find("span");返回属于 <div> 后代的所有 <span> 元素
//$("div").find("*");返回 <div> 的所有后代

14.3 遍历同胞

//siblings()  siblings('elem')方法返回被选元素的所有同胞元素
//next() 方法返回被选元素的下一个同胞元素。
//nextAll() 方法返回被选元素的所有跟随的同胞元素。

//nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
//$("h2").nextUntil("h6");  返回介于 <h2> 与 <h6> 元素之间的所有同胞元素

//prev(), prevAll()   prevUntil() 方法 向上同理

14.4 遍历祖先 后代 同胞 练习

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <p>
            <span>你好1</span>
            <span>你好2</span>
        </p>
    </div>
    <ul>
        <span>0</span>
        <li>1
            <span>span1</span>
        </li>
        <li>2</li>
        <li>3</li>
        <li class="myli">4</li>
        <li>5</li>
        <li>6
            <span>span6</span>
        </li>
        <li>7</li>
        <li>8
            <span>span8</span>
        </li>
        <p>123</p>
    </ul>
    <script src="./jquery.js"></script>
    <script>
        //祖先
        console.log($('p span').parent())//p
        console.log($('p span').parents())//p div body html
        console.log($('p span').parents('div'))//div
        console.log($('p span').parentsUntil('div'))//p

        //后代
        console.log($('ul').children())//所有ul的直接子元素
        console.log($('ul').find('span'))
        console.log($('ul').find('*'))
        
        //兄弟
        console.log($('ul li.myli').siblings())//所有的兄弟
        console.log($('ul li.myli').next())//下一个兄弟
        console.log($('ul li.myli').nextAll())//下面所有的兄弟
        console.log($('ul li.myli').nextUntil('span'))//当前下面到span之间的所有元素
        console.log($('ul li.myli').prev())//上一个兄弟
        console.log($('ul li.myli').prevAll())//上面所有的兄弟
        console.log($('ul li.myli').preveUntil('span'))//当前上面到span之间的所有元素

        

    </script>
</body>

</html>

15过滤

//first() 方法返回被选元素的首个元素。  $("div p").first();
//last() 方法返回被选元素的最后一个元素。$("div p").last();
//eq(index) 方法返回被选元素中带有指定索引号的元素 索引号从 0 开始
  $("p").eq(1);
  
//filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
//$("p").filter(".url");带有类名 "url" 的所有 <p> 元素：

//not() 方法返回不匹配标准的所有元素。not() 方法与 filter() 相反。

16 each方法

    //each() 方法为每个匹配元素规定要运行的函数。
    //$(selector).each(function(index,element))

each

avatar
文章
阅读
粉丝