JQuery介绍

news/2024/7/11 1:53:48 标签: jquery, javascript, 前端

文章目录

  • 一. 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>javascript">
	代码
</script>
  • JS对象和Jquery对象转换
js对象 ----> jquery对象
oDiv ----> $(oDiv)

Jquery对象 ----> js对象
$Div ----> $Div[0]
  • 在浏览器中, 可以使用控制台
javascript">> 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>javascript">
        // 入口函数
        $(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>javascript">
        $(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>javascript">
        $(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>javascript">
        $(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>javascript">
        $(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="javascript language-javascript">fnClick()">
        <input type="button" value="点击, 对 input 的数字 + 10显示" onclick="javascript language-javascript">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>javascript">
        $(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>javascript">
        // 事件冒泡: 内层标签的事件会向外层标签进行传递, 例如 下面两个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>javascript">
        $(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="javascript language-javascript">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>javascript">
        $(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="javascript language-javascript">fnClick()">
</body>
</html>

http://www.niftyadmin.cn/n/163838.html

相关文章

计算机网络 简单FTP客户端软件的实现

计算机网络 简单FTP客户端软件的实现

一.原理概述 1.1 FTP原理概述 文件传送协议FTP&#xff08;File Transfer Protocol&#xff09;是TCP/IP体系的一个重要协议&#xff0c;它采用Internet标准文件传输协议FTP的用户界面&#xff0c;向用户提供了一组用来管理计算机之间文件传输的应用程序。FTP是基于客户—服务…
阅读更多...
一个极具误导性的数学术语汉译名——几何级数

一个极具误导性的数学术语汉译名——几何级数

目录 1. 提出问题 2. “geometric progression”的英语解释 1. 提出问题 由于历史原因和学术规则的原因&#xff0c;很多数学术语的汉语译名给读者造成了长期的困惑&#xff0c;让读者从字面意义看不出其本质意义&#xff0c;甚至还被其字面意义所误导。 “几何级数(geomet…
阅读更多...
【第74篇】 FasterNet：CVPR2023年最新的网络，基于部分卷积PConv，性能远超MobileNet，MobileVit

【第74篇】 FasterNet：CVPR2023年最新的网络，基于部分卷积PConv，性能远超MobileNet，MobileVit

文章目录 摘要1、简介2、相关工作3、PConv和fastnet的设计3.1. 准备工作3.2. 部分卷积作为基本算子3.4. FasterNet作为一般的主干网络4、实验结果4.1. PConv是快速的，但具有很高的FLOPS4.2. PConv与PWConv同时有效4.3. fastnet对ImageNet-1k分类4.4. 下游任务的fastnet4.5、消…
阅读更多...
红黑树详解

红黑树详解

目录 概念 结构 插入 父亲为红&#xff0c;叔叔存在且为红 父亲为红&#xff0c;叔叔不存在或者为黑 单旋 双旋 红黑树的验证 红黑树删除 红黑树性能分析 概念 红黑树是一种二叉平衡搜索树&#xff0c;以颜色标记每一个节点&#xff0c;通过对颜色的限制&…
阅读更多...
内核实验（五）：传统简单字符设备驱动

内核实验（五）：传统简单字符设备驱动

文章目录一、篇头二、源码2.1 驱动关键部分2.2 APP&#xff1a;test\_3\_app.c2.3 驱动完整源码2.4 Makefile三、编译3.1 编译ko3.2 编译app四、测试4.1 部署4.2 测试4.2.1 启动qemu虚拟机4.2.2 运行测试文件4.2.3 查看设备情况五、篇尾一、篇头 目标是把内核相关部分的实验都…
阅读更多...
mysql innodb中的锁

mysql innodb中的锁

innodb 既支持表级锁&#xff0c;也支持行级锁。表级锁粒度粗&#xff0c;占用资源少。有时仅仅需要锁定几条记录&#xff0c;如果使用表级锁&#xff0c;相当于给所有记录都加锁&#xff0c;性能低下。行锁粒度细&#xff0c;可以实现精准并发控制&#xff0c;但是占用资源多。…
阅读更多...
Java中的关键字、标识符

Java中的关键字、标识符

文章目录关键字&#xff08;Keywords&#xff09;标识符&#xff08;Identifier&#xff09;标识符命名规则&#xff08;必须遵守&#xff0c;否则编译不通过&#xff09;标识符命名规范关键字&#xff08;Keywords&#xff09; 定义&#xff1a;被Java语言赋予了特殊含义&…
阅读更多...
【风光场景生成】基于改进ISODATA的负荷曲线聚类算法（Matlab代码实现）

【风光场景生成】基于改进ISODATA的负荷曲线聚类算法（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
最新文章

Copyright @ 2022~2023