Python 前端开发之jQuery绑定事件及操作标签

举报
Yuchuan 发表于 2020/06/23 21:30:34 2020/06/23
【摘要】 jQuery绑定事件及操作标签相关知识。

一、jQuery绑定事件(更多)

为button按钮绑定单击事件,单机按钮弹出警告框
$('button').click(        function () {
            alert('wahaha')
        }
)

二、jQuery操作标签

1、标签内文本操作

1)、html 标签元素中所有的内容

//获取值:获取选中标签元素中所有的内容
$('#box').html();  
//设置值:设置该元素的所有内容 会替换掉 标签中原来的内容
$('#box').html('<a href="https://www.baidu.com">百度一下</a>');

2)、text 标签元素的文本内容

//获取值:获取选中标签元素中的文本内容
$('#box').text();
//设置值:设置该所有的文本内容
$('#box').text('<a href="https://www.baidu.com">百度一下</a>');

注意:text()方法接收的值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中 

2、文档标签操作

之前js中咱们学习了js的DOM操作,也就是所谓的增删改查DOM操作。通过js的DOM的操作,大家也能发现,大量的繁琐代码实现我们想要的效果。那么jQuery的文档操作的API提供了便利的方法供我们操作我们的文档。

看一个之前我们js操作DOM的例子:

var oUl = document.getElementsByTagName('ul')[0];
var oLi = document.createElement('li');
oLi.innerHTML = '赵云';
oUl.appendChild(oLi);

1)、插入标签

(1)、append和appendTo
//追加某元素,在父元素中添加新的子元素。子元素可以为:stirng | element(js对象) | jquery元素
父元素.append(子元素)
//追加到某元素,子元素添加到父元素
子元素.appendTo(父元素)
//append
var oli = document.createElement('li');
oli.innerHTML = '哈哈哈';
$('ul').append('<li>1233</li>');
$('ul').append(oli);
$('ul').append($('#app'));
//appendTo
$('<li>天王盖地虎</li>').appendTo($('ul')).addClass('active')

PS:如果追加的jquery对象原本在文档树中,那么这些元素将从原位置上消失。简言之,就是移动操作。

(2)、prepend和prependTo
// 前置添加, 添加到父元素的第一个位置
父元素.prepend(子元素);
// 前置添加, 添加到父元素的第一个位置
子元素.prependTo(父元素);
// prepand
$('ul').prepend('<li>我是第一个</li>')
// prependTo
$('<a href="#">路飞学诚</a>').prependTo('ul')
(3)、after和insertAfter
// 在匹配的元素之后插入内容 
兄弟元素.after(要插入的兄弟元素);
要插入的兄弟元素.inserAfter(兄弟元素);
$('ul').after('<h4>我是一个h3标题</h4>')
$('<h5>我是一个h2标题</h5>').insertAfter('ul')
(4)、before和insertBefore
// 在匹配的元素之前插入内容
兄弟元素.before(要插入的兄弟元素);
要插入的兄弟元素.inserBefore(兄弟元素); 
//示例
$('ul').before('<h3>我是一个h3标题</h3>')
$('<h2>我是一个h2标题</h2>').insertBefore('ul')

2、删除标签 remove、detach和empty

//删除节点后,事件也会删除(简言之,删除了整个标签)
$(selector).remove(); 
// 删除节点后,事件会保留
$(selector).detach(); 
// 清空选中元素中的所有后代节点
$(selector).empty();
// remove
$('ul').remove();
// detach
var $btn = $('button').detach()
$('ul').append($btn) //此时按钮能追加到ul中
//empty
$('ul').empty() //清空掉ul中的子元素,保留ul

3、修改标签 replaceWith和replaceAll

// selector被替换:将所有匹配的元素替换成指定的string、js对象、jquery对象。
$(selector).replaceWith(content);
// selector被替换:将所有的匹配的元素替换成p标签。
$('<p>哈哈哈</p>')replaceAll(selector);
// replaceWith 
$('h5').replaceWith('<a href="#">hello world</a>') //将所有的h5标题替换为a标签
$('h5').replaceWith($('#app')); //将所有h5标题标签替换成id为app的dom元素
// replaceAll
$('<br/><hr/><button>按钮</button>').replaceAll('h4')

4、克隆标签 clone

// 克隆匹配的DOM元素
$(选择器).clone();
$('button').click(function() { 
    // 1.clone():克隆匹配的DOM元素
    // 2.clone(true):元素以及其所有的事件处理并且选中这些克隆的副本(简言之,副本具有与真身一样的事件处理能力)
    $(this).clone(true).insertAfter(this);
})

3、属性操作

1、attr() 设置属性值、者获取属性值

//获取值:attr()设置一个属性值的时候 只是获取值
$('div').attr('id')
$('div').attr('class')
//设置值
$('div').attr('class','box') //设置一个值
$('div').attr({name:'hahaha',class:'happy'}) //设置多个值

2、removeAttr() 移除属性

//删除单个属性
$('#box').removeAttr('name');
$('#box').removeAttr('class');
//删除多个属性
$('#box').removeAttr('name class');

3、prop()

// 查看属性
$(selector).prop(property)
// 设置属性
$(selector).prop(property,value)
// 设置多个属性
$(selector).prop({property:value, property:value,...})
$('input').attr('checked')
"checked"
$('input').prop('checked')
true
$('input').prop('cheched',false)  //设置取消选中

表格全选、反选示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="all">全选</button>
<button id="reverse">反选</button>
<button id="cancel">取消</button>
<table border="1">
   <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>爱好</th>
    </tr>
   </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>金老板</td>
        <td>开车</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>alex</td>
        <td>抽烟、喝酒、烫头</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>苑昊(苑局)</td>
        <td>不洗头、不翻车、不要脸</td>
    </tr>
    </tbody>
</table>
<script src="jquery3.4.1.js"></script>
<script>
    // 点击全选按钮 选中所有的checkbox
    // DOM绑定事件方法
    // $("#all")[0].onclick = function(){}
    // jQuery绑定事件方法
    $("#all").click(function () {
        $(":checkbox").prop('checked', true);
    });
    // 取消
    $("#cancel").on("click", function () {
         $(":checkbox").prop('checked', false);
    });
    // 反选
    $("#reverse").click(function () {
        // 1. 找到所有选中的checkbox取消选中
        // $("input:checked").prop('checked', false);
        // // 2. 找到没有选中的checkbox选中
        // $("input:not(:checked)").prop('checked', true);
        //你会发现上面这么写,不行,为什么呢?因为你做了第一步操作之后,再做第二步操作的时候,所有标签就已经全部取消选中了,所以第二步就把所有标签选中了

        // 方法1. for循环所有的checkbox,挨个判断原来选中就取消选中,原来没选中就选中
        var $checkbox = $(":checkbox");
        for (var i=0;i<$checkbox.length;i++){
            // 获取原来的选中与否的状态
            var status = $($checkbox[i]).prop('checked');
            $($checkbox[i]).prop('checked', !status);
        }
        // 方法2. 先用变量把标签原来的状态保存下来
    //     var $unchecked =  $("input:not(:checked)");
    //     var $checked = $("input:checked");
    //
    //     $unchecked.prop('checked', true);
    //     $checked.prop('checked', false);
    })
</script>
</body>
</html>

4、class类属性

1)、addClass添加类名

// 为每个匹配的元素添加指定的类名。
$('div').addClass("box");//追加一个
$('div').addClass("box box2");//追加多个

2)、removeClass移除类名

// 从所有匹配的元素中删除全部或者指定的类。
$('div').removeClass('box');//移除box类
$('div').removeClass();//移除全部的类

通过添加删除类,来实现元素的显示隐藏:

var tag  = false;
$('span').click(function(){
            if(tag){
                $('span').removeClass('active')
                tag=false;
            }else{
                $('span').addClass('active')
                tag=true;
            }    
})

实际示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .active{
            color: red;
        }
    </style>
</head>
<body>
     <ul>
         <li>张三</li>
         <li>李四</li>
         <li>王五</li>
     </ul>
     <script type="text/javascript" src="jquery-3.3.1.js"></script>
     <script type="text/javascript">
         $(function(){
             $('ul li').click(function(){
                 // this指的是当前点击的DOM对象 ,使用$(this)转化jquery对象
                 $(this).addClass('active').siblings('li').removeClass('active');
             })
         })
     </script>    
</body>
</html>

3)、toggleClass类的切换

// 如果存在(不存在)就删除(添加)一个类。
$('div').toggleClass('box')
$('span').click(function(){
    //动态的切换class类名为active
    $(this).toggleClass('active')
})

5、val 表单控件value属性

// 获取值:用于表单控件中获取值,比如input textarea select等等
$(selector).val()
// 设置值:
$('input').val('设置了表单控件中的值');

示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="">
            <input type="radio" name="sex"  value="112" />男
            <!-- 设置cheked属性表示选中当前选项 -->
            <input type="radio" name="sex"  value="11" checked="" />女
            <input type="radio" name="sex"  value="11" />gay
            <input type="checkbox" value="a" checked=""/>吃饭
            <input type="checkbox" value="b" />睡觉
            <input type="checkbox" value="c" checked=""/>打豆豆
    <!-- 下拉列表 option标签内设置selected属性 表示选中当前 -->
            <select name="timespan" id="timespan"   >
                <option value="1">8:00-8:30</option>
                <option value="2" selected="">8:30-9:00</option>
                <option value="3">9:00-9:30</option>
            </select>
            <input type="text" name="" id="" value="111" />
    </form>
</body>
<script type="text/javascript" src="jquery3.4.1.js"></script>
    <script type="text/javascript">
        $(function(){
            // 一、获取值
                //1.获取单选框被选中的value值
                console.log($('input[type=radio]:checked').val())
                //2.复选框被选中的value,获取的是第一个被选中的值
                console.log($('input[type=checkbox]:checked').val())
                //3.下拉列表被选中的值
                var obj = $("#timespan option:selected");
                // 获取被选中的值
                var  time  = obj.val();
                console.log(time);
                // 获取文本
                var  time_text  = obj.text();
                console.log("val:"+time+" text"+ time_text );
                //4.获取文本框的value值
                console.log($("input[type=text]").val())//获取文本框中的值
                // 二.设置值
                //1.设置单选按钮和多选按钮被选中项
                $('input[type=radio]').val(['112']);
                $('input[type=checkbox]').val(['a','b']);
                //2.设置下拉列表框的选中值,必须使用select
                /*因为option只能设置单个值,当给select标签设置multiple。
                那么我们设置多个值,就没有办法了,但是使用select设置单个值和多个值都可以
                */
                $('select').val(['3','2'])
                //3.设置文本框的value值
                $('input[type=text]').val('试试就试试')
        })
    </script>
</html>

6、css样式

// css(直接修改css的属性来修改样式)
$("div").css('color'); //获取
$("p").css("color", "red"); //设置
$("p").css({"color":"red","background-color":"yello"}); // 设置多个

7、盒子样式属性

1)、内容 : 宽度(width)和高度(height)

// 宽度
.width() //获取宽度 返回匹配元素中第一个元素的宽,一个没有单位的数值
.width( value ) //设置宽度
//高度
.height() //获取高度 返回匹配元素中第一个元素的高,一个没有单位的数值
.height( value ) //设置高度

2)、内容+padding : 宽度(innerWidth)和高度(innerHeight)

// 内部宽
.innerWidth() // 获取
.innerWidth(value);//设置
// 内部高
.innerHeight() // 获取
.innerHeight(value); //设置

内容+padding+border : 宽度(outerWidth)和高度(outerHeight)

// 外部宽
 .outerWidth() //获取第一个匹配元素 :内容+padding+border的宽
 .outerWidth(true) //获取第一个匹配元素:内容+padding+border+margin的宽
 .outerWidth(value) //设置多个,调整的是“内容”的宽
//外部高
 .outerHeight() //第一个匹配元素:获取内容+padding+border的高
 .outerHeight(true) //第一个匹配元素:获取内容+padding+border+margin的高
 .outerHeight( value ) //设置多个,调整的是“内容”的高

8、滚动条距离属性

// 水平方向
.scrollLeft()      //获取
.scrollLeft( value )//设置
// 垂直方向
.scrollTop() //获取
.scrollTop( value ) //设置

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。