程序员经验分享-hwhale

JQuery介绍

2023-05-16

文章目录

  • 一. JQuery介绍
  • 二. JQuery使用
  • 三. JQuery选择器
  • 四. JQuery选择集过滤
  • 五.JQuery选择集转移
  • 六. JQuery获取和操作标签内容
  • 七. JQuery获取和设置元素属性
  • 八. JQuery事件
  • 九.JQuery事件代理
    • - 事件冒泡
    • - 事件绑定的问题
    • - 事件代理

一. JQuery介绍

  • 定义: jquery是JS的一个函数库
  • 作用: 负责网页交互
  • 优点: 兼容主流浏览器, 简化JS编程过程, 提高开发效率

二. JQuery使用 

<script src="JS/jquery-1.12.4.min.js"></script>
<!-- 注意导入 jquery 的script区域和标签操作区域不能一样 -->
<script>
	代码
</script>
  • JS对象和Jquery对象转换
js对象 ----> jquery对象
oDiv ----> $(oDiv)

Jquery对象 ----> js对象
$Div ----> $Div[0]
  • 在浏览器中, 可以使用控制台
> var oDiv = document.getElementById('box')
undefined
> oDiv;
<div id="box"> 这是一个div </div>
> var $Div = $(oDiv)
undefined
> $Div
n.fn.init [div#box, context: div#box]
> $Div[0]
<div id="box"> 这是一个div </div>
> $Div[1]
undefined

三. 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>
    <!-- 引入Jquery -->
    <script src="JS/jquery-1.12.4.min.js"></script>
    <!-- 书写自己的js代码 -->
    <script>
        // 入口函数
        $(function(){
            // 标签选择器  $('标签')
            var result = $('div');
            console.log(result.length);  // 2

            // id选择器   $('#ID号')
            console.log($('#box').length);  // 1

            // 类选择器   $('#类名')
            console.log($('.box').length);  // 1

            // 层级选择器 $('选择器1 选择器2')
            console.log($('div p').length);   // 2

            // 属性选择器 $('选择器[属性=值]')
            console.log($('div[class="box"]').length);  // 1

        });
    </script>
</head>
<body>
    <div id="box" class="box">
        这是第一个div
        <p>
            好好学习
        </p>
    </div>
    <div >
        这时第二个div
        <p>
            天天向上
        </p>
    </div>
</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="Js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $('div').css({'background': 'red'});
            
            // 选择集过滤, has 可以再指定其他选择器进行筛选, 相当于加了一个条件
            $('div').has('p').css({'font-size': '28px', 'background': 'pink'});

            // eq(下标)   下标是从0开始的, 1就表示第二个div标签
            $('div').eq(1).css({'color': 'green'});
        });
    </script>
</head>
<body>
    <div>
        这是第一个div
        <p>
            好好学习
        </p>
    </div>
    <div>
        这是第二个div <br>
        天天向上
    </div>
</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="JS/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // 选择文字3的标签
            $li = $('#box');
            $li.css({'background': 'red'});

            // 选择上一个   $li.prev()
            $li.prev().css({'background': 'green'});

            // 选择上面所有的   $li.prevAll()
            $li.prevAll().css({'color': 'blue'});

            // 选择下一个
            $li.next().css({'background': 'yellow'});

            // 选择下面所有的
            $li.nextAll().css({'color': 'orange'});

            // 选择除了自己之外的同一级节点
            $li.siblings().css({'font-size': '26px'});

            // 选择父级节点
            $('ul').parent().css({'background': 'pink'});

            // 选择子集节点
            $('div').children().css({'background': 'blue'});

            // find() 查找的是子标签,最终选择子标签
            $('div').find('.c_p').css({'color': 'red'});

            // has()  查找的是子标签,最终选择的是自己
            $('div').has('.c_p').css({'font-size': '30px'});
        });
    </script>
</head>
<body>
    <ul>
        <!-- li{文字$}*8 可以批量生成 -->
        <li>文字1</li>
        <li>文字2</li>
        <li id="box">文字3</li>
        <li>文字4</li>
        <li>文字5</li>
        <li>文字6</li>
        <li>文字7</li>
        <li>文字8</li>
    </ul>
    <div>
        this is div1
        <p>
            this is p1
        </p>
    </div>

    <div>
        this is div2
        <p class="c_p">
            this is p2
        </p>
    </div>
</body>
</html>

六. JQuery获取和操作标签内容

  • 获取标签内容: 标签对象.html()
  • 设置标签内容: 标签对象.html('内容')
  • 追加标签内容: 标签对象.append('内容')
<!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="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // 获取标签内容
            var sResult = $('div').html();
            alert(sResult);

            // 修改标签内容
            $('div').html('good good study!');

            // 追加标签内容
            $('div').append('<a href="http://www.baidu.com">百度</a>');
        });
    </script>
</head>
<body>
    <div>
        好好学习
    </div>
