jq02--style样式操作、css样式操作、标签属性操作、文本操作

1 样式操作

样式属性操作 .css()

作用：设置或获取元素的样式属性值（行内样式）

1. 设置样式属性操作：

a.设置单个样式：

// 第一个参数表示：样式属性名称

// 第二个参数表示：样式属性值

$(selector).css(“color”, “red”);

b.设置多个样式：（也可以设置单个）

// 参数为 {}（对象）

$(selector).css({“color”: “red”, “font-size”: “30px”});

2. 获取样式属性操作：

// 参数表示要获取的样式属性名称

$(selector).css(“font-size”);

此时，会返回”font-size”样式属性对应的值。

2 类操作

2.1添加类样式：

addClass(className) 为指定元素添加类className

$(selector).addClass(“liItem”);

注意：此处类名不带点，所有类操作的方法类名都不带点

2.2移除类样式（移除后样式没有）：

removeClass(className) 为指定元素移除类 className

$(selector).removeClass(“liItem”);//移除指定类名

$(selector).removeClass(); //不指定参数，表示移除被选中元素的所有类

2.3判断有没有类样式：

hasClass(calssName)判断指定元素是否包含类 className

$(selector).hasClass(“liItem”);

此时，会返回true或false

2.4切换类样式：

toggleClass(className)为指定元素切换类className，该元素有类则移除，没有指定类则添加。

$(selector).toggleClass(“liItem”);

注意点：

操作类样式的时候，所有的类名，都不带点（.）

经验：

1 操作的样式非常少，那么可以通过.css()这个方法来操作

2 操作的样式很多，那么要通过使用类的方式来操作

3 如果考虑以后维护方便（把CSS从js中分离出来）的话，推荐使用类的方式来操作。类比CSS书写位置（把css从html中分离出来）

前面内容特色总结：简约、“粗暴”、干净利落、直截了当

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 300px;
            height: 200px;
            background-color: pink;
            line-height: 200px;
        }
        .color{
            color: white;
        }
        .css{
            background-color: hotpink;
        }
    </style>
</head>
<body>
<button onclick="change1()">操作style样式</button>
<button onclick="change2()">添加css类</button>
<button onclick="change3()">删除color类</button>
<button onclick="change4()">切换color类</button>
<button onclick="change5()">判断是否有类</button>
<div class="box color">
    https://blog.csdn.net/muzidigbig/
</div>
</body>
<script src="jquery-3.3.1.js"></script>//1.引入jq库
<script>
//    $(function () {//事件写在标签中 写入口函数会报错
        function change1() {
            $('div').css({"width":"400px","fontSize":"30px"})
        }
        function change2() {
            $('.box').addClass('css')
        }
        function change3() {
            $('div[class]').removeClass('color')
        }
        function change4() {
            $('.box').toggleClass('color')
        }
        function change5() {
            console.log($('div').hasClass('color'));
            console.log($('div').hasClass('color1'));
        }
//    })
</script>
</html>

3 jq操作属性

3.1 操作元素的普通属性：attr(‘属性名’,’属性值’)

获取属性值：attr(‘属性名’)

<body>
<div class="box " style="width:200px;height: 200px;background-color: red;" onclick="change()">
</div>
<img style="width: 300px;height: 200px;"src="../jquery/img/b.jpg" alt="">

</body>

<script src="jquery-3.3.1.js"></script>
<script>
 //在此使用入口函数会报错
// $(function () {
// $('.box').click(function () {
 //修改box盒子的背景色
// $('.box').css('backgroundColor','green')
// });
 function change() {
 //每次发生点击事件增加元素的宽高
 var w = parseInt($('div').css('width'));
 var h = parseInt($('div').css('height'));
 $('div').css('width',w+20+"px");
 $('div').css('height',w+20+"px");
 $('.box').css('backgroundColor','green')
 }
 //发生点击事件改变图片
 $('img').click(function () {
 //indexOf('子字符串') 若存在返回出现的位置，若不存在返回-1
 if($('img').attr('src').indexOf("a")>=0){
 $('img').attr('src','../jquery/img/b.jpg')
 }else {
 $('img').attr('src','../jquery/img/a.jpg')
 }
 })
// })
</script>

