前端04-jquery

司*琦

已于 2022-04-22 19:30:13 修改

阅读量62

点赞数

文章标签：前端

于 2022-04-20 18:45:55 首次发布

本文链接：https://blog.csdn.net/qq_30774825/article/details/124302305

版权

jquery属性

html():获取标签内容
val():获取value值,表单大多数有value
prop()/attr():根据属性名获取属性值,这两个使用一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            //获取标签内容
            alert($('div').html())
            //设置标签内容
            $('div').html('<em>我是一个斜体</em>')
       
            //设置value值
            $('input').val('hahha')
            //获取标签输入的值
            alert($('input').val())

            //获取属性值  
            alert($('img').prop('src'))
            //设置属性值
            $('img').prop({'src':'http://www.xinlang.com/1.jpg'})
        })

    </script>
</head>
<body>
    <div class="box">
        hahah <p>我是一个p标签</p>
    </div>
    <input type="text">
    <img src="http:www.baidu.com/1.jpg" alt="">
</body>
</html>

jquery事件

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $('input').blur(function(){
                // alert('aa')
                console.log('我已经失去焦点啦')
            })
            //一进入就自动聚焦
            // $('input').focus()
            //聚焦一般用click
            $('input').click(function(){
                console.log('我又聚焦了啊')
            })
            //hover 第一种写法  mouseenter和mouseleave的结合
            $('div').hover(function(){
                alert('hover1')
            },function(){
                alert('hover2')
            })
            //hover第二种写法
            $('div').hover(function(){
                alert('hover')
            })
        })
    </script>
    <style>
        div {
            margin: 50px;
            width: 100px;
            height: 100px;
            background-color: bisque;
        }
    </style>
</head>
<body>
    <input type="text">
    <div></div>
</body>
</html>

正则

在这里插入图片描述

var sTr01='123bu63nj'
var re01=/\d+/
 alert(re01.test(sTr01))    //结果是true

事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery/jquery-1.12.4.min.js"></script>
    <script>
        //阻止事件冒泡
        $(function(){
            $('.box').click(function(){
                alert('haahhah')
                return false  //想在那一层阻止事件冒泡就在哪一层输入
            })
            $('body').click(function(){
                alert('body')
            })
            $(document).click(function(){
                alert('document')
            })
        })
    </script>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: blue;
        }
        .mBox {
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="mBox"></div>
    </div>
</body>
</html>

事件委托

事件委托:就是利用事件冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行响应的操作
事件委托可以极大的减少事件绑定的次数,提高性能
其次可以让新加入的子元素也可以拥有相同的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
             //事件委托
            $('ul').delegate('li','click',function(){
                // $(this).css({'background':'blue'})
                $(this).toggleClass('box1')
            })
        })
    </script>
    <style>
        .box1 {
            background: brown;
        }
    </style>
</head>
<body>
    <ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>

dom 操作

$(selector).append(content)
append():在元素内部添加,后面放入   添加标签
prepend():在元素内部添加,前面放入
after():在元素外部添加,后面放入
before():在元素外部添加,前面放入
删除:
$(selector).remove()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery/jquery-1.12.4.min.js"></script>
    <script>
        //append():在元素内部添加,后面放入   添加标签
        //prepend():在元素内部添加,前面放入
        $(function(){
            //$(selector).append(content)
            // $('div').append('啧啧啧')

        // $('div').append($('<em>啧啧啧</em>'))
        $('div').after($('<em>啧啧啧</em>'))
        })
        
    </script>
</head>
<body>
    <div>
        哈哈哈
    </div>
</body>
</html>

Todolist

在这里插入图片描述

需求:1.点击增加按钮,判断输入框是否输入,未输入则弹出
2.已输入内容,则添加到列表的最后一行
3.右边的按钮点击后按照删除/下移/上移功能进行实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .list_con{
            width: 500px;
            height: 500px;
            line-height: 30px;
            margin: 50px;     
        }
        #txt1 {
            width: 441px;
        }
      
        ul {
            width: 500px;
            line-height: 30px;
            list-style: none;
            padding-left: 0px;
            
        }
        li {
            border-bottom: 1px solid black;
        }
        ul li span {
            /* float: left; */
        }
        ul li a{
            /* line-height: 30px; */
            text-decoration: none;
            float: right;
            /* padding: auto; */
            margin-left: 10px;
        }       
    </style>
    <script src="./jquery/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $input=$('#txt1')
            var $ul = $('ul')
            $('#btn1').click(function(){   //点击增加按钮
                var value = $input.val()
                $input.val('')    //删除输入框中的内容
                var str = $ul.html() +'<li><span>'+value+'</span><a href="#" class="up">↑</a><a href="#" class="down">↓</a><a href="#">删除</a></li>'
                if (value ==''){
                    alert('您未输入内容')
                    return
                }
                $ul.html(str)
            })
            $('.list').delegate('a','click',function(){   //事件委托
                if ($(this).prop('class')=='down'){
                    if ($(this).parent().next().length==0){
                        alert('已经到底了')
                        return
                    }
                    $(this).parent().next().after($(this).parent())
                }else if ($(this).prop('class')=='up'){
                    if ($(this).parent().prev().length==0){
                        alert('已经到顶了')
                        return
                    }
                    $(this).parent().prev().before($(this).parent())
                }else{
                    $(this).parent().remove()
                }
                   
            })

        })
    </script>
</head>
<body>
    <div class="list_con">
        <h2>To do List</h2>
        <input type="text" id="txt1" class="input01">
        <input type="button" id="btn1" value="增加">
        <ul id="list" class="list">
            <li><span>学习html</span><a href="#" class="up">↑</a><a href="#" class="down">↓</a><a href="#">删除</a></li>
            <li><span>学习css</span><a href="#" class="up">↑</a><a href="#" class="down">↓</a><a href="#">删除</a></li>
            <li><span>学习js</span><a href="#" class="up">↑</a><a href="#" class="down">↓</a><a href="#">删除</a></li>

        </ul>
    </div>
</body>
</html>

司*琦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端04-jquery

jquery属性html():获取标签内容val():获取value值,表单大多数有valueprop()/attr():根据属性名获取属性值,这两个使用一样<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name
复制链接

扫一扫