jQuery的使用

news2025/1/12 8:54:28

目录

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>

浏览器运行结果如下:

 


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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Android 12 及以上授权精确位置和模糊位置

请求位置信息权限 为了保护用户隐私&#xff0c;使用位置信息服务的应用必须请求位置权限。 请求位置权限时&#xff0c;请遵循与请求任何其他运行时权限相同的最佳做法。请求位置权限时的一个重要区别在于&#xff0c;系统中包含与位置相关的多项权限。具体请求哪项权限以及…

数据结构:字典树(前缀树,Trie树),压缩字典树(Radix)

字典树Trie Tree 字典树也称前缀树&#xff0c;Trie树。在 Elasticsearch 的倒排索引中用的也是 Trie 树。是一种针对字符串进行维护的数据结构。 字典树是对词典的一种存储方式&#xff0c;这个词典中的每个“单词”就是从根节点出发一直到某一个目标节点的路径&#xff0c;…

C++算法入门练习——有向图判环

现有一个共n个顶点、m条边的有向图&#xff08;假设顶点编号为从0到n-1&#xff09;&#xff0c;如果从图中一个顶点出发&#xff0c;沿着图中的有向边前进&#xff0c;最后能回到这个顶点&#xff0c;那么就称其为图中的一个环。判断图中是否有环。 解题思路&#xff1a; 判断…

Python datetime 字符串 相互转 datetime

字符串转 datetime from datetime import datetime# 定义要转换的日期时间字符串 dt_str "2021-09-30 15:48:36"# 使用datetime.strptime()函数进行转换 dt_obj datetime.strptime(dt_str, "%Y-%m-%d %H:%M:%S") print(dt_obj)datetime 转字符串 from …

2023年11月随笔之双11成为有qian人

1. 回头看 日更坚持了334天。 学信息系统项目管理师第4版系列全部更新完成 读《图数据库实战》缓缓更...... 读《读程序员的制胜技》开更并更新完成 读《像火箭科学家一样思考&#xff1a;将不可能变为可能》开更持续更新中 11月码字68883字&#xff0c;日均码字数2296字…

2023年中国金融租赁行业研究报告

第一章 行业概况 1.1 定义 金融租赁是一种融资方式&#xff0c;其中租赁公司&#xff08;出租人&#xff09;为企业&#xff08;承租人&#xff09;购买所需设备&#xff0c;并在租赁期内由承租人使用。承租人负责支付租金&#xff0c;租赁期满后有权选择退租、续租或购买设备…

24年5月软考高项考哪些内容,考试大纲什么的?

信息系统项目管理师属于「计算机技术与软件专业技术资格&#xff08;水平&#xff09;考试」中的高级资格考试。 也称「软考高项」&#xff0c;可以「以考代评」用来评副高级职称。 一、软考备考前期准备 信息系统项目管理师考试科目包括&#xff1a; 《综合知识》、《案例分…

java设计模式学习之【适配器模式】

文章目录 引言适配器模式简介定义与用途&#xff1a;实现方式&#xff1a;类型 使用场景优势与劣势适配器模式在Spring中的应用多媒体播放器示例代码地址 引言 在我们的日常生活中&#xff0c;适配器无处不在&#xff1a;无论是将不同国家的插头转换成本地标准&#xff0c;还是…

SSM众筹管理系统开发mysql数据库web结构java编程计算机网页源码eclipse项目

一、源码特点 SSM 众筹管理系统是一套完善的信息系统&#xff0c;结合springMVC框架完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用SSM框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开…

map()的用法

JavaScript Array map() 方法 先说说这个方法浏览器的支持&#xff1a; 支持五大主流的浏览器&#xff0c; 特别注意&#xff1a;IE 9 以下的浏览器不支持&#xff0c;只支持IE 9以上的版本的浏览器 特别注意&#xff1a;IE 9 以下的浏览器不支持&#xff0c;只支持IE 9以上的…

设计师必看!揭秘顶级外卖平台APP背后的设计原则