3.2 操作节点的布尔属性（例如：selected、checked……只用写属性就能达到效果的）

prop()常用来判断添加或删除属性（相当于toggle（））

<body>
<button>全选</button>
<button onclick="bu()">全不选</button>
选择1：<input type="checkbox">
选择2：<input type="checkbox">
选择3：<input type="checkbox">
选择4：<input type="checkbox">
选择5：<input type="checkbox">
</body>
<script src="jquery-3.3.1.js"></script>
<script>
 $('button:first-child').click(function () {
// $('input:checkbox').attr('checked','checked')
 //prop()判断删除、添加该属性
 $('input:checkbox').prop('checked',true);
 });
 function bu() {
 $('input:checkbox').prop({'checked':false});
 }

<body>
<button onclick="fan2()">反选</button>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</body>
<script src="jquery-3.3.1.js"></script>
<script>
 //面向过程
 function fan() {
 var check= $('input');
 console.log(check);
 for(var i=0;i<check.length;i++){
 if($(check[i]).prop('checked')){
 $(check[i]).prop('checked',false);
 }else{
 $(check[i]).prop('checked',true);
 }
 }
 }
 //面向函数式思想，回调函数
 //在回调函数中，this是谁？
 //在循环过程中，循环哪个dom对象，回到函数中的this就指向哪个dom对象
 function fan1() {
 $('input:checkbox').each(function () {
 if($(this).prop('checked')){
 $(this).prop('checked',false);
 }else{
 $(this).prop('checked',true);
 }
 })
 }

 function fan2() {
 $("input:checkbox").each(function () {
 this.checked= !this.checked;
 })
 }
</script>

3.3 删除属性：removeAttr()

删除节点：remove()

empty()

<body>
<button>删除方式一</button>
<button onclick="del()">删除方式二</button>
<button onclick="del3()">删除方式三（删除属性）</button>
默认选中<input type="checkbox" checked>
<ul>
 <li>muzidigbig</li>
 <li>muzidigbig</li>
 <li>muzidigbig</li>
 <li>muzidigbig</li>
 <li>muzidigbig</li>
</ul>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
 $('button:first-child').click(function () {
 $('ul').remove();
 });
 function del() {
 $('ul').empty();
 }
 function del3() {
 $('input').removeAttr('checked');
 }
</script>

4.html文本

html()与text()区别：

html():不仅可以向页面中输入纯文本，也可以向页面中输入html标签

text()：只能向页面中输入纯文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html文本/值</title>
    <style>
        .box{
            width: 300px;
            height: 200px;
            background-color: pink;
            line-height: 200px;
        }
    </style>
</head>
<body>
<button onclick="change1()">html()文本</button>
<button onclick="change2()">text()文本</button>
<button onclick="change3()">val()表单</button>
<button onclick="change4()">val()多选</button>
<div class="box color">
    <span>https://blog.csdn.net/muzidigbig/</span>
</div>
<form action="#" method="post">
    <p><label for="name">名字：</label><input type="text" id="name" name="username" placeholder="muzidigbig"></p>
    <p><label for="password">密码：</label><input type="password" id="password"></p>
</form>
<select id="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
</select>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
    function change1() {
        //获取文本值html()无参数;连同对象中的标签一同获取
//        var html = $('div').html();
//        console.log(html);
        //设置值；可以解析html标签
//        $('div').html('<span style="color: green;">木子大大</span>');

//        function(index, html)此函数返回一个HTML字符串。
// 接受两个参数，index为元素在集合中的索引位置，html为原先的HTML值。
        $('div').html(function (n,html) {
            return 'muzidigbig'+n+':原'+html;
        })
    }
    function change2() {
        //获取值；只能获取文本，不能获取标签
//        var text = $('div').text();
//        console.log(text);
        //只能设置纯文本内容
        $('div').text('<span style="color: green;">木子大大</span>');
    }
    function change3() {
        //获取表单的输入值
//        var val = $('input[type="text"]').val();
//        console.log(val);
        //设置值
        $('input[type="text"]').val('木子大大');
    }
    function change4() {
        //多选返回的是一个数组
        var select = $('select').val();
        console.log(select);
    }
</script>
</html>

若有不足请多多指教！希望给您带来帮助！