Web开发基础之Jquery

　　一,jQuery

　　1,jQuery相关介绍

　　jQuery 是一个 JavaScript 的脚本库，提供了很多便捷的操作 DOM 的方法。

　　jQuery 中提供的操作如下：

　　选择器、属性操作、样式操作、节点操作、动画、注册事件

　　2,下载和部署

　　jQuery官网

　　英文:http://jquery.com/

　　中文:https://www.jquery123.com/

　　下载地址:https://jquery.com/download/

　　下载js文件

　　使用方式

　　1,在HTML文档的</body>前引入

　　2,在使用一些js插件时，依赖jQuery的，必须先引入jquery，再引入js的插件。

1	`<script src="./jquery-3.5.1.js"> </scchript>`

　　3,使用jQuery

#1.jquery入门.html
<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery入门</title>
     
</head>
<body>
    <!-- 引用jQuery -->
    <script src="./jquery-3.5.1.js"> </script>
    <script>
        // 遍历数组
        var arr = ['linux','windows','macos']
        // js传统写法
        for (var index=0;index<arr.length;index++){
            console.log(arr[index])
        }
        // linux
        // windows
        // macos
        // jQuery的写法
        $.each(arr, function (index, item) {
            console.log(item)
        })
        // 和上面输出一致
    </script>
</body>
</html>

　　页面输出

　　解析:index为当前索引为0 1 2 item为当前值分别为 linux windows macos

　　4,jquery选择器

#jq选择器.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 引用jQuery -->
    <script src="./jquery-3.4.1.js"> </script>
    <script>
        // js选择器
        console.log(document.querySelector('title'));
        // jq选择器
        console.log($('title'))
    </script>
</body>
</html>

　　页面显示

　　进一步获取title的值

#2.jq选择器.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 引用jQuery -->
    <script src="./jquery-3.4.1.js"> </script>
    <script>
        // js选择器
        console.log(document.querySelector('title'));
        // <title>Document</title>
        console.log(document.querySelector('title').innerHTML)
        // Document
        // jq选择器
        console.log($('title'))
        // k.fn.init [title, prevObject: k.fn.init(1)]0: titlelength: 1prevObject: k.fn.init [document]__proto__: Object(0)
        console.log($('title').html())
        // Document
    </script>
</body>
</html>

　　页面显示

　　jQuery类选择器

#2jqery选择器.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 class="myh1">1</h1>
    <h1 class="myh1">2</h1>
    <!-- 引用jQuery -->
    <script src="./jquery-3.4.1.js"> </script>
    <script>
        // js选择器
        console.log(document.querySelector('title'));
        // <title>Document</title>
        console.log(document.querySelector('title').innerHTML)
        // Document
        // jq选择器
        console.log($('title'))
        // k.fn.init [title, prevObject: k.fn.init(1)]0: titlelength: 1prevObject: k.fn.init [document]__proto__: Object(0)
        console.log($('title').html())
        // Document
        // jq类选择器
        $(".myh1").each(function(index,item){
            console.log(item);
        });
        // <h1 class="myh1">1</h1>
        // <h1 class="myh1">2</h1>
    </script>
</body>
</html>

　　　　页面输出

　　jQuery选择器修改颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 class="myh1">1</h1>
    <h1 class="myh1">2</h1>
    <!-- 引用jQuery -->
    <script src="./jquery-3.4.1.js"> </script>
    <script>
        // js选择器
        console.log(document.querySelector('title'));
        // <title>Document</title>
        console.log(document.querySelector('title').innerHTML)
        // Document
        // jq选择器
        console.log($('title'))
        // k.fn.init [title, prevObject: k.fn.init(1)]0: titlelength: 1prevObject: k.fn.init [document]__proto__: Object(0)
        console.log($('title').html())
        // Document
        // js类选择器
        myh1s = document.querySelectorAll('.myh1')
        for (var index=0;index<myh1s.length;index++){
            console.log(myh1s[index])
        }
        // <h1 class="myh1">1</h1>
        // <h1 class="myh1">2</h1>
        // jq类选择器
        $(".myh1").each(function(index,item){
            console.log(item);
        });
        // <h1 class="myh1">1</h1>
        // <h1 class="myh1">2</h1>
        // 选择器之eq 选择第二个
        console.log($('.myh1').eq(1))
        console.log($('.myh1:eq(1)'))
        // js修改颜色
        myh1s = document.querySelectorAll('.myh1')
        for (var index=0;index<myh1s.length;index++){
            myh1s[index].style.color='red';
        }
        // jq选择器修改颜色
        $('.myh1').each(function(index,item){
            $(item).css('color','green')
        })
    </script>

