jQuery中常用基本选择器的使用方法

最新推荐文章于 2022-11-09 11:12:07 发布
最新推荐文章于 2022-11-09 11:12:07 发布
阅读量423 收藏
点赞数
分类专栏： 基础 文章标签： 结构 设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangwenzheng0526/article/details/78290926
版权

  今天给大家介绍一下jQuery中常用的基本选择器使用方法,希望对大家有帮助,以下是在html编辑界面的代码.

  <!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=utf-8" />
    <title>基本选择器.html</title>
    <!-- 引入jQuery -->
    <script src="../js/jquery-1.11.0.min.js"></script>
    <script src="../js/assist.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <script type="text/javascript">
    $(function(){    
    //<input type="button" value="选择 id为 one 的元素." id="btn1"/>
    $("#btn1").click(function(){
    //$("#one").css("background-color","yellow");
    $("#one").css("backgroundColor","yellow");
    })
    //<input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
    $("#btn2").click(function(){
    $(".mini").css("background-Color","yellow");
    })    
    //<input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
    $("#btn3").click(function(){
    $("div").css("background-Color","yellow");
    })
    //<input type="button" value="选择 所有的元素." id="btn4"/>
    $("#btn4").click(function(){
    $("*").css("background-Color","yellow");
    })
    //<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
    $("#btn5").click(function(){
    $("span,#two").css("backgroound-Colr","yellow");
    })       
    })   
    </script>
    </head>
    <body>
    <button id="reset">手动重置页面元素</button>
    <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
    <h3>基本选择器.</h3>    
    <!-- 控制按钮 -->
    <input type="button" value="选择 id为 one 的元素." id="btn1"/>
    <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
    <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
    <input type="button" value="选择 所有的元素." id="btn4"/>
    <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>    
    <br /><br />    
    <!-- 测试的元素 -->
    <div class="one" id="one" >
    id为one,class为one的div
    <div class="mini">class为mini</div>
    </div>   
    <div class="one" id="two" title="test" >
    id为two,class为one,title为test的div.
    <div class="mini" title="other">class为mini,title为other</div>
    <div class="mini" title="test">class为mini,title为test</div>
    </div>   
    <div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    </div>            
    <div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini" title="tesst">class为mini,title为tesst</div>
    </div>       
    <div style="display:none;" class="none">style的display为"none"的div</div>    
    <div class="hide">class为"hide"的div</div>    
    <div>
    包含input的type为"hidden"的div<input type="hidden" size="8"/>
    </div>     
    <span id="mover">正在执行动画的span元素.</span>
    
    </body>
    </html>
    
