jQuery选择器

最新推荐文章于 2024-04-17 09:18:10 发布
最新推荐文章于 2024-04-17 09:18:10 发布
阅读量307 收藏
点赞数
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39491653/article/details/78419844
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>事件</title>
<script src="../jquery.min.js"></script>
<script>
    //就绪函数
    $(function(){
    //事件下拉或上升
    $("#th1").click(function(){
        $("#p").slideToggle(2000);
    });
    //改变文本背景颜色
    $("#th2").focus(function(){
        $("#p1").css("background-color","red");
    });
    //输入域失去焦点 (blur) 时改变其颜色：
    $("#th3").blur(function(){
        $("#p1").css("background-color","#D6D6F5");
    });
    //触发、或将函数绑定到指定元素的 change 事件
    $("#th4").change(function(){
        $(this).css("color","red");
    });
    //触发、或将函数绑定到指定元素的 click 事件
    //显示对元素点击事件的时间戳
    $("#th5").click(function(){
        $("p").html(event.timeStamp);
    });
    //双击按钮事件
    $("#th4").dblclick(function(){
        $("p").slideToggle();
    });
    //向匹配元素的当前或未来的子元素附加一个或多个事件处理器
    $("div").delegate("button","click",function(){
    $("p").slideToggle();
    });
    //$("img").error(function(){
        //$().replaceWith("图变未加载");
    //});
    //鼠标在屏幕上的XY坐标
    $(document).mousemove(function(e){
        $("#p2").text("x"+e.pageX+"y:"+e.pageY);
    });
    //阻止网址联接
    $("a").click(function(event){
    //阻止默认事件的发生
        event.preventDefault();
        alert("禁止访问");
    });
    //鼠标最后停止的地方时
    $("#th6").click(function(e){
        return("鼠标最后停止的地方时x:"+e.pageX+"y:"+e.pageY);
    });
    $("#th6").click(function(e){
        $("#p3").html(e.result);
    });
    //  触发该事件的 DOM 元素。
    $("p,h1,h3,p,button").click(function(event){
    $("#c").html("点击了"+event.target.nodeName+"元素触发");
    });
    //该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数
    $("#th7").click(function(event){
          $("span").html(event.timeStamp);
        //$("span").html(e.timeStamp);
    });
    //显示触发了哪种类型的事件
    $(".p").bind('click mouseout mouseover ',function(event){
        $("div").html("事件"+event.type);
    });
    //当您在上面的框中键入文本时，下面的 div 会显示键位序号
    //指示按了哪个键或按钮
    //触发、或将函数绑定到指定元素的 key down 事件
    $("#th8").keydown(function(event){
        $("#cd").html("key:"+event.which);
    });
    //触发、或将函数绑定到指定元素的 focus 事件
    //得到焦点变换颜色
    $("#th9").focus(function(){
        $("#th9").css("background-color","red");
    }); 
    //触发、或将函数绑定到指定元素的 blur 事件
    //失去焦点变换颜色
    $("#th9").blur(function(){
        $("#th9").css("background-color","#dddaaa");
    });
    //计算在输入域中的按键次数：
    //  触发、或将函数绑定到指定元素的 key down 事件
    i=0;
    $("#th10").keydown(function(){
        $("#sp").text(i+=1);
    });
    //触发、或将函数绑定到指定元素的 key press 事件
    /*keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。
不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。
keypress() 方法触发 keypress 事件，或规定当发生 keypress 事件时运行的函数。
注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。*/
    $("#th10").keypress(function(){
        $("sp").text(i+=1);
    });
    // keyup() 方法
    /*完整的 key press 过程分为两个部分，按键被按下，然后按键被松开并复位。
当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。
keyup() 方法触发 keyup 事件，或规定当发生 keyup 事件时运行的函数。
注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。
    */
    $("#t1").keyup(function(){
        $("#t1").css("background-color","#dddaaa");
    });
    //触发、或将函数绑定到指定元素的 mouse down 事件
    $("#th11").mousedown(function(){
        $("#t2").slideToggle();
    }); 
    //向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
    //当点击 该 元素时，增加该元素的文本大小
    $("#th12").one("click",function(){
        $(this).animate({
            fontSize:"+=6px",
            width:"50px"
        });
    });
    //对浏览器窗口调整大小进行计数：
    //触发、或将函数绑定到指定元素的 resize 事件
    x=0;
    $(window).resize(function(){
        $("#t3").text(x+=1);
    });
    //
    //对元素滚动的次数进行计数：
    x=0;
    $("#t4").scroll(function(){
    $("#t5").text(x+=1);
    });
    //移除所有 p 元素的事件处理器：
    $("#th13").click(function(){
        $("#t5").unbind();
    });
    });
</script>
<style>
    p{
    background-color:#FF9900;
    color:#FF0000;
    width:100px;
    height:100px;}
    div{
    background-color:#FFCC33;
    width:50px;
    height:50px;}
</style>
</head>

<body>
<div style="background:1px scroll #FF0000;">
<p id="p3">这是一个段落</p>
<button>按钮</button>
</div>
<span id="p2">鼠标坐标</span>
<p id="p">事件测试</p>
<input  id="p1" type="text"/>
<input type="button" value="下拉/上升按钮" id="th1"/><br />
<input  type="button" value="焦点按钮" id="th2"/><br />
<input  type="button" value="失去焦点时改变其颜色按钮" id="th3"/><br />
<input  type="button" value="双击按钮" id="th4"/><br />
<input  type="button" value="时间戳按钮" id="th5"/><br />
<input  type="button" value="按钮" id="th6"/>
<a href="http://www.baidu.com">百度</a>
<input  type="button" value="距1970年毫秒时间按钮" id="th7"/>
    <p>段落一</p>
    <h1>标题一</h1>
    <h3>标题二</h3>
    <p>段落二</p>
    <button>按钮</button>
<div id="c"></div>
<span id="time1">从1970到事件发生的毫秒数</span>
<p class="p">显示事件</p>
<div></div>
<input  type="text" id="th8"/>
<div id="cd"></div>
文本框得到焦点和失去焦点改变颜色<input  type="text" id="th9"/>
<input  type="text" id="th10"/>
计算键盘在输入框的次数<span id="sp"></span>
<input  type="text" id="t1"/>
<input  type="button" id="th11" value="按钮触发mousedown"/>
<input  type="text" id="th12" />
<p id="t2">测试</p>
<input  type="button" value="" id="th13"/>
<span id="t3">浏览器窗口大小</span>
<div id="t4"  style="overflow:scroll;">
sadsadfsadfsafdsa
asfsafsafsafsafs<br />
<br />
<br />
sadsadfsadfsafdsa
asfsafsafsafsafs<br />
<br />
<br />
</div>
<span id="t5">元素滚动次数</span>
<input  type="button" value="移除元素事件处理器" id="th13"/>
</body>
</html>

单击按钮改变div的大小

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery.min.js"></script>
<script>
    $(function(){
        $("#th1").click(function(){
            //alert($("#d").width()+":"+$("#d")height());
        alert($("#div1").width()+":"+$("#div1").height());
        });
        $("#th2").click(function(){
alert($("#div1").innerWidth()+":"+$("#div1").innerHeight());
        });
        $("#th3").click(function(){
        alert($("#div1").outerWidth()+":"+$("#div1").outerHeight());
        });
        $("#th4").click(function(){
            $("#div1").width(500)+":"+$("#div1").height(500);
        });
        $("#th5").click(function(){
            $("#div1").innerWidth(540)+":"+$("#div1").innerHeight(540);
        });
        $("#th6").click(function(){
            $("#div1").outerWidth(300)+":"+$("#div1").outerHeight(300);
        });

    });

</script>
<style>
    div{
    border:1px solid #FF00FF;}
</style>
</head>

<body>
<div id="div1"> 测试</div>
    <input type="button" value="查询宽和高" id="th1"/>
    <input type="button" value="查询宽和高（包含内边距）" id="th2"/>
    <input type="button" value="查询所有宽和高" id="th3"/>
    <input type="button" value="修改宽和高" id="th4"/>
    <input type="button" value="修改宽和高（包含内边距）" id="th5"/>
    <input type="button" value="修改所有宽和高" id="th6"/>
</body>
</html>
qq_39491653
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery选择器思维导图
12-28
通过思维导图对知识进行梳理，以便记忆
jQuery-选择器
weixin_45042311的博客
12-04 6808
jQuery
jQuery选择器详细介绍：基本选择器，层次选择器，属性选择器
最新发布
04-17 1264
(“li+li”).css(“border-top”, “2px solid red”)达到在两两li元素之间添加一个边框的效果。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。注：selector指的是选择器，attr指的是属性（attribute），value指的是属性值。说明：选择M元素后面（不包括前面）的（所有的）某一类兄弟元素N。说明：选择M元素后面（不包括前面）的（相邻的）某一类兄弟元素N。
jQuery的选择器
weixin_44106237的博客
08-15 3531
jQuery的四种选择器，基本选择器，层级选择器，过滤选择器，筛选选择器（方法）
jQuery 选择器全部详细笔记
业精于勤，荒于嬉
04-23 2003
1. jQuery 是一个快速的，简洁的 javaScript 库，使用户能更方便地处理 HTML,css,dom...2. 提供方法、events、选择器，并且方便地为网站提供 AJAX 交互3. 其宗旨是—WRITE LESS,DO MORE,写更少的代码,做更多的事情.4. jQuery 实现了浏览器的兼容问题1. jQuery 对象就是对 DOM 对象进行包装后产生的对象比如： $("#test").html() 意思是指：获取ID为test的元素内的html代码。
四大常见的jQuery选择器+案例
ovocc的博客
03-17 6573
常见的jQuery选择器前言四大选择器一.jQuery基础选择器1.ID选择器2.全选选择器3.类选择器4.标签选择器5.并集选择器6.交集选择器二、使用步骤1.引入库2.读入数据总结 前言 jQuery唯一个javascrip库,里面封装了JavaScript常用的的功能代码，优化了DOM操作，事件处理，动画设计和Ajax交互。但因为jQuery对象有自己的封装，dom对象不能使用，所以需要选择器将对象选取出来使用 四大选择器 一.jQuery基础选择器 1.ID选择器 ID选择器可以选择指定id的
jquery选择器简述
11-24
jQuery选择器使得获得页面元素变得更加容易、更加灵活，从而大大减轻了开发人员的压力。如同盖楼一样，没有砖瓦，就盖不起楼房，得不到元素谈何其他各种操作呢？可见,jQuery选择器的重要性。 jquery选择器大方向可以...
jQuery 选择器
01-19
jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”...
常用jQuery选择器汇总
12-08
学习【js DOM 编程艺术】，最后面有许多jQuery的选择器，每个都动手敲了一遍。 jQuery 提供了高级选择器的方法。 j s获取元素的三个基本方法分别是通过标签名，类名和id，即(getElementsByTagName, ...
jQuery 选择器用法实例分析【prev + next】
10-15
jQuery选择器是jQuery库中的核心部分，用于高效地选取DOM元素。在JavaScript中，选取DOM元素通常需要编写复杂的代码，而jQuery提供了一套简洁、强大的选择器系统，使得选取元素变得简单直观。本文将深入探讨jQuery...
Jquery选择器大全
02-11
Jquery选择器,Jquery选择器Jquery选择器Jquery选择器Jquery选择器Jquery选择器
jquery的选择器（选择器的分类和作用）
weixin_67138897的博客
10-19 3488
基本选择器是jQuery中最常用也是最简单的选择器，它通过元素的id、class和标签名等来查找DOM元素。
jQuery系列之选择器
老__L的博客
08-27 2700
原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。根据给定的ID匹配一个元素。使用任何的元字符作为名称的文本部分， 它必须被两个反斜杠转义：。 1.1.2.1、参数 id：String 用于搜索的，通过元素的 id 属性中给定的值 1.1.3、示例 查找含有特殊字符的元素 1.2、全选选择器 1.2.1、概述 匹配所有元素多用于结合上下文来搜索。 1.2.3、示例 找到每一个元素 1.3、类选择器 1.3.1、概述 根据给定的 css
Jquery 选择器
飞奔的小强
05-15 678
jQuery 选择器简介 　　　　  jQuery 选择器允许对 HTML 元素组或单个元素进行操作。 　　　　jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。 　　　　jQuery 中所有选择器都以美元符号开头：$()。 1 .基本选择器   　　　　$("#te...
jQuery基础----常用的选择器
u011863822的博客
07-20 1332
本篇就是列举了一些常用的jQuery选择器而匹配元素，当然如果学习过css会更好理解的。
jQuery中的选择器
qq_56769697的博客
04-17 439
jQuery中的选择器
jquery选择器
06-01
jQuery选择器是一个功能强大的工具，用于选择HTML元素并对其进行操作。jQuery提供了多种选择器方法，以下是其中的一些： 1. ID选择器： 使用“#”符号，后跟ID名称，如下所示： ``` $("#myId") ``` 2. 类选择器...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值