　　使用js把颜色修改为红色后又使用jquery选择器修改为绿色了

　　jq注册事件

　　语法

$('#btn').click(function() {
   //执行代码
});
$('.box').mouseover(function () {
//执行代码
});

　　示例

#3jq注册事件.html
<body>
    <div id='box'>this is box</div>
    <script src="./jquery-3.4.1.js"> </script>
    <script>
        // js鼠标事件
        // 鼠标移动到对应位置打印时间戳
        document.querySelector('#box').onmouseover=function(){
            console.log(new Date().getTime())
        }
        // jq鼠标事件
        $('#box').mouseover(function(){
            console.log(new Date().getTime())
        })
    </script>
</body>

　　页面显示鼠标移动到对应位置打印一次时间戳,本次使用了js和jq两个事件所以,页面显示移动到对应位置打印了两次时间戳

　　jQuery属性操作

$('#username').val()  获取或者设置表单元素的值
$('.box').html()    获取或者设置标签之间的内容
$('.box').attr()    获取或者设置元素属性的值

　　示例

#4jq属性操作.html
<body>
    <form action="" method="post">
        <input type='text' name='' id='' value='你好'>
    </form>
    <script src="./jquery-3.4.1.js"> </script>
<script> 
    // jq属性操作
    // 获取表单的值，只能是表单form
    console.log($('input').val());
    // 你好
    // 修改表单的值把你好修改为hello
    $('input').val('hello')
    
</script>
</body>

　　页面显示

　　获取或修改元素属性值

　　示例

<body>
    <div id='box'>this is box</div>
    <form action="" method="post">
        <input type='text' name='' id='' value='你好'>
    </form>
    <script src="./jquery-3.4.1.js"> </script>
<script> 
    // jq属性操作
    // 获取表单的值，只能是表单form
    console.log($('input').val());
    // 你好
    // 修改表单的值把你好修改为hello
    $('input').val('hello')
    // 查看或者修改元素属性值
    // 输出元素input的属性
    console.log($('input').attr)
    // ƒ (e,t){return _(this,k.attr,e,t,1<arguments.length)}
    // 修改元素input的属性为password 
    $('input').attr('type','password')
   // 获取或设置标签之间的内容
   console.log($('title').html())
   // Document
   // 修改title标签
   $('title').html('jq属性操作')
    
</script>
</body>

　　页面显示

　　jQuery显示隐藏

1	`$('.box').show() / $('.box').hide() 显示 / 隐藏`

　　jQuery样式操作

//操作行内样式
  $('.box').css();
//操作类样式
  $('.box').addClass();  //添加类样式

　　示例

#jq样式操作.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jq样式操作</title>
    <style>
        .active{
            color: green;
        }
    </style>
</head>
<body>
    <p id='box'>这是一个box</p>
    <p id='box1'>这是一个box</p>
    <script src="./jquery-3.4.1.js"> </script>
    <script>
        // 执行行内样式 修改颜色为红色
        $('#box').css('color','red')
        // 添加类样式 active把颜色修改为绿色
        $('#box1').addClass('active')
    </script>
</body>
</html>

　　页面显示

　　jQuery综合应用示例

　　一个手机列表点击对应按钮显示对应手机品牌

#4.jquery综合.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 设置对应按钮 -->
    <button>小米</button>
    <button>华为</button>
    <button>苹果</button>
    <div>
        <!-- 设置手机列表及对应是类名，相同手机品牌类名相同 -->
        <p class="brand0">小米3</p>
        <p class="brand0">小米6</p>
        <p class="brand1">华为p20</p>       
        <p class="brand2">苹果6</p>
        <script src="./jquery-3.4.1.js"> </script>
        <script>
            $('button').each(function(index,item){
               $(item).click(function(){
                   // 点击事件，点击首先隐藏所有
                    $('p').hide();
                    // 然后把对应点击的手机品牌显示出来
                    // 例如点击了小米则index为0则显示class为brand0的手机即小米手机依此类推
                    $('.brand'+index).show();
               }
               )
            });
        </script>
    </div>
</body>
</html>

　　页面显示点击对应手机则显示对应手机列表

posted @ 2020-11-23 17:24 minseo 阅读(225) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

公告

昵称： minseo
园龄： 7年10个月
粉丝： 128
关注： 16

+加关注

2025年3月

日

一

二

三

四

五

六

minseo

Web开发基础之Jquery

一,jQuery

1,jQuery相关介绍

2,下载和部署

使用方式

3,使用jQuery

4,jquery选择器

jq注册事件

jQuery属性操作

jQuery显示隐藏

jQuery样式操作

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论