zhangwenzheng0526
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
常用jQuery选择器汇总
12-08
在JavaScript中，获取元素通常依赖于`getElementsByTagName`、`getElementsByClassName`和`getElementById`这三个基本方法，而jQuery提供了更为丰富的选择器语法，使得元素选取更加灵活高效。 1. **基础选择器**： ...
jQuery选择器之基本选择器与层次选择器
10-24
基本选择器是最简单且最常用的jQuery选择器，它们包括ID选择器、类选择器、元素选择器和通配符选择器。 1. **ID选择器**: 使用`#`符号后跟一个唯一的ID名称，用于选取页面上ID匹配的那个唯一元素。例如：`$("#test...
JQuery选择器
diaozhantang1615的博客
03-06 127
选择器是JQuery的根基，在JQuery 中，对事件处理，遍历DOM和Ajax操作都依赖于选择器。这也是今天我们学习的重点内容。1.基本选择器基本选择器是JQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class 和标签名来查找DOM元素。这个非常重要，下面的内容都是以此为基础，逐级提高的。1).“$(“#id”)”，获取id指定的元素，id是全局唯一的，所以它...
jQuery基本选择器的使用(一)
weixin_43319279的博客
10-08 103
接着上一讲的内容:代码如下： <!DOCTYPE html><!--标记文本为html--> <html> <head> <meta charset="utf-8"><!--编码是utf-8 --> <title>day01</title><!--标题--> <script s...
jquery中选择器的使用讲解
lqc851011的专栏
01-10 549
jquery中的选择器是css3和XPath的结合,jQuery提取这两种查询语言最好的部分，结合后创造出了最终的jquery表达式查询语言。如果你CSS非常熟悉的话那么你学起来就很容易了。 基本选择器：$("#myELement") 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素$("div") 选择所有的div标签元素，
Jquery中的基本选择器
gdd1990shl的博客
04-10 375
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .div_1{ background-color:pink; border: 1px solid sandybrown; width:500px; text-align: left; } .div_2{
jQuery_基本选择器
大脸猫~
06-24 4672
一.CSS选择器： #id &amp;nbsp; &amp;nbsp;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; id选择器 &amp;nbsp; &amp;nbsp;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;#id{color:red} .class &amp;nbsp
jQuery选择器之基本选择器用法实例分析
12-09
基本选择器是jQuery选择器中最基础也最常用的，它们包括：所有元素选择器、ID选择器、类选择器和元素选择器。以下是对这些基本选择器的详细解释和实例分析。 1. 所有元素选择器（`*`） 使用`*`选择器可以匹配文档...
jQuery常用选择器详解
10-19
1. **基本选择器**： - `#id`：通过ID选取元素，如`$('#div1')`。 - `.class`：通过类名选取元素，如`$('.w100')`。 - `tag`：通过标签名选取元素，如`$('div')`。 - `*`：选取所有元素，如`$('*')`。 2. **...
常用jQuery选择器总结
10-25
1. **基本选择器**： - `$("#myElement")`：选择ID为`myElement`的唯一元素。 - `$("div")`：选择所有`<div>`标签。 - `$(".myClass")`：选择所有具有`myClass`类的元素。 - `*$("*")`：选择文档中的所有元素。 ...
jQuery基础 | 选择器
Uching的博客
10-10 471
导读：jQuery选择器分为：基本选择器、层次选择器、过滤选择器和表单选择器四大类。基本选择器1-1 基本选择器 选择器 功能 返回值 #id id选择器 单个元素 element 元素选择器 元素集合 .class 类选择器 元素集合 * 匹配所有元素 元素集合 selector1,selector2 将每一个选择器匹配到的元素合并
jQuery学习：基本选择器
最新发布
weixin_47295886的博客
11-09 407
selector1 +selector2：查找前面的元素是selector1后面的兄弟是selector2的选择器。selector1 >selector2：查找父元素selector1子元素selector2的选择器。基本选择器：#id element .class * :id选择器 元素选择器 类选中器 通配符选择所有元素.过滤选择器： 在找到的一堆元素中 选中你想要的:first 等。层次选择器：查找子元素 后代元素 兄弟元素的选择器的使用。层次选择器：查找子元素 后代元素 兄弟元素的选择器。
基本选择器使用一
bing_JavaScript的博客
08-09 265
基本选择器使用             *{margin:0;padding: 0}         .clearfix:after,.clearfix:before{display:table;content:""}         .clearfix:after{clear:both;overflow: hidden}         .demo{width: 250px;bord
jquery常用选择器总结
qq_37204849的博客
06-18 322
jquery常用选择器 基本选择器   $(‘*’) 匹配页面所有元素 $(‘#id’) id选择器 $(‘.class’) 类选择器 $(‘element’) 标签选择器     组合/层次选择器   $(‘E,F’) 多元素选择器，
jQuery基本使用 及选择器
qindayong
07-29 169
jQuery基本使用 及选择器 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处...
jQuery中常用的选择器及常用的方法
Diligently
02-13 1973
window:窗口 常用属性: 获取其他的四个对象 window.location.... 常用方法: 消息框 alert confirm prompt 定时器 setInterval 周期 setTimeout 延迟 打开关闭  open close location:定位 location.href:设置或者获取url history:历史 ...
jQuery的选择器分类
天高任鸟飞
07-26 293
基本选择器 //ID选择器 $("#id") //元素选择器 $("div") //类选择器 $(".classname") //组合选择器 $(".classname,.classname1,#id1") 层次选择器 //子元素选择器 $("#id&gt;.classname") //后代元素选择器 $(&quo
jQuery入门及选择器使用
mingtian369的专栏
08-06 539
jquery是一个优秀的JavaScript库。 开发环境可以用Dreamweaver，在官网jquery.com下载jquery库,编写代码时，首先要引入库。 下面看一段简单代码，使用jquery选择器 无标题文档  //此句代码引入了jquery库文件，选择jquery放置的路径，所有的jquery编码都要加上这一句 .yy1{width:100px;heigh
JQuery基础之选择器的基本用法
Mars的博客
10-30 447
一、jQuery 选择器1、jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。2、jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。3、jQuery 中所有选择器都以美元符号开头：$()。二、元素选择器1、jQuery 元素选择器基于元素名选取元素。实例：在页面中选取
JQuery常用方法与选择器详解
"这是一份关于JQuery常用方法的总结，涵盖了JQuery的下载、引入方式、CDN使用，以及核心概念如$符号的意义、DOM对象与JQuery对象的转换，还包括了各种选择器的详细解释，如基本选择器、层次选择器和过滤选择器的应用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值