JQuery语法规则

最新推荐文章于 2023-06-14 02:04:43 发布

枕梦

最新推荐文章于 2023-06-14 02:04:43 发布

阅读量1.4k

点赞数

分类专栏： HTML5+JQuery 文章标签： JQuery 文档就绪函数 .clone .toggleClass .innerText

本文链接：https://blog.csdn.net/qq_37768482/article/details/76167503

版权

HTML5+JQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.JQuery语法：文档就绪函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--导入JQuery文件-->
    <script src="../../js/jquery-3.1.1.min.js">

    </script>
    <script>
        //文档就绪函数
//        $(document).ready(function(){
//            //隐藏元素
//            $('p').hide();
//        });

        //简化版文档就绪函数
        $(function(){
            //隐藏元素
            $('p').hide();
        })
    </script>
    <title>Title</title>
</head>
<body>
    <p>nneeee</p>
    <p>sakdl;a</p>
</body>
</html>

2.JQuery语法中的鼠标事件及在其中添加一个类和删除一个类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        img{
            margin: 10px 10px;
            border: 1px solid grey;
        }
        .a{
            border: 3px solid orange;
        }
    </style>
    <script src="../../js/jquery-3.1.1.min.js"></script>
    <script>
        $(function(){
            //选择元素,添加事件
            $('img').mouseover(function(){
//                $(this).css('border','3px solid orange')
                //添加一个类
                $(this).addClass('a');
            }).mouseout(function(){
//                $(this).css('border','1px solid grey')
                //删除一个类9-
                $(this).removeClass('a');
            });
        })
    </script>
    <title>Title</title>
</head>
<body>
    <img src="../../img/new_01" alt="">
    <img src="../../img/new_02" alt="">
    <img src="../../img/new_03" alt="">
</body>
</html>

3.DOM对象与JQuery对象的相互转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../../js/jquery-3.1.1.min.js"></script>
    <script>
        //原生DOM对象（JS对象）转化成JQuery对象   $(原生对象)
        $(function(){
            var d = document.getElementById('d');
//            d.innerText('sdada');
//            var d = $('#d');
            $(d).html('asdas');
            //JQuery对象转原生对象：1、$(....)[0]
            var e = $('#e');
            e[0].innerText = 'sadaa';
            //2、$(...).get(0)
            e.get(0).innerText = 'sadaa';
        })
    </script>
    <title>DOM对象与JQuery对象的相互转换</title>
</head>
<body>
    <div id="d">
    </div>
<div id="e">
</div>
</body>
</html>

4.JQuery语法中经常用的$符号，当 有好几个库，有$符号冲突时，放弃$符号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../../js/jquery-3.1.1.min.js"></script>
    <script>
        $(function(){
            jQuery.noConflict();
//            $('#a').html('sdfassddasd');
            jQuery('#a').html('sdfassddasd')
        })
    </script>
    <title>Title</title>
</head>
<body>
    <div id="a">
    </div>
</body>
</html>

5.用JQuery语言获取标签元素以及修改标签的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../../js/jquery-3.1.1.min.js"></script>
    <script>
        $(function(){
            //获取div标签内部的元素
           alert($('#d').html());

            //修改div标签里的内容
            $('#d').html('<span>把p标修改为span标签</span><h1>h1标签</h1>');

            //获取div标签内部的文本：
            alert($('#d').text());

            //修改div标签里的文本
            $('#d').text('text')

            //获取输入框的value
            alert($('#t').val());

            //修改输入框里的value值
            $('#t').val('asdada')
        })
    </script>
    <title>Title</title>
</head>
<body>
    <div id="d">
        <p>sadadasda</p>
        <a href="">sdad</a>
        <!--把标签当做普通文本进行解析-->
        <xmp><p>ssadlfka</p></xmp>
        sfaerwevsv
        <input type="text" id="t" value="input">
    </div>
</body>
</html>

6. 通过JQuery修改CSS样式

<script>
        $(function(){
            $('div').css({'background-color':'blue','font-size':'25px','color':'red'})
        })
    </script>

7. toggleClass：在删除与添加类操作不停切换时，推荐使用toggleClass

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: yellow;
        }
        .a{
            background-color: orangered;
        }
    </style>
    <script src="../../js/jquery-3.1.1.min.js"></script>
    <script>
        $(function(){

            $('#d').mouseover(function(){
                $(this).toggleClass('a')
            }).mouseout(function(){
                $(this).toggleClass('a')
            })
        })
    </script>
    <title>Title</title>
</head>
<body>
<div id="d">asda</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: yellow;
        }
        .a{
            background-color: orangered;
        }
    </style>
    <script src="../../js/jquery-3.1.1.min.js"></script>
    <script>
        $(function(){

            $('#d').click(function(){
                $(this).toggleClass('a')
            })
        })
    </script>
    <title>Title</title>
</head>
<body>
<div id="d">toggleClass</div>
</body>
</html>

8.JQuery语法克隆（复制）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../../js/jquery-3.1.1.min.js"></script>
    <script>
        $(function(){
            var table = $('<table border="1"><tr><td>123</td></tr></table>')
            $('div').append(table);
           //table.remove();
            table.clone().appendTo($('div'))
        })
    </script>
    <title>Title</title>
</head>
<body>
    <div>

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

枕梦

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JQuery语法规则

1.JQuery语法：文档就绪函数 //文档就绪函数// $(document).ready(function(){// //隐藏元素// $('p').hide();// }); //简化版文档就绪函数 $(
复制链接

扫一扫