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 相关文章推荐
用正则xmlHttp实现的偷(转)
Jan 22 Javascript
用js小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
Function.prototype.bind用法示例
Sep 16 Javascript
jquery 设置style:display的方法
Jan 29 Javascript
JS实现的3D拖拽翻页效果代码
Oct 31 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
详解JavaScript权威指南之对象
Sep 27 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 Javascript
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
JS交互点击WKWebView中的图片实现预览效果
Jan 05 Javascript
node thread.sleep实现示例
Jun 20 Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 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的sprintf函数的用法 控制浮点数格式
2014/02/14 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
js 作用域和变量详解
2017/02/16 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
整理一些最近经常遇到的前端面试题
2017/04/25 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
2019/08/09 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
Python入门篇之字典
2014/10/17 Python
在Python中操作日期和时间之gmtime()方法的使用
2015/05/22 Python
numpy中索引和切片详解
2017/12/15 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
python 判断矩阵中每行非零个数的方法
2019/01/26 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
函数只定义了一次, 调用了一次, 但编译器提示非法重定义了-什么问题?
2014/10/03 面试题
个人简历自我鉴定
2013/10/11 职场文书
新学期校长寄语
2014/01/18 职场文书
家长会主持词开场白
2014/03/18 职场文书
导师就业推荐信范文
2014/05/22 职场文书
护理医院见习报告
2014/11/03 职场文书
八达岭长城导游词
2015/01/30 职场文书
2016高考感言
2015/08/01 职场文书
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python