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 相关文章推荐
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 Javascript
jQuery获得内容和属性示例代码
Jan 16 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
一个JavaScript获取元素当前高度的实例
Oct 29 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 Javascript
微信小程序中页面FOR循环和嵌套循环
Jun 21 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
Apr 29 Javascript
js事件触发操作实例分析
Jun 21 Javascript
vue实现表格过滤功能
Sep 27 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中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
php中显示数组与对象的实现代码
2011/04/18 PHP
php+ajax导入大数据时产生的问题处理
2014/06/11 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
js鼠标滑过图片震动特效的方法
2015/02/17 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
Python之父谈Python的未来形式
2016/07/01 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
Python Pandas找到缺失值的位置方法
2018/04/12 Python
Python装饰器知识点补充
2018/05/28 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
python实现的批量分析xml标签中各个类别个数功能示例
2019/12/30 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
pytorch 计算Parameter和FLOP的操作
2021/03/04 Python
美国高街时尚品牌:OASAP
2016/07/24 全球购物
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
农村婚礼证婚词
2014/01/10 职场文书
公积金单位接收函
2014/01/11 职场文书
留学自荐信写作方法
2014/01/27 职场文书
团队精神口号
2014/06/06 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers