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 相关文章推荐
InnerHtml和InnerText的区别分析
Mar 13 Javascript
一个封装js代码-----展开收起效果示例
Jul 03 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
JavaScript学习笔记整理_setTimeout的应用
Sep 19 Javascript
AngularJS 单选框及多选框的双向动态绑定
Apr 20 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
详解vue渲染函数render的使用
Dec 12 Javascript
element-ui表格列金额显示两位小数的方法
Aug 24 Javascript
vue 实现购物车总价计算
Nov 06 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
Aug 14 Javascript
Vue.Draggable实现交换位置
Apr 07 Vue.js
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脚本自动识别验证码查询汽车违章
2016/12/20 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
2009/10/24 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
为什么我们要做三份 Webpack 配置文件
2017/09/18 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
Angular 多模块项目构建过程
2020/02/13 Javascript
npx create-react-app xxx创建项目报错的解决办法
2020/02/17 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
在Python中操作列表之list.extend()方法的使用
2015/05/20 Python
深入理解Python中各种方法的运作原理
2015/06/15 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
Python numpy生成矩阵、串联矩阵代码分享
2017/12/04 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
使用python实现链表操作
2018/01/26 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
Python实现小黑屋游戏的完整实例
2021/01/06 Python
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
计算机专业自我鉴定
2013/10/15 职场文书
办公室秘书自我鉴定
2014/01/18 职场文书
财务信息服务专业自荐书范文
2014/02/08 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
幼儿学前班评语
2014/12/29 职场文书
合理化建议书
2015/02/04 职场文书
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript
python 中的jieba分词库
2021/11/23 Python
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL