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 相关文章推荐
关于Blog顶部的滚动导航条代码
Sep 25 Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
JS(JQuery)操作Array的相关方法介绍
Feb 11 Javascript
用js通过url传参把数据从一个页面传到另一个页面
Sep 01 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
jQuery基于ID调用指定iframe页面内的方法
Jul 06 Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 Javascript
vue插件tab选项卡使用小结
Oct 27 Javascript
Angular4表单验证代码详解
Sep 03 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
Aug 29 Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 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笔记之常用文件操作
2010/10/12 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
超越Jquery_01_isPlainObject分析与重构
2010/10/20 Javascript
return false,对阻止事件默认动作的一些测试代码
2010/11/17 Javascript
使用javascipt---实现二分查找法
2013/04/10 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
2014/10/16 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
javascript实现设置、获取和删除Cookie的方法
2015/06/01 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
2015/07/28 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
Vue-Router模式和钩子的用法
2018/02/28 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
python中字典(Dictionary)用法实例详解
2015/05/30 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
Python实现求一个集合所有子集的示例
2018/05/04 Python
用python处理MS Word的实例讲解
2018/05/08 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
Python3 单行多行万能正则匹配方法
2019/01/07 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
党员自我评价分享
2013/12/13 职场文书
村委会贫困证明范文
2014/09/21 职场文书
幼儿园感恩节活动方案
2014/10/06 职场文书
孔庙导游词
2015/02/04 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
特此通知格式
2015/04/27 职场文书