jQuery知识点整理3

最新推荐文章于 2022-04-16 16:25:56 发布

vision_seven7

最新推荐文章于 2022-04-16 16:25:56 发布

阅读量124

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/vision_seven7/article/details/107776307

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jQuery知识点整理3

jQuery操作属性

attr操作

设置单个属性

// 第一个参数：需要设置的属性名
// 第二个参数：对应的属性值
$obj.attr(name, value);
// 用法举例
$('img').attr('title','嘿，好久不见');
$('img').attr('alt','嘿，好久不见');

设置多个属性

// 参数是一个对象，包含了需要设置的属性名和属性值
$obj.attr(obj)
// 用法举例
$('img').attr({
    title:'嘿，好久不见',
    alt:'嘿，好久不见',
    style:'opacity:.5'
});

获取属性

// 传需要获取的属性名称，返回对应的属性值
$obj.attr(name)
// 用法举例
var oTitle = $('img').attr('title');
alert(oTitle);

移除属性

// 参数：需要移除的属性名，
$obj.removeAttr(name);
// 用法举例
$('img').removeAttr('title');

prop操作

在jQuery1.6之后，对于checked、selected、disabled这类boolean类型的属性来说，不能用attr方法，只能用prop方法。

// 设置属性
$(':checked').prop('checked',true);
// 获取属性
$(':checked').prop('checked');// 返回true或者false

val()/text/()html()

$obj.val()		获取或者设置表单元素的value属性的值
$obj.html() 	对应innerHTML
$obj.text()		对应innerText/textContent，处理了浏览器的兼容性

案例

表格全选反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin: 0;
        }
        .wrap{
            width:300px;
            margin:100px auto;
        }
        table{
            border-collapse: collapse;
            border-spacing: 0;
            border:1px solid #c0c0c0;
        }
        th,td{
            border:1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
    
</head>
<body>
<div class="wrap">
    <table>
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="j_cbAll">
            </th>
            <th>课程名称</th>
            <th>所属学院</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>JS</td>
            <td>前端学院</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>JS</td>
            <td>前端学院</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>JS</td>
            <td>前端学院</td>
        </tr>
        </tbody>
    </table>
</div>

<script src="js/jquery-1.11.1.js"></script>
    <script>
        $(function () {
            $("#j_cbAll").click(function () {
                $("#j_tb input:checkbox").prop("checked",$(this).prop("checked"));
            });
            $("#j_tb input:checkbox").click(function () {
                if($("#j_tb input:checkbox").length === $("#j_tb input:checked").length){
                    $("#j_cbAll").prop("checked",true);
                }else{
                    $("#j_cbAll").prop("checked",false);
                }
            });
        })
    </script>
</body>
</html>

jQuery尺寸和位置操作

width方法与height方法

设置或者获取高度，不包括内边距、边框和外边距

// 带参数表示设置高度
$('img').height(200);
// 不带参数获取高度
$('img').height();

获取网页的可视区宽高

// 获取可视区宽度
$(window).width();
// 获取可视区高度
$(window).height();

innerWidth/innerHeight/outerWidth/outerHeight

innerWidth()/innerHeight()	方法返回元素的宽度/高度（包括内边距）。
outerWidth()/outerHeight()  方法返回元素的宽度/高度（包括内边距和边框）。
outerWidth(true)/outerHeight(true)  方法返回元素的宽度/高度（包括内边距、边框和外边距）。

scrollTop与scrollLeft

设置或者获取垂直滚动条的位置

// 获取页面被卷曲的高度
$(window).scrollTop();
// 获取页面被卷曲的宽度
$(window).scrollLeft();

offset方法与position方法

offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素(offsetParent)的位置。

// 获取元素距离document的位置,返回值为对象：{left:100, top:100}
$(selector).offset();
// 获取相对于其最近的有定位的父元素的位置。
$(selector).position();

案例：固定导航栏 [17-固定导航栏.html]

<style>
        * {
            margin: 0;
            padding: 0
        }

        img {
            vertical-align: top;
        }

        .main {
            margin: 10px auto 0;
            width: 1000px;
        }

        .fixed {
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $(window).scroll(function () {
                //判断卷去的高度超过topPart的高度
                // 1：让navBar有固定定位
                // 2: 让mainPart有个marginTop
                if ($(window).scrollTop() >= $(".top").height()) {
                   $(".nav").addClass("fixed");
                   $(".main").css("marginTop",$(".nav").height()+10);
                }else {
                    $(".nav").removeClass("fixed");
                    $(".main").css("marginTop",10);
                }
            });
        });
    </script>
</head>
<body>
<div class="top" id="topPart">
    <img src="imgs/top.png" alt=""/>
</div>
<div class="nav" id="navBar">
    <img src="imgs/nav.png" alt=""/>
</div>
<div class="main" id="mainPart">
    <img src="imgs/main.png" alt=""/>
</div>

jQuery补充知识点

链式编程

什么时候可以使用链式编程？？
当jquery对象调用某一种方法返回值也是一个jquery对象那么就可以继续点出jquery方法
我们在是使用链式编程的时候一定要注意返回值的问题

<style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid plum;
        }
 </style>
 script src="./js/jquery-1.12.4.min.js"></script>
    <script>

        $(function () {
            $("div").width(100).width();    //不会报错  正常显示
            $("div").width(100).width().height(200);    //报错    
            $("div").width(100).height(200);    //不会报错  
        })


    </script>

通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 jQuery对象。

end(); // 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。

each方法

jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了。

作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数

// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素（DOM对象）
$(selector).each(function(index,element){});

多库共存

jQuery使用 $作为标示符，但是如果与其他框架中的$ 冲突时，jQuery可以释放$符的控制权.

var c = $.noConflict();// 释放$的控制权,并且把$的能力给了c

案例

五角星评分案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        li{
            float: left;
            font-size: 30px;
            color: red;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <ul id="ul">
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
    </ul>


    <script src="./js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // 需求1 ：当鼠标移入li元素时  当前li元素和他之前的兄弟li元素变实心 后面的li元素变空心
            // 需求2 ：当鼠标离开li元素  所有的li元素变空心
            // 需求3 ： 当鼠标单击li元素 鼠标离开后 被单击的li元素以及他之前的兄弟li元素变实心 后面的li元素变空心
        
            /*
            prev()  上一个兄弟元素
            prevAll()   是找之前所有的兄弟元素
            next()  下一个兄弟元素
            nextAll()   找后面左右的兄弟元素
            
            
            
            */ 

            $("#ul li").on("mouseenter", function(){
                // console.log("鼠标移入")

                // 不能一链到底
                // $(this).text("★").prevAll().text("★").nextAll().text("☆");

                // 使用end方法  恢复到上一次的状态
                $(this).text("★").prevAll().text("★").end().nextAll().text("☆");


                // $(this).text("★").prevAll().text("★");
                // $(this).nextAll().text("☆");

            }).on("mouseleave", function(){
                // console.log("鼠标移出")
                $("#ul li").text("☆");

                // 找到被点击的那个li元素  
                $("#ul li[sb='111']").text("★").prevAll().text("★")

            }).on("click",function(){
                // console.log("鼠标单击");
                // 为了记录当前被点击的li元素  那么我们给当前点击的li元素添加一个独一无二的属性
                $(this).attr("sb","111").siblings("li").removeAttr("sb")


            })



        })

    </script>
</body>
</html>

vision_seven7

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery知识点整理3

这里写目录标题jQuery操作属性attr操作prop操作val()/text/()html()案例jQuery尺寸和位置操作width方法与height方法innerWidth/innerHeight/outerWidth/outerHeightscrollTop与scrollLeftoffset方法与position方法jQuery补充知识点链式编程each方法多库共存案例jQuery操作属性attr操作设置单个属性// 第一个参数：需要设置的属性名// 第二个参数：对应的属性值$obj
复制链接

扫一扫

专栏目录