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 相关文章推荐
显示、隐藏密码
Jul 01 Javascript
文本链接逐个出现的js脚本
Dec 12 Javascript
javascript 仿QQ滑动菜单效果代码
Sep 03 Javascript
JavaScript实现x秒后自动跳转到一个页面
Jan 03 Javascript
Javascript基础教程之数据类型转换
Jan 18 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 Javascript
详解用node编写自己的cli工具
May 23 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
Jan 31 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
Jun 08 Javascript
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
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
关于mysql 字段的那个点为是定界符
2007/01/15 PHP
PHP 数据库树的遍历方法
2009/02/06 PHP
php简单对象与数组的转换函数代码(php多层数组和对象的转换)
2011/05/18 PHP
如何在symfony中导出为CSV文件中的数据
2011/10/06 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
javascript里绝对用的上的字符分割函数总结
2014/07/31 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
基于Swiper实现移动端页面图片轮播效果
2017/12/28 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
Python修改Excel数据的实例代码
2013/11/01 Python
Python中的闭包总结
2014/09/18 Python
利用Python破解斗地主残局详解
2017/06/30 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
matplotlib实现区域颜色填充
2019/03/18 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
教师自荐书
2013/10/08 职场文书
商务英语专业应届毕业生求职信
2013/10/28 职场文书
计算机毕业大学生推荐信
2013/12/01 职场文书
运动会方阵解说词
2014/02/12 职场文书
双拥工作宣传标语
2014/06/26 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
聚会通知怎么写
2015/04/23 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书