jQuery属性操作

最新推荐文章于 2022-06-08 14:38:06 发布

金胜涛

最新推荐文章于 2022-06-08 14:38:06 发布

阅读量160

点赞数

分类专栏：前端 javascript jquery

本文链接：https://blog.csdn.net/weixin_44054088/article/details/89576068

版权

前端同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

javascript

15 篇文章 0 订阅

订阅专栏

jquery

4 篇文章 0 订阅

订阅专栏

jQuery内容选择器

    <script>
        //找到既没有文本内容也没有子元素的指定元素
        var $div=$('div:empty')
        console.log($div);

        //找到有文本内容或者子元素的指定元素
        var $div=$('div:parent');
        console.log($div);

        //找到包含指定文本内容的元素（如果其有子元素且子元素含有指定文本，同样会被选取）
        var $div=$('div:contains("我是div")');
        console.log($div);

        //找到包含指定子元素的指定元素
        var $div=$('div:has("span")');
        console.log($div);
    </script>

属性和属性节点

1、什么是属性？

对象身上保存的变量就是属性

2、什么是属性节点

在编写HTML代码时，在HTML标签中添加的属性就是属性节点

3、如何操作属性节点

DOM元素.setAttribute(‘属性名称’，‘值’)；//设置属性节点

DOM元素.getAttribute(‘属性名称’)；//获取属性节点

4、属性和属性节点的区别

属性存在于任何对象上，但是属性节点只存在于DOM元素上

jQuery–attr（）方法

$(‘DOM元素’).attr()

作用：设置或获取属性节点的值

可以传递一个参数，也可以传递两个参数

如果传递一个参数，代表获取属性节点的值

如果传递两个参数，代表设置属性节点的值

注意点：

如果是获取：无论找到多少个元素，都只会返回第一个元素指定的属性节点的值

如果是设置：找到多少个元素就会设置多少个元素；如果设置的属性节点不存在，那么系统就会自动新增

$(‘DOM元素’).removeAttr()

作用：删除属性节点

注意：

会删除所有找到的元素的指定属性节点

jQuery–prop（）方法

$(‘DOM元素’).prop()

prop（）方法和attr（）方法特性一致

注意：prop（）方法和attr（）方法的区别

<body>
    <input type="checkbox" checked >
    <script>
        var res=$('input').attr('checked');
        console.log(res);//checked 当checked不存在时   undefined
        var res2=$('input').prop('checked');
        console.log(res2);//true  当checked不存在时   false
    </script>
</body>

因此：官方推荐，在操作属性节点时，具有true和false两个属性的属性节点，如checked，selected或disabled使用prop（），其他的使用attr（）

jQuery类（class）操作相关方法

1、$(‘DOM元素’).addClass()

作用：给一个元素添加一个class；如果要添加多个，多个class名之间用空格隔开即可

2、$(‘DOM元素’).removeClass()

作用：给一个元素删除一个class；如果要删多个，多个class名之间用空格隔开即可

3、$(‘DOM元素’).toggleClass()

作用：切换class；有就删除，没有就添加

jQuery文本值相关操作

1、$(‘DOM元素’).html()

用法：和原生js中的innerHTML一模一样

2、$(‘DOM元素’).text()

用法：和原生js中的innerText一模一样

3、$(‘DOM元素’).val()

作用：给文本框设置value属性

jQuery操作样式方法

1、逐个设置

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

2、链式设置

<script>       $('div').css('width','100px').css('height','100px').css('backgroundColor','red');
</script>

3、批量设置

<script>
        $('div').css({
            width:'100px',
            height:'100px',
            backgroundColor:'blue'
        })
</script>

4、获取css样式值

<script>
	console.log($('div').css('width'));
</script>

jQuery尺寸和位置操作

1、获取元素的宽度

$(‘DOM元素’).width()

2、获取元素距离视图窗口的偏移位

$(‘DOM元素’).offset().left

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

$(‘DOM元素’).position().left

4、设置元素的宽度

$(‘DOM元素’).width(‘500px’)

$(‘DOM元素’).offset({

left:‘10px’

})

注意点：position()方法只能获取不能设置

jQuery的scrollTop方法

1、获取元素滚动的偏移位

$(‘DOM元素’).scrollTop()

2、获取浏览器滚动的偏移位

**注意点：**为了保证浏览器的兼容，获取浏览器滚动的便宜为需要按照如下写法

$(^{'} b o d y^{'}) . s c r o l l T o p () +$ (‘html’).scrollTop()

3、设置滚动的偏移位

$(‘DOM元素’).scrollTop(300)

4、设置浏览器滚动的偏移位

注意：为了保证浏览器的兼容，设置浏览器滚动偏移位时需要按照如下写法

$(‘html,body’).scrollTop(300)

金胜涛

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery属性操作

jQuery内容选择器 <script> //找到既没有文本内容也没有子元素的指定元素 var $div=$('div:empty') console.log($div); //找到有文本内容或者子元素的指定元素 var $div=$('div:parent'); console....
复制链接

扫一扫