</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="JS/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $A = $('a');
            // 获取a标签的 href 属性
            alert($A.prop('href'));

            // 设置属性, 可以直接修改原有属性或者增加新属性
            $A.prop({'href': 'https://www.csdn.net/', 'target': '_blank'});

        });
        function fnClick(){
            // 获取input标签
            alert($('#box').prop('value'));
        };
        function fnAdd(){
            // 先获取 输入的值
            // alert($('#box').prop('value'));
            var result = $('#box').val();

            // 默认获取到的数据类型是字符串, 想要进行加法计算, 需要进行类型转换
            result = parseInt(result);
            $('#box').val(result + 10);
        };
    </script>
</head>
<body>
    <div>
        <a href="http://www.baidu.com">百度</a>
    </div>
    <div>
        <input type="text" name="" id="box" value="10">
        <input type="button" value="点击获取 input 内容" onclick="fnClick()">
        <input type="button" value="点击, 对 input 的数字 + 10显示" onclick="fnAdd()">
    </div>
</body>
</html>

八. JQuery事件

  • 鼠标点击: click()
  • 失去焦点: blur()
  • 获得焦点: focus()
  • 鼠标进入: mouseover()
  • 鼠标离开: mouseleave()
  • 页面标签加载完成: $(document).ready()
<!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>
        div{
            width: 200px;
            height: 80px;
            background: red;
            font-size: 26px;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // 鼠标点击事件
            $('div').click(function(){
                // 特殊变量 this   发生事件的标签对象, 相当于python的self
                console.log('鼠标点击了: ',$(this).html());
            });

            // 鼠标进入
            $('div').mouseover(function(){
                console.log('鼠标进入了');
                $(this).css({'background': 'blue'});
            });

            // 鼠标离开
            $('div').mouseleave(function(){
                console.log('鼠标离开了');
                $(this).css({'background': 'red'});
            });

            // 获得焦点 输入框
            $('input').focus(function(){
                $(this).prop({'placeholder': ''});
                $(this).css({'font-size': '28px'});
            });

            // 失去焦点
            $('input').blur(function(){
                $(this).prop({'placeholder': '请输入内容'});
                $(this).css({'font-size': ''});
            });
        });
    </script>
</head>
<body>
    <div>
        这是一个div
    </div>
    <input type="text" placeholder="请输入内容">
</body>
</html>

九.JQuery事件代理

  • 事件代理: 使用事件冒泡的原理, 让父标签代理子标签的事件
$(父标签选择器).delegate(子标签选择器, 代理事件, 处理函数);

- 事件冒泡

<!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>
        .box1{
            width: 300px;
            height: 300px;
            background: red;
        }
        .box2{
            width: 100px;
            height: 100px;
            background: pink;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        // 事件冒泡: 内层标签的事件会向外层标签进行传递, 例如 下面两个div ,点击内层的div , 外层的div也会随着发生变化
        $(function(){
            $('div').click(function(){
                $(this).css({'background': 'blue'});
            });
        });
    </script>
</head>
<body>
    <div class="box1">
        This is div 
        <div class="box2">
            Good Good Study
        </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="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // 事件绑定, 只能对在绑定之前已经存在的标签进行绑定, 新加入的标签不能绑定
            $('li').click(function(){
                console.log($(this).html());
            });
        });

        function fnClick(){
            // 添加li标签
            $('ul').append('<li>文字' + ($('li').length+1) + '</li>');
        };
    </script>
</head>
<body>
    <ul>
        <li>文字1</li>
        <li>文字2</li>
        <li>文字3</li>
        <li>文字4</li>
        <li>文字5</li>
    </ul>
    <input type="button" value="点击添加li标签" onclick="fnClick()">
</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="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // 事件代理, 让父标签代理子标签的事件
            // delegate('子元素选择器', '代理的事件名称', '当事件触发时执行的代码,可以写 function(){}匿名函数')
            $('ul').delegate('li', 'click', function(){
                console.log($(this).html());
            });
        });

        function fnClick(){
            // 添加li标签
            $('ul').append('<li>文字' + ($('li').length+1) + '</li>');
        };
    </script>
</head>
<body>
    <ul>
        <li>文字1</li>
        <li>文字2</li>
        <li>文字3</li>
        <li>文字4</li>
        <li>文字5</li>
    </ul>
    <input type="button" value="点击添加li标签" onclick="fnClick()">
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery

JQuery介绍 的相关文章

