Jquery中CSS选择器用法分析


Posted in Javascript onFebruary 10, 2015

本文实例讲述了Jquery中CSS选择器用法。分享给大家供大家参考。具体如下:

jQuery使用了一套css选择器,共有5种,即标签选择器,ID选择器,类选择器,通用选择器和群组选择器,现分述如下:

1. 标签选择器

用于选择HTML页面中已有的标签元素,又称元素选择器,格式:$("element"),如$("div"),同getElementByTagName

2. ID选择器

用于获取某个具有id属性的元素,格式如下:$("id"),同getElementById

<input id="users" type="text" value="abc" />

$("#users").val();

3. 类选择器

用于获取某个具有class属性的元素,格式:$("class")

<input id="txt" type="text" class="t" />

给这个文本框添加边框样式,首先这里用class属性来绑定文本框

$(".t").css("border", "2px solid blue");

4. 通用选择器

通用选择器(*)匹配所有元素,多用于结合上下文来搜索,也就是找到HTML页面中的所有标签, $("*")

5. 群组选择器

又叫多元素选择器,用于选择所有指定的选择器组合的结果,语法如下:

$("selector1, seletor2, selector3")

如:

$("div, span, p.styleClass").css("border", "1px solid red");
   

综合例子:

<!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>css选择器</title>  

<script type="text/javascript" src="jquery-1.7.min.js"></script>  

<style type="text/css">  

    .one {border: 1px solid #03F; float: left; margin: 1em; padding: 1.5em; width: 106px; }  

    .two {background-color: #FC0; }  

    .three {background-color: #FCF; }  

</style>  

<script type="text/javascript">  

    $(document).ready(function() {  

       $("*").css("font-size", "12px");  

       $("div").addClass("one");  

       $("#div1").addClass("two");  

       $("#div2, #div3").addClass("three");  

       $("h3, p").css("color", "red").attr("align", "center");  

       $("#span1").html("本网页中同时应用one类的元素一共有" + $(".one").length + "个" + ",同时应用one类和three类的元素共有" + $(".one.three").length + "个");  

        });  

</script>  

</head>  

<body>  

  <h3>这是标题中的文本</h3>  

  <p><span id="span1"></span></p>  

  <div id="div1">div元素:id属性为div1.</div>  

  <div id="div2">div元素:id属性为div2.</div>  

  <div id="div3">div元素:id属性为div3.</div>  

</body>  

</html>

效果图如下所示:

Jquery中CSS选择器用法分析

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
jQuery中:nth-child选择器用法实例
Dec 31 Javascript
javascript倒计时效果实现
Nov 12 Javascript
ES6中如何使用Set和WeakSet
Mar 10 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
基于vue配置axios的方法步骤
Nov 09 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
Jan 16 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
重学JS之显示强制类型转换详解
Jun 30 Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 Javascript
利用uni-app生成微信小程序的踩坑记录
Apr 05 Javascript
让JavaScript代码更加精简的方法技巧
Jun 01 Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 #Javascript
Js为表单动态添加节点内容的方法
Feb 10 #Javascript
jQuery前端分页示例分享
Feb 10 #Javascript
js进行表单验证实例分析
Feb 10 #Javascript
EasyUi datagrid 实现表格分页
Feb 10 #Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 #Javascript
Node.js抓取中文网页乱码问题和解决方法
Feb 10 #Javascript
You might like
PHP下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
详解php中反射的应用
2016/03/15 PHP
php使用SAE原生Mail类实现各种类型邮件发送的方法
2016/10/10 PHP
PHP 文件锁与进程锁的使用示例
2017/08/07 PHP
php实现数组重复数字统计实例
2018/09/30 PHP
[JS源码]超长文章自动分页(客户端版)
2007/01/09 Javascript
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
JS简单随机数生成方法
2016/09/05 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
jQuery+PHP实现上传裁剪图片
2020/06/29 jQuery
微信小程序中button去除默认的边框实例代码
2019/08/01 Javascript
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
跟老齐学Python之总结参数的传递
2014/10/10 Python
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
Python面向对象编程基础解析(一)
2017/10/26 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
python将.ppm格式图片转换成.jpg格式文件的方法
2018/10/27 Python
对python3中的RE(正则表达式)-详细总结
2019/07/23 Python
Pytorch Tensor的统计属性实例讲解
2019/12/30 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
Python json转字典字符方法实例解析
2020/04/13 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
英国书籍、CD、DVD和游戏的第一道德零售商:Awesome Books
2020/02/22 全球购物
会计专业推荐信
2013/10/29 职场文书
小班上学期评语
2014/05/05 职场文书
2014优秀党员事迹材料
2014/08/14 职场文书
依法行政工作汇报材料
2014/10/28 职场文书