jquery样式操作文档操作

最新推荐文章于 2024-07-31 14:35:30 发布

凤栖梧桐123

最新推荐文章于 2024-07-31 14:35:30 发布

阅读量94

点赞数

分类专栏： jquery 文章标签： jquery 前端

本文链接：https://blog.csdn.net/weixin_46673625/article/details/125467600

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

样式操作

样式类操作

addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

示例代码
	$('.c1').addClass('c2');
	$('.c1').addClass('c2');
	$('.c1').hasClass('c2');
	$('.c1').toggleClass('c2');

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: purple;
            height: 200px;
            width: 200px;
            position: relative;

        }
        .c2{
            background-color: green;
            width: 50px;
            height: 50px;
            position: absolute;
            top: 20px;
            left:40px;
        }
    </style>
</head>
<body>
<div class="c1">
    <div class="c2">

    </div>
</div>
<script src="jquery.js"></script>
</body>
</html>

css样式

原生js:

标签.style.color = 'red';

jquery

设置一个css样式

        $('.c1').css('background-color','red');

同时设置多个css样式

  $('.c1').css({'background-color':'red','width':'200px'});

位置操作

查看位置
$('.c2').position(); //查看相对位置
   {top: 12, left: 12}
$('.c2').offset(); //查看距离窗口左上角的绝对位置
   {top: 20, left: 20}
设置位置
   $('.c2').offset({'top':'20','left':'20'});

jquery绑定事件的方法

原生js绑定点击事件
// $('.c1')[0].onclick = function () {
// this.style.backgroundColor = 'green';
// }
jquery绑定点击事件
$('.c1').click(function () {
$(this).css('background-color','green');
})

点击事件和滚动事件的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: #3377aa;
            width: 200px;
            height: 200px;
        }
        .c2{
            background-color: green;
            width: 100px;
            height: 1000px;
        }
        .c3{
            background-color: hotpink;
            width: 200px;
            height: 1000px;
        }
        .s1{
            position: fixed;
            left:20px;
            bottom:20px;
            height: 40px;
            width: 80px;
            background-color: #8f8f8f;
            line-height: 40px;
            text-align: center;
        }
        .s1 a{
            color: white;
            font-size: 14px;
            text-decoration: none;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<a href="top"></a>
<div class="c1"></div>
<button class="change-position">点击</button>
<div class="c2"></div>
<div class="c3"></div>
<span class="s1 hide">
    <a href="#top">返回顶部</a>
</span>
<script src="jquery.js"></script>
<script>
    $('.change-position').click(function (){
        $('.c1').offset({'top':200,'left':200})
    })
    $(window).scroll(function (){
        console.log($(window).scrollTop());
        if($(window).scrollTop()>=200){
            $('.s1').removeClass('hide')
        }else {
            $('.s1').addClass('hide')
        }
    })
    $('s1').click(function (){
        $(window).scrollTop(0);
    })
</script>
</body>
</html>

尺寸

$('.c1').height(); //content 高度
$('.c1').width(); //content 宽度
$('.c1').innerHeight();//content高度+padding高度
$('.c1').innerWidth(); //content宽度+padding宽度
$('.c1').outerHeight();//content高度+padding高度 + border高度
$('.c1').outerWidth();//content宽度+padding宽度+ border宽度
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: hotpink;
            width: 200px;
            height: 100px;
            border: 20px solid green;
            padding: 20px 15px;


        }

    </style>
</head>
<body>
<div class="c1"></div>
<script src="jquery.js"></script>
</body>
</html>

文本操作

html()//取得第一个匹配元素的html内容，包含标签内容
html(val)//设置所有匹配元素的html内容，识别标签，能够表现出标签的效果

text()// 取得所有匹配元素的内容，只有文本内容，没有标签
text(val)//设置所有匹配元素的内容，不识别标签，将标签作为文本插入进去

值操作

获取值
	input type='text'的标签--$('#username').val();
	input type='radio'标签获取被选中的标签的值 --- $(':radio:checked').val();
	input type='checkbox'标签获取被选中的标签的值 --- 直接$(':checkbox:checked').val();是不行的,需要循环取值  
		var d = $(':checkbox:checked');
		for (var i=0;i<d.length;i++){
			console.log(d.eq(i).val());
		}
		
	单选select --- $('#city').val();
	多选select --- $('#author').val(); // ["2", "3"]	

设置值
	input type='text'的标签 --- $('#username').val('李杰');
	input type='radio'标签 ---  $('[name="sex"]').val(['3']);
			如果 $('[name="sex"]').val('3'),所有标签的值都变成了'3';
	input type='checkbox'设置值 --- $('[name="hobby"]').val(['2','3'])
	单选select --- $('#city').val('1');  option value='1'
	多选select --- $('#author').val(['2','3'])

属性操作

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr(attrName)// 从每一个匹配的元素中删除一个属性

示例:
   设置单个属性
       $('.c1').attr('xx','oo');
   设置多个属性
       $('.c1').attr({'age':'18','sex':'alex'});
   查看属性
       $('.c1').attr('属性名');
   $('.c1').attr('xx');
删除属性
   $('.c1').removeAttr('xx');

prop -- 针对的是checked\selected\disabled..

查看标签是否有checked属性,也就是是否被选中
   attr $(':checked').attr('checked'); //checked -- undefined
   prop $(':checked').prop('checked'); //true -- false

       通过设置属性的方式来设置是否选中:
           $(':radio').eq(2).prop('checked',true); true和false不能加引号
           $(':radio').eq(2).prop('checked',false);

简单总结:
   1.对于标签上有的能看到的属性和自定义属性都用attr
   2.对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。
   具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

文档处理

添加到指定元素内部的后面
   $(A).append(B)// 把B追加到A
   $(A).appendTo(B)// 把A追加到B
   例：$('a').appendTo($('#d1'));
       $('#d1').append('a');
   #添加字符串照样能识别标签 *****
   $('#d1').append('<a href="http://www.jd.com">京东</a>');
添加到指定元素内部的前面
   $(A).prepend(B)// 把B前置到A
   $(A).prependTo(B)// 把A前置到B
   示例
       $('a').prependTo($('div'));

添加到指定元素外部的后面
   $(A).after(B)// 把B放到A的后面
   $(A).insertAfter(B)// 把A放到B的后面

添加到指定元素外部的前面
   $(A).before(B)// 把B放到A的前面
   $(A).insertBefore(B)// 把A放到B的前面

移除和清空元素
   remove()// 从DOM中删除所有匹配的元素。
   empty()// 删除匹配的元素集合中所有的子节点，包括文本被全部删除，但是匹配的元素还
   $('div').remove();
   $('div').empty();

替换
   replaceWith()
   replaceAll()
   示例:
       var a = document.createElement('a')
       a.href = 'http://www.baidu.com';
       a.innerText = 'xxx';

       $('span').replaceWith(a);
       $(a).replaceAll('span');

clone()克隆
   <button class="btn">屠龙宝刀,点击就送!</button>

$('.btn').click(function () {
// var a = $(this).clone(); //克隆标签
var a = $(this).clone(true); //连带事件一起克隆
$(this).after(a);

})