jQuery的使用

目录

jquery对象：

jquery作为一般函数调用参数:

jquery事件机制 

jquery dom操作

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>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script>
        // 点击按钮将输入在输入框中的值弹框显示
        window.onload = function(){
            var input = document.querySelector('input');
            var btn = document.querySelector('button');
            btn.onclick = function(){
                alert(input.value)
            }
        }
        $(function(){
            //成为jquery实例：$()   
            $('button:last').click(function(){
                alert($('input').val())
            })
        })
    </script>
</head>
<body>
    <input type="text">
    <button>确定(js)</button>
    <button>确定(jquery)</button>
</body>
</html>

 浏览器运行结果如下：

jquery作为一般函数调用参数:

  1.$() 匿名函数  入口函数区别
  2.css选择器字符串 匹配元素 
  3.dom对象 jquery会把dom对象封装为jquery对象
  4.html字符串 表示创建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>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script>
        /**
         * jquery函数被当作一般函数调用 $(params)
         * 1.函数内部参数可以是css选择器字符串 表示匹配元素
         *   $('div') $('.two') $('#three')
         * 2.函数内部参数可以是dom对象 将他封装成jquery对象
         * 3.函数内部参数可以是匿名函数 表示jquery入口函数
         * 4.函数内部可以是html元素字符串 表示创建html元素
        */
       $(function(){
        $('button').click(function(){
            console.log(this,$(this));
            $(this).html('不想被网爆');
            //创建h1标题并追加给body标签
            $('<h1>sb</h1>').appendTo('body')
        })
       })
    </script>
</head>
<body>
    <button>网爆我</button>
</body>
</html>

浏览器运行结果如下：

 

jquery事件机制 

  绑定事件：on(function(event){
    event---jquery封装的事件对象 data
  })  bind()  one()一次性事件绑定
  解绑事件：off()  unbind()  
  事件类型：click() blur() focus() mouseenter() mousedown() 
  trigger 模拟事件 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script>
        /**
         * 1.给元素绑定事件 click(handler)
         * 2.给元素绑定事件 on(事件类型，实际参数，handler(形式参数){})
        */
        $(function () {
            // //绑定事件
            // $('button').on('click', [1, 2, 3, 4], function (event) {
            //     console.log(event, '事件对象', event.data);
            // });
            // //解绑事件  off解绑事件
            // $('button').off('click');


            // //绑定事件 bind方法绑定事件
            // $('button').bind('click', 'terry', function (event) {
            //     console.log(event);
            // });
            // $('button').bind('mouseenter', function (event) {
            //     $(this).css({
            //         backgroundColor:'red'
            //     })
            // });
            // //unbind解绑事件
            // $('button').unbind('click');
            // //一次性解绑所有事件 unbind不加参数
            // $('button').unbind();

            // // $('button').on('click',function(){
            // //     $(this).html('被点击了')
            // // });
            // //事件代理 给父元素绑定事件  on(事件类型，选择器，实际参数，handler)
            // $('body').on('click','button',function(){
            //     $(event.target).html('被点击了')
            // })

            // //一次性事件绑定 one  事件只执行一次
            // $('button').one('click',{name:'larry'},function(event){
            //     console.log(event.data);
            // })

            // //模拟事件 trigger
            // $('button').click(function(event,a,b,c){
            //     console.log('我被点击了',event,a,b,c);
            // });
            // $('button').trigger('click',[1,2,3]);

            // //聚焦事件 focis
            // $('input').focus(function () {
            //     $(this).css({
            //         backgroundColor: 'red'
            //     })
            // })
            // //失焦事件 blur
            // $('input').blur(function () {
            //     $(this).css({
            //         backgroundColor: 'blue'
            //     })
            // })


            $('button').mouseenter(function(){
                $(this).css({
                    backgroundColor:'red'
                })
            });
            $('button').mouseleave(function(){
                $(this).css({
                    backgroundColor:'blue'
                })
            });
            $('button').dblclick(function(){
                console.log('我被双击了');
            });
        })
    </script>
</head>

<body>
    <input type="text">
    <button>点击我</button>
    <button>点击我</button>
    <button>点击我</button>
    <button>点击我</button>
    <button>点击我</button>
    <button>点击我</button>
    <button>点击我</button>
    <button>点击我</button>
    <button>点击我</button>
    <button>点击我</button>
    <button>点击我</button>
    <button>点击我</button>
    <button>点击我</button>
</body>

</html>

浏览器运行结果如下：

jquery dom操作

  addClass() 添加类名
  removeClass() 移除类名
  toggleClass() 切换类名 有类名则是移除 没有则是添加
  clone() 深克隆和浅克隆 克隆事件和内容
  attr()
  removeAttr()
  html() 元素的内容 包括文本和标签
  text() 只获取元素的文本内容
  val()  获取输入框值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <style>
        .active{
            background-color: pink;
        }
    </style>
    <script>
        $(function(){
            //在匹配到的元素后面增加内容 append
            $('div').append('我是新增的内容');
            $('div').append('<h1>一级标题</h1>');

            //appendTo 将前面创建的元素添加给appendTo()中的目标元素
            $('<p>段落标签</p>').appendTo('body');
            $('div').after('<section>块级元素</section>');
            $('div').before('<section>块级元素</section>');
            $('button').click(function(){
                alert('我被点击了')
            });
            //clone 克隆节点  true深克隆(内容事件都可克隆) false浅克隆(事件没有克隆)
            $('button').clone(true).appendTo('body');

            // //添加一个类名 addClass
            // $('#one').addClass('active');
            // //移除一个类名 removeClass
            // $('#one').removeClass('two');
            //切换类名
            // $('div').click(function(){
            //     //toggleClass 切换类名 如果默认有类名则是移除，如果没有则是添加
            //     $(this).toggleClass('active');
            // })
            console.log($('body').text(),'元素文本内容');
            console.log($('body').html(),'识别代码片段');
        })
    </script>
</head>
<body>
    <button>点击我</button>
    <div id="one" class="two" title="我是div的title">我是块级元素</div>
</body>
</html>

浏览器运行结果如下：

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/207578.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

MySQL 教程 1.4

MySQL 教程 1.4

MySQL 连接 使用mysql二进制方式连接 您可以使用MySQL二进制方式进入到mysql命令提示符下来连接MySQL数据库。 实例 以下是从命令行中连接mysql服务器的简单实例&#xff1a; [roothost]# mysql -u root -p Enter password:****** 在登录成功后会出现 mysql> 命令提示窗…
阅读更多...
Python全栈之基本数据类型详解

Python全栈之基本数据类型详解

文章目录 1.注释2.输出3.变量4.命名规范5.变量的定义方式1.字符串类型2.数字类型3.List列表类型4.tuple 元组类型的定义5.Dict字典类型6.set集合类型7.数据类型转换8.自动类型转换9.强制类型转换关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、精品…
阅读更多...
Reactor网络线程模型

Reactor网络线程模型

目录 传统下网络服务模型 事件监听模型 NIO核心概念 单线程Reactor模式 多线程Reactor模式 Kafka 的网络设计 主要概念 类比思维理解 参考文章 传统下网络服务模型 线程太多无法处理大规模请求 事件监听模型 NIO核心概念 nio是实现reactor模式的底层API代码 单…
阅读更多...
【SparkSQL】SparkSQL函数定义（重点：定义UDF函数、使用窗口函数）

【SparkSQL】SparkSQL函数定义（重点：定义UDF函数、使用窗口函数）

【大家好&#xff0c;我是爱干饭的猿&#xff0c;本文重点介绍SparkSQL 定义UDF函数、SparkSQL 使用窗口函数。 后续会继续分享其他重要知识点总结&#xff0c;如果喜欢这篇文章&#xff0c;点个赞&#x1f44d;&#xff0c;关注一下吧】 上一篇文章&#xff1a;《【SparkSQL…
阅读更多...
C++相关闲碎记录(2)

C++相关闲碎记录(2)

1、误用shared_ptr int* p new int; shared_ptr<int> sp1(p); shared_ptr<int> sp2(p); //error // 通过原始指针两次创建shared_ptr是错误的shared_ptr<int> sp1(new int); shared_ptr<int> sp2(sp1); //ok 如果对C相关闲碎记录(1)中记录的shar…
阅读更多...
【前缀和]LeetCode1862：向下取整数对和

【前缀和]LeetCode1862：向下取整数对和

本文涉及的基础知识点 C算法&#xff1a;前缀和、前缀乘积、前缀异或的原理、源码及测试用例 包括课程视频 作者推荐 动态规划LeetCode2552&#xff1a;优化了6版的1324模式 题目 给你一个整数数组 nums &#xff0c;请你返回所有下标对 0 < i, j < nums.length 的 …
阅读更多...
一文带你了解网络安全简史

一文带你了解网络安全简史

网络安全简史 1. 上古时代1.1 计算机病毒的理论原型1.2 早期计算机病毒1.3 主要特点 2. 黑客时代2.1 计算机病毒的大流行2.2 知名计算机病毒2.3 主要特点 3. 黑产时代3.1 网络威胁持续升级3.2 代表性事件3.3 主要特点 4 高级威胁时代4.1 高级威胁时代到来4.2 著名的APT组织4.3 …
阅读更多...
Python之Requests模块简介与安装

Python之Requests模块简介与安装

Requests模块简介 在python的标准库中&#xff0c;虽然提供了urllib,utllib2,httplib&#xff0c;但是做接口测试&#xff0c;requests使用更加方便快捷&#xff0c;正如官方说的&#xff0c;“让HTTP服务人类”。 Requests是用python语言基于urllib编写的&#xff0c;采用的是…
阅读更多...
利用异或、取反、自增bypass_webshell_waf

利用异或、取反、自增bypass_webshell_waf

目录 引言 利用异或 介绍 eval与assert 蚁剑连接 进阶题目 利用取反 利用自增 引言 有这样一个waf用于防御我们上传的文件&#xff1a; function fun($var): bool{$blacklist ["\$_", "eval","copy" ,"assert","usort…
阅读更多...
折扣因子的变化图（Python）

折扣因子的变化图（Python）

var 3 var_list [3] for _ in range(50):var * .95var_list.append(var)import matplotlib.pyplot as plt import numpy as np plt.plot(np.arange(len(var_list)), var_list, linewidth1) plt.show()
阅读更多...
美丽的时钟

美丽的时钟

案例绘制一个时钟 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>美丽的时钟</title><script language"javascript">window.onloadfunction(){var clockdocument.getElementById("clock"…
阅读更多...
你需要知道所有设计模式吗？

你需要知道所有设计模式吗？

后续我会详细展开设计模式 &#x1d5d7;&#x1d5fc; &#x1d5ec;&#x1d5fc;&#x1d602; &#x1d5e1;&#x1d5f2;&#x1d5f2;&#x1d5f1; &#x1d5e7;&#x1d5fc; &#x1d5de;&#x1d5fb;&#x1d5fc;&#x1d604; &#x1d5d4;&#x1d5f9;&…
阅读更多...
溜冰场电脑收银系统软件会员管理操作教程，佳易王溜冰场会员卡管理软件下载

溜冰场电脑收银系统软件会员管理操作教程，佳易王溜冰场会员卡管理软件下载

溜冰场电脑收银系统软件会员管理操作教程&#xff0c;佳易王溜冰场会员卡管理软件下载 一、软件 部分功能简介&#xff1a; 1、会员信息登记 &#xff1a;可以直接使用手机号登记&#xff0c;也可以使用实体卡片&#xff0c;推荐用手机号即可。 2、会员卡类型 &#xff1a;可…
阅读更多...
Redis：事务操作

Redis：事务操作

目录 Redis事务定义相关命令事务的错误处事务冲突的问题Redis事务三特性 Redis事务定义 redis事务是一个单独的隔离操作&#xff0c;事务中的所有命令都会序列化、按顺序地执行&#xff0c;事务在执行的过程中&#xff0c;不会被其他客户端发送来的命令请求所打断。 redis事务…
阅读更多...
HTAP 还可以这么玩？丨TiDB 在 IoT 智慧园区的应用

HTAP 还可以这么玩？丨TiDB 在 IoT 智慧园区的应用

作者&#xff1a;某物联网公司设施云平台负责人 用户简介&#xff1a;我们是一家提供全链智慧园区整体解决方案的物联网公司&#xff0c;致力于打造可持续发展的智慧园区。 基础设施平台简介 基础设施平台是集团一线作业人员日常工作中高度依赖的重要系统&#xff0c;涵盖了各…
阅读更多...
涉密计算机违规外联原因及防范措施

涉密计算机违规外联原因及防范措施

高度信息化的时代&#xff0c;涉密计算机违规外联已成为一种严重的安全威胁。涉密计算机违规外联是指涉密计算机通过互联网、电子邮件等方式与外部计算机或网络进行连接&#xff0c;导致机密信息泄露或被恶意攻击。 为了应对这一问题&#xff0c;本文将探讨涉密计算机违规外联的…
阅读更多...
WPF实战项目十九（客户端）：修改RestSharp的引用

WPF实战项目十九（客户端）：修改RestSharp的引用

修改HttpRestClient&#xff0c;更新RestSharp到110.2.0&#xff0c;因为106版本和110版本的代码不一样&#xff0c;所以需要修改下代码 using Newtonsoft.Json; using RestSharp; using System; using System.Threading.Tasks; using WPFProjectShared;namespace WPFProject.S…
阅读更多...
wps备份功能 救了我一命

wps备份功能 救了我一命

感谢wps备份功能 救了我一命 文章目录 感谢wps备份功能 救了我一命**&#x1f4dd;场景回现&#xff0c;往后再不干了**&#x1f9e3;灵光一现&#x1f4c7;备注中心的设置流程&#x1f58a;️最后总结 &#x1f4dd;场景回现&#xff0c;往后再不干了 小&#x1f42e;今天接到…
阅读更多...
理解BatchNormalization层的作用

理解BatchNormalization层的作用

深度学习 文章目录 深度学习前言一、“Internal Covariate Shift”问题二、BatchNorm的本质思想三、训练阶段如何做BatchNorm四、BatchNorm的推理(Inference)过程五、BatchNorm的好处六、机器学习中mini-batch和batch有什么区别 前言 Batch Normalization作为最近一年来DL的重…
阅读更多...
Spring Task

Spring Task

1 介绍 Spring Task 是Spring框架提供的任务调度工具&#xff0c;可以按照约定的时间自动执行某个代码逻辑。 定位&#xff1a;定时任务框架 作用&#xff1a;定时自动执行某段Java代码 为什么要在Java程序中使用Spring Task&#xff1f; 应用场景&#xff1a; 1). 信用卡…
阅读更多...
最新文章

Copyright @ 2022~2023