随机推荐

  • Django（2）模板、标签

    文章目录 一 使用Django模板修改页面二 Django模板标签 变量 列表 字典 过滤器1 default2 length3 filesizeformat4 date5 truncatechars6 safe if else标签 for

  • Django（3）模型

    文章目录 一 Django 模型 ORM二 数据库配置三 定义模型 xff08 创建数据表 xff09 四 数据库基本操作 插入数据 获取数据 xff08 1 xff09 查询所有的数据行 xff08 2 xff09 where条件查询 x

  • Django（4）表单

    文章目录 一 概述二 GET方法三 POST方法四 Request对象五 QueryDict对象 此文章参考菜鸟教程 xff1a Django 表单 菜鸟教程 runoob com Django版本 xff1a span class tok

  • Django（5）视图

    文章目录 一 视图概述二 请求对象HttpRequest xff08 1 xff09 GET xff08 2 xff09 POST xff08 3 xff09 body xff08 4 xff09 path xff08 5 xff09 me

  • Django（6）路由

    文章目录 一 路由概述二 正则路径中的分组 xff08 1 xff09 正则路径中的无名分组 xff08 2 xff09 正则路径中的有名分组 xff08 3 xff09 路由分发 三 反向解析 xff08 使用reverse xff09

  • Django（7）Admin管理工具

    文章目录 一 概述二 使用管理工具 xff08 1 xff09 激活管理工具 xff08 2 xff09 使用管理工具 xff08 3 xff09 复杂模型 xff08 4 xff09 自定义表单 xff08 5 xff09 内联 xff0

  • Django（8）ORM单表实例

    文章目录 一 Django ORM 单表实例创建新模型 二 数据库操作 xff08 1 xff09 添加数据 xff08 2 xff09 查找数据 filter exclude get order by reverse count firs

  • Django（9）ORM多表实例

    文章目录 一 Django ORM 多表实例创建模型插入数据 二 ORM 插入数据一对多 外键 ForeignKey多对多 xff08 Many ToManyField xff09 xff1a 在第三张表添加数据 三 关联管理器 对象调用1

  • Django（10）ORM聚合查询

    文章目录 一 聚合查询 aggregate 二 分组查询 annotate 三 F 查询四 Q 查询 此文章参考菜鸟教程 xff1a Django ORM 多表实例 xff08 聚合与分组查询 xff09 菜鸟教程 runoob com D

  • Python类的常用魔法方法

    文章目录 一 96 init 96 二 96 str 96 三 96 del 96 四 96 repr 96 五 使用案例 一 init span class token comment 在Python类中 有一类方法 这类方法以 两个下划

  • ubuntu 升级内核实战

    ubuntu 12 04内核是linux 3 2 0 24 xff0c 其实升级到最新版本3 3 4也没什么很大意义 xff0c 主要是集成了一些新的驱动和一些普通用户用不到的功能 xff0c 所以基本上本文纯属折腾 xff0c 但不要随便

  • centos7安装python3不影响python2

    文章目录 一 前言二 安装python3 一 前言 Centos7中很多软件命令依赖于系统自带的python2 比如yum 卸载python2会造成yum不可用 所以没必要卸载python2 如果要使用python3 可以通过软链接的方式安

  • Python异常的传递以及完整结构

    文章目录 异常的传递 异常的完整结构 异常的传递 span class token triple quoted string string 34 34 34 异常的传递是异常处理的底层机制 是原理层面 异常传递 当一行代码发生异常后 会向外

  • Python互斥锁小技巧

    span class token triple quoted string string 34 34 34 需求 创建两个线程 其中一个输出 1 52 另一个输出 A Z 输出格式要求 12A 13B 56C 5151Z 34 34 34

  • Python-TCP服务端程序开发

    文章目录 一 TCP服务端程序开发二 端口复用三 判断客户端程序是否断开四 多任务版本 一 TCP服务端程序开发 span class token triple quoted string string 34 34 34 主动套接字 可以收

  • Python-TCP网络编程基础以及客户端程序开发

    文章目录 一 网络编程基础 什么是IP地址 什么是端口和端口号 TCP介绍 socket介绍 二 TCP客户端程序开发三 扩展 一 网络编程基础 什么是IP地址 IP地址就是标识网络中设备的一个地址 IP地址分为 IPv4 和 IPv6 I

  • HTML介绍

    文章目录 一 HTML介绍二 创建三 HTML结构四 常见的标签五 链接标签六 图片标签七 资源路径八 列表标签九 表格标签十 表单标签十一 表单提交 一 HTML介绍 HTML 超文本标记语言作用 书写前端页面前端三大技术 三大标准 HT

  • CSS介绍

    文章目录 一 CSS介绍二 CSS的引入方式三 CSS选择器 一 CSS介绍 定义 层叠样式表作用 美化界面 设置标签文字大小 颜色 字体加粗等样式控制页面布局 设置浮动 定位等样式 基本语法 选择器 样式规则 样式规则 属性名1 属性值1

  • JavaScript介绍

    文章目录 一 JavaScript介绍二 JavaScript的引入方式三 JavaScript的变量与数据类型四 JavaScript中的函数五 JavaScript变量的作用域六 JavaScript运算符七 JavaScript判断语

  • JQuery介绍

    文章目录 一 JQuery介绍二 JQuery使用三 JQuery选择器四 JQuery选择集过滤五 JQuery选择集转移六 JQuery获取和操作标签内容七 JQuery获取和设置元素属性八 JQuery事件九 JQuery事件代理 事

热门标签