在数字化和移动互联网盛行的今天&#xff0c;外卖平台APP已经成为我们生活中的重要组成部分。作为设计师&#xff0c;你是否也曾思考过如何通过设计优化用户体验&#xff0c;提升品牌形象&#xff0c;甚至直接推动业务增长&#xff1f;今天&#xff0c;我们将向你揭示顶级外卖平…

Python内置类属性__cmp__属性的使用教程

概要 Python是一种简单而强大的编程语言&#xff0c;它提供了许多内置的类和功能&#xff0c;以帮助开发人员更轻松地实现各种任务。其中一个内置类属性是__cmp__&#xff0c;它允许我们在自定义类中实现对象之间的比较操作。本文将详细介绍__cmp__属性的使用方法&#xff0c;…

DistilBERT模型训练实战

LLM似乎正在接管世界&#xff0c;但许多人仍然不真正理解他们是如何运作的。 我从事机器学习工作已有几年&#xff0c;并且对自然语言处理和最近的进展非常着迷。 尽管我阅读了大部分随附的论文&#xff0c;但训练这些模型对我来说仍然是一个谜&#xff0c;这就是为什么我决定…

CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)

CSS中的非布局样式 在CSS中&#xff0c;非布局样式是指那些不会直接影响页面布局的样式。这些样式主要关注的是元素的颜色、字体、背景、边框、阴影等视觉效果。以下是一些常见的非布局CSS样式&#xff1a; 文本样式&#xff1a;包括字体&#xff08;font-family&#xff09;…

以太网PHY,MAC接口

本文主要介绍以太网的 MAC 和 PHY&#xff0c;以及之间的 MII&#xff08;Media Independent Interface &#xff0c;媒体独立接口&#xff09;和 MII 的各种衍生版本——GMII、SGMII、RMII、RGMII等。 简介 从硬件的角度看&#xff0c;以太网接口电路主要由MAC&#xff08;M…

GAN:WGAN-GP-带有梯度惩罚的WGAN

论文&#xff1a;https://arxiv.org/pdf/1704.00028.pdf 代码&#xff1a;GitHub - igul222/improved_wgan_training: Code for reproducing experiments in "Improved Training of Wasserstein GANs" 发表&#xff1a;2017 WGAN三部曲的终章-WGAN-GP 摘要 WGAN在…

YOLOv5全网独家首发改进:SENetv2,Squeeze-Excitation模块融合Dense Layer,效果秒杀SENet

💡💡💡本文自研创新改进:SENet v2,针对SENet主要优化点,提出新颖的多分支Dense Layer,并与Squeeze-Excitation网络模块高效融合,融合增强了网络捕获通道模式和全局知识的能力 推荐指数:五星 收录 YOLOv5原创自研 https://blog.csdn.net/m0_63774211/catego…

GPT市场将取代插件商店 openAI已经关闭plugins申请,全部集成到GPTs(Actions)来连接现实世界,可以与物理世界互动了。

Actions使用了plugins的许多核心思想&#xff0c;也增加了新的特性。 ChatGPT的"Actions"与"Plugins"是OpenAI在GPT模型中引入的两种不同的功能扩展机制。这两种机制的目的是增强模型的功能&#xff0c;使其能够处理更多样化的任务和请求。下面是对两者的比…

应用于智慧工厂的AI边缘计算盒子+AI算法软硬一体化方案

智慧工厂解决方案&#xff0c;传统工厂/生产管理&#xff0c;普遍存在运营粗放、效率低、应变能力差、安全隐患突出、资源不平衡等“行业症状”&#xff1b; 以英码产品为核心的智能化场景解决方案&#xff0c;可以从本质上根治这些“症状”&#xff0c;如企业可利用智能预测系…

RocketMQ Copilot 一款面向 Apache RocketMQ 的智能辅助运维系统

一、RocketMQ简介 ocketMQ是阿里巴巴研发的一款分布式消息中间件&#xff0c;后开源给Apache基金会&#xff0c;成为apache的顶级开源项目。它具有高性能、高可靠、高实时和分布式的特点。RocketMQ主要应用于解决应用耦合&#xff0c;消息分发&#xff0c;流量削锋等问题。 R…