前端JS jQuery

最新推荐文章于 2024-09-21 11:34:18 发布

~码中赤兔~

最新推荐文章于 2024-09-21 11:34:18 发布

阅读量124

点赞数

分类专栏： JS基础 jQuery 文章标签： jquery javascript html

本文链接：https://blog.csdn.net/m0_56557880/article/details/120633185

版权

JS基础同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

jQuery

6 篇文章 0 订阅

订阅专栏

"本文介绍了jQuery的基础知识，包括其创建者John Resig，核心思想write less, do more，以及如何通过$()工厂函数选择和操作DOM元素。接着，详细讲解了如何引入jQuery库，实现弹出对话框，以及使用addClass()、css()方法设置样式，show().hide()显示和隐藏元素，next()链式操作和css({}

摘要由CSDN通过智能技术生成

1.定义

jQuery由美国人John Resig于2006年创建

jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装

它的设计思想是write less,do more

2.优点：

代码量少，更加便捷

3.jQuery语法结构

$(selector).action() ;

工厂函数$()：将DOM对象转化为jQuery对象

选择器 selector：获取需要操作的DOM 元素

方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法

即$();为转换对象，规范，在括号内添加选择器，然后此获取的对象就转化成了jQuery对象，然后就是对象点方法来进行操作

4.引入jQuery

<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
引入框内不能添加内容，需要另外添加标签添加内容
<script type="text/javascript"></script>
两个标签，第一个中不添加内容

5.jQuery实现弹出

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(function(){
        alert("啊，科学的甜美气息");
    });
</script>

6.jQuery应用

6.1addClass()添加样式

<!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>jQuery之addClass</title>
    <style type="text/css">
        .huangse{
            background-color: yellow;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("tr:even").addClass("huangse");
        });
    </script>
</head>
<body>
    <table border="1px" width="500px" height="30px">
        <tr><td>我是表格</td><td>我是表格</td><td>我是表格</td><td>我是表格</td></tr>
        <tr><td>我是表格</td><td>我是表格</td><td>我是表格</td><td>我是表格</td></tr>
        <tr><td>我是表格</td><td>我是表格</td><td>我是表格</td><td>我是表格</td></tr>
        <tr><td>我是表格</td><td>我是表格</td><td>我是表格</td><td>我是表格</td></tr>
        <tr><td>我是表格</td><td>我是表格</td><td>我是表格</td><td>我是表格</td></tr>
    </table>
</body>
</html>

6.2css() 设置样式

<!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>jQuery之addClass</title>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("tr:even").css("background","red");
        });
    </script>
</head>
<body>
    <table border="1px" width="500px" height="30px">
        <tr><td>我是表格</td><td>我是表格</td><td>我是表格</td><td>我是表格</td></tr>
        <tr><td>我是表格</td><td>我是表格</td><td>我是表格</td><td>我是表格</td></tr>
        <tr><td>我是表格</td><td>我是表格</td><td>我是表格</td><td>我是表格</td></tr>
        <tr><td>我是表格</td><td>我是表格</td><td>我是表格</td><td>我是表格</td></tr>
        <tr><td>我是表格</td><td>我是表格</td><td>我是表格</td><td>我是表格</td></tr>
    </table>
</body>
</html>

6.3show().hide()显示和隐藏

<!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>jQuery之show().hide()显示和隐藏</title>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $(".b1").click(function(){
                $("p").hide();
            });
            $(".b2").click(function(){
                $("p").show();
            })
        });
    </script>
</head>
<body>
    <p>这里是要隐藏的东西</p>
    <button class="b1">隐藏</button>
    <button class="b2">显示</button>
</body>
</html>

6.4next()链式操作

<!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>jQuery之next链式操作</title>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $(".one").next().css("background","red");
        });
    </script>
</head>
<body>
    <ul>
        <li class="one">杨幂</li>
        <li>迪丽热巴</li>
        <li>古力娜扎</li>
    </ul>
</body>
</html>
选择的下一个

6.5css({})隐式迭代

<!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>jQuery之css({})隐式迭代</title>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("button").click(function(){
                $("li").css({"background":"yellow","font-size":"200%"});
            });
        });
    </script>
</head>
<body>
    <ul>
        <li style="background-color: antiquewhite;">杨幂</li>
        <li style="background-color: yellow;">迪丽热巴</li>
        <li style="background-color: green;">古力娜扎</li>
    </ul>
    <button>给li设置样式</button>
</body>
</html>

6.6DOM对象和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>jQuery之转换</title>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var two = document.getElementById("two");
            if (two instanceof jQuery){
                alert("这是jQuery对象");
            }else {
                alert("这是DOM对象");
            }
            //转换为jQuery对象
            var $two_new = $(two);
            if ($two_new instanceof jQuery){
                alert("这是jQuery对象");
            }else {
                alert("这是DOM对象");
            }
            //转换为DOM对象
            var two_new_new = $two_new[0];
            if (two_new_new instanceof jQuery){
                alert("这是jQuery对象");
            }else {
                alert("这是DOM对象");
            }
            var two_new_new_new = $two_new.get(0);
            if (two_new_new_new instanceof jQuery){
                alert("这是jQuery对象");
            }else {
                alert("这是DOM对象");
            }
        });
    </script>
</head>
<body>
    <ul>
        <li>杨幂</li>
        <li id="two">迪丽热巴</li>
        <li>古力娜扎</li>
    </ul>
</body>
</html>