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实现画板的代码
Sep 05 Javascript
javascript 面向对象的JavaScript类
May 04 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
Aug 01 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
Nov 02 Javascript
异步javascript的原理和实现技巧介绍
Nov 08 Javascript
jQuery中removeData()方法用法实例
Dec 27 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 Javascript
Node.js 异步异常的处理与domain模块解析
May 10 Javascript
Vue表情输入组件 微信face表情组件
Feb 11 Javascript
JavaScript前端开发时数值运算的小技巧
Jul 28 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(4) php 函数 补充2
2010/02/15 PHP
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
php简单统计中文个数的方法
2016/09/30 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
JQuery1.6 使用方法三
2011/11/23 Javascript
简单的Jquery全选功能
2013/11/07 Javascript
jQuery实现高亮显示的方法
2015/03/10 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
Vue resource中的GET与POST请求的实例代码
2017/07/21 Javascript
微信小程序异步处理详解
2017/11/10 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
Vue中通过Vue.extend动态创建实例的方法
2019/08/13 Javascript
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
Python随机生成彩票号码的方法
2015/03/05 Python
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
详解Swift中属性的声明与作用
2016/06/30 Python
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
Python 实现异步调用函数的示例讲解
2018/10/14 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
在 Pycharm 安装使用black的方法详解
2020/04/02 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
Ted Baker美国官网:英国时尚品牌
2018/10/29 全球购物
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
入党自我鉴定
2014/03/25 职场文书
班级文化建设标语
2014/06/23 职场文书
办公室岗位职责
2015/02/04 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
解析Redis Cluster原理
2021/06/21 Redis
Python移位密码、仿射变换解密实例代码
2021/06/27 Python
面试中老生常谈的MySQL问答集锦夯实基础
2022/03/13 MySQL
nginx静态资源的服务器配置方法
2022/07/07 Servers