文章/答案/技术大牛

发布

jQuery入门到实践

共 7 篇文章

一、初识jQuery

清单首页jQuery入门到实践文章详情

清单「jQuery入门到实践」 03/07

三、jQuery属性操作

Dreamy.TZK

jQuery内容选择器

为了方便测试，先将DOM元素写为以下格式：

<div></div>
<div>我是div</div>
<div>我是div123</div>
<div><span></span></div>
<div><p></p></div>

1:empty找到既没有文本内容也没有子元素的指定元素。

这个选择器对于以上内容只能找到第一个 div。

Javascript

var $div = $('div:empty')
console.log($div)

2:parent 找到有文本内容或有子元素的指定元素

可以找到除第一个意外的四个元素

Javascript

var $div = $('div:parent')
console.log($div)

3:contains(text) 找到包含指定文本内容的指定元素

视内容找到包含内容的 div

Javascript

var $div = $('div:contains("我是div123")')
console.log($div)

4:has(selector) 找到包含指定子元素的指定元素

视搜索内容找到包含此子元素的元素

Javascript

var $div = $('div:has("span")')
console.log($div)

属性和属性节点

1、什么是属性对象身上保存的变量就是属性 Javascript

function Person() {}
var p = new Person()
p.name = 'tzk'

2、如何操作属性对象.属性名称 = 值对象.属性名称对象[‘属性名称’] = 值对象[‘属性名称’] Javascript

// 赋值属性
p['name'] = 'tzk'
// 获取属性
console.log(p.name)

3、什么是属性节点 <span name='xiaokang'></span> 在编写HTML代码时，在HTML标签中添加的属性就是属性节点。在浏览器中找到span这个DOM元素之后，展开看到的都是属性。在attributes属性中保持的所有内容都是属性节点。

4、操作属性节点 Javascript

var span = document.getElementsByTagName('span')[0]
// 设置属性
span.setAttribute('name', 'tzk')
// 获取属性
console.log(span.getAttribute('name'))

5、属性和属性节点的区别任何对象都有属性，但只有DOM对象才有属性节点

attr方法

1、attr(name|pro|key,val|fn) 方法

获取或者设置属性节点的值
参数
- 可以传递一个参数，代表获取节点的值无论找到多少个元素，只会返回第一个元素指定的属性节点的值。

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

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
        <script>
            $(function () {
                console.log($("span").attr('class')) // span1
            })
        </script>
    </head>

    <body>
        <span class="span1" name='name1'></span>
        <span class="span2" name='name2'></span>
    </body>

</html>

也可以传递两个参数，设置属性节点的值

如果设置值，找到多少个元素就会设置多少个元素。

如果设置的节点不存在，那么会新增该属性。

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

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
        <script>
            $(function () {
                $('span').attr('class', 'box')
            })
        </script>
    </head>

    <body>
        <span class="span1" name='name1'></span>
        <span class="span2" name='name2'></span>
    </body>

</html>

2、removeAttr(name) 节点

删除属性节点
参数会删除所有找到元素指定的属性节点
- 删除一个节点

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

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
        <script>
            $(function () {
                $('span').removeAttr('class')
            })
        </script>
    </head>

    <body>
        <span class="span1" name='name1'></span>
        <span class="span2" name='name2'></span>
    </body>

</html>

删除多个属性

只需要在传递参数时用空格隔开即可。

$('span').removeAttr('class name')

prop方法

prop方法与attr方法一致。

1、设置或新增属性

$("span").eq(0).prop('demo', 'name1')
$("span").eq(1).prop('demo', 'tzk')

2、获取属性

console.log($('span').prop('demo')) //name1

3、删除属性

Javascript

$("span").removeProp('demo')

4、操作属性节点

官方推荐在操作属性节点时，具有 true 和 false 两个属性的属性节点，如 checked, selected 或者 disabled 使用 prop(), 其他的使用 attr()

Javascript

console.log($('.input1').prop('checked')) //true
console.log($('.input1').attr('checked')) //checked
console.log($('.input2').prop('checked')) //false
console.log($('.input2').attr('checked')) //undefined

图片切换的小案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
    <script>
        $(function () {
            // 编写jQuery相关代码
            // 1. 给按钮添加点击事件
            var btn = document.getElementsByTagName('button')[0]
            btn.onclick = function () {
                // 2. 获取输入框输入的内容
                var input = document.getElementsByTagName('input')[0]
                var text = input.value
                // 3. 修改img的src属性节点的值
                $('img').attr('src', text)
                // $('img').prop('src', text)
            }
        })
    </script>
</head>

<body>
    <input type="text">
    <button>切换图片</button><br />
    <img src="https://www.baidu.com/img/dongsc_eb45d000832f8e889ff64951eaf7f381.gif" alt="">
</body>

</html>

jQuery类操作相关方法

<!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;
            }

            .class1 {
                width: 100px;
                height: 100px;
                background: red;
            }

            .class2 {
                border: 5px solid black
            }
        </style>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
        <script>
            $(function () {
                var btns = document.getElementsByTagName('button')
                })
        </script>
    </head>

    <body>
        <button>添加类</button>
        <button>删除类</button>
        <button>切换类</button>
        <div></div>
    </body>

</html>

1、添加与删除类

Javascript

btns[0].onclick = function () {
    // 添加多个类用空格隔开
    $('div').addClass('class1 class2')
}
btns[1].onclick = function () {
    // 删除多个类用空格隔开
    $('div').removeClass('class1 class2')
}

2、切换类

Javascript

btns[2].onclick = function () {
    // 多个用空格隔开
    $('div').toggleClass('class1 class2')
}

文本值相关操作

<!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;
            }

            div {
                width: 100px;
                height: 100px;
                border: 1px solid #000;
            }
        </style>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
        <script>
            $(function () {
                var btns = document.getElementsByTagName('button')
                })
        </script>
    </head>

    <body>
        <button>设置HTML</button>
        <button>获取HTML</button>
        <button>设置text</button>
        <button>获取text</button>
        <button>设置value</button>
        <button>获取text</button>
        <div></div>
        <input type="text">
    </body>

</html>

1、html([val|fn])，用于设置元素的 html 元素。

类似原生 js 中的 innerHTML 方法

如果传入参数，则代表将当前元素的 html 修改为参数输入内容 Javascript

btns[0].onclick = function () {
    $('div').html('<p>我是一个段落<span>我是一个span</span></p>')
}

如果不传入参数，则代表获取当前元素的 HTML 代码。

Javascript

btns[1].onclick = function () {
    console.log($('div').html())
}

2、text([val|fn])

类似原生 js 中的 innerText 方法。参数传入与 html() 方法一模一样

Javascript

btns[2].onclick = function () {
    $('div').text('<p>我是一个段落<span>我是一个span</span></p>')
}
btns[3].onclick = function () {
    console.log($('div').text())
}

3、val([val|fn|arr])

与 value 属性类似。参数传入与前两种一模一样。

Javascript

btns[4].onclick = function () {
    $('input').val('请输入内容：')
}
btns[5].onclick = function () {
    $('input').val()
}

操作样式方法

1、设置属性值

逐个设置 Javascript

$('div').css('width', '100px')
$('div').css('height', '100px')
$('div').css('background', 'red')

链式设置如果大于 3 步，建议分开 Javascript

$('div').css('width', '100px').css('height', '100px').css('background', 'blue')

批量设置参数可以传入一个对象，对象内传入 css 样式。 Javascript

$('div').css({
    width: '100px',
    height: '100px',
    background: 'red'
})

2、获取 css 样式。

传入参数即需要获取的样式名称。

Javascript

console.log($('div').css('width'))

尺寸和位置相关

尺寸

以width()方法为例。

<!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;
            }

            .father {
                width: 200px;
                height: 200px;
                border: 50px solid #000;
                background: red;
                margin-left: 50px;
                position: relative;
            }

            .son {
                width: 100px;
                height: 100px;
                background: blue;
                position: absolute;
                left: 50px;
                top: 50px;

            }
        </style>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
        <script>
            $(function () {
                var btns = document.getElementsByTagName('button')
                btns[0].onclick = function () {
                    // 获取元素的宽度
                    console.log($('.father').width()) //200
                }
                btns[1].onclick = function () {
                    console.log($('.father').width('500px'))
                }
            })
        </script>
    </head>

    <body>
        <div class="father">
            <div class="son"></div>
        </div>
        <button>获取</button>
        <button>设置</button>
    </body>

</html>

位置

1、offset() 获取距离窗口的偏移位。

获取例如获取距离左边的偏移位 $('div').offset().left
设置参数内传入一个对象，对象内写需要设置的属性 Javascript

btns[1].onclick = function () {
    $('.son').offset({
        left: 10
    })
}

Html

<!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;
            }

            .father {
                width: 200px;
                height: 200px;
                border: 50px solid #000;
                background: red;
                margin-left: 50px;
                position: relative;
            }

            .son {
                width: 100px;
                height: 100px;
                background: blue;
                position: absolute;
                left: 50px;
                top: 50px;

            }
        </style>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
        <script>
            $(function () {
                var btns = document.getElementsByTagName('button')
                btns[0].onclick = function () {
                    console.log($('.son').offset().left) //150
                }
                btns[1].onclick = function () {
                    $('.son').offset({
                        left: 10
                    })
                }
            })
        </script>
    </head>

    <body>
        <div class="father">
            <div class="son"></div>
        </div>
        <button>获取</button>
        <button>设置</button>
    </body>

</html>

2、position 获取元素距离定位元素的偏移位

该方法只有获取不能设置，但可以通过 css 方式进行设置

Html

<!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;
        }

        .father {
            width: 200px;
            height: 200px;
            border: 50px solid #000;
            background: red;
            margin-left: 50px;
            position: relative;
        }

        .son {
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
            left: 50px;
            top: 50px;

        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
    <script>
        $(function () {
            var btns = document.getElementsByTagName('button')
            btns[0].onclick = function () {
                console.log($('.son').position().left) //50
            }
            btns[1].onclick = function () {
                // 无法设置，即使设置也不生效
                $('.son').position({
                    left: 10
                })
            }
        })
    </script>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <button>获取</button>
    <button>设置</button>
</body>

</html>

scrollTop方法

1、获取滚动偏移量

元素 Javascript

btns[0].onclick = function () {
    console.log($('.scroll').scrollTop())
}

网页 Javascript IE 浏览器下可能无法获取，需要将 html 换成 body。常用写法如下： Javascript console.log($('html').scrollTop()+$('body').scrollTop())

console.log($('html').scrollTop())

2、设置滚动偏移量

参数传入为整型，而不是字符串类型。

元素 Javascript

btns[1].onclick = function () {
    $('.scroll').scrollTop(300)
}

网页 Javascript 同样的 IE 浏览器不可使用，需要对 body 进行设置。通常写法如下： Javascript $('html,body').scrollTop(300)

$('html').scrollTop(300)

jQuery入门到实践

三、jQuery属性操作

jQuery内容选择器

属性和属性节点

attr方法

prop方法

图片切换的小案例

jQuery类操作相关方法

文本值相关操作

操作样式方法

尺寸和位置相关

尺寸

位置

scrollTop方法

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