【Jquery中CSS选择器用法分析_jquery】教程文章相关的互联网学习教程文章

jQuery大于号(>)选择器的作用解释

jQuery选择器中的大于号>作用是什么: jQuery灵活多样的选择器是jQuery的优点之一。 下面就介绍一下其中的一个选择器,用大于号表示。 代码示例如下:代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>蚂蚁部落</title> <style type="text/css"> #box{ width:300px; height:200px; background:black; } #middle{ width:200px; height:150px; background:red; margin:0px auto; } #inner{ wi...

jQuery过滤选择器详解【图】

过滤选择器 过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM元素,该选择器都以“:”开头 按照不同的过滤规则,过滤选择器可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器. 基本过滤选择器基本过滤选择器示例 改变第一个 div元素的背景色为 # bbffaa 改变最后一个 div元素的背景色为 # bbffaa 改变class不为 one的所有 div元素的背景色为 # bbffaa 改变索引值为偶数的 div元素的背景色为 ...

jQuery中even选择器的定义和用法

本文实例讲述了jQuery中even选择器的定义和用法。分享给大家供大家参考。具体分析如下: 此选择器匹配所有索引值为偶数的元素,从0开始计数。 语法结构:代码如下:$(":even") 此选择器一般也要和其他选择器配合使用,比如类选择器、元素选择器等等。 例如:代码如下:$("li:even)").css("color","green") 以上代码是将li元素集合中索引为偶数的li中的字体颜色设置为绿色。 如果没有和其他选择器配合使用,那么默认和*选择器配合使用。...

jQuery中odd选择器的定义和用法

本文实例讲述了jQuery中odd选择器的定义和用法。分享给大家供大家参考。具体分析如下: 此选择器匹配索引值为奇数的元素,从0开始计数。 语法结构:代码如下:$(":odd") 此选择器一般也要和其他选择器配合使用,比如类选择器、元素选择器等等。例如:代码如下:$("li:odd)").css("color","green") 以上代码是将li元素集合中索引为奇数的li中的字体颜色设置为绿色。 如果没有和其他选择器配合使用,那么默认和*选择器配合使用。$(": odd...

jquery选择器需要注意的问题【图】

我们先来看段代码,很简单,如下代码如下: <div id="div1"> <span>111</span> <span>222</span> <span>333</span> <button id="button1">clear</button> </div>代码如下: $(function() { $("#button1").click(function() { $("#div1 span").html("aaa"); }); });$("#div1 span")获得三个对象的数组 1.如果执行 $("#div1 span").html("aaa"),则数组内的所有对象都会改变.如下图2.如果执行$("#di...

常见的jQuery选择器汇总

基本元素选择器代码如下: $("p") $("p.ii")选取所有class=ii的 p元素 $("p#demo")选取id=demo的第一个p元素分层选择器代码如下: $("div input")div 下的所有input $("div>input")基本条件选择器代码如下: $("p:first") $("p:last") $("tr:even")选择偶数行 $("tr:odd")奇数 $("input:not(:checked)")选择所有为本选中的元素 $("tr:eq(1)")索引值为1的表格 $("tr:gt(0)")大于0 $("tr:lt(0)")小于0 $(":header")选择所有标题元素 $("...

jQuery选择器全集详解【代码】【图】

选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器 的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写jQuery代码的效率。本文配合截图、代码和简单的概括对所有jQuery选择器进行 了介绍,也列举出了一些需要注意和区分的地方。 一、基本选择器 1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色。(id选择器返单个元素)$(do...

原生的html元素选择器类似jquery选择器

做前端,需要选择元素,虽说有jquery和各大js库已经帮我造好了轮子,但我想试试自己实现一个,正好项目也不忙,正好加入自己的js文件中,下面是实现代码。用$g(“#content .op”)这种格式就可以调用,和jquery $()的参数一样: function $findChilds(parentNode, text) { //如果不传入父节点的话,默认为body if(parentNode == undefined) parentNode = document.body; var childNodes = parentNode.childNodes; var results ...

jQuery 复合选择器应用的几个例子

<!-- 本文例子所引用的jQuery版本为 jQuery-1.8.3.min.js --> 一. 复合选择器对checkbox的相关操作 <input type="checkbox" id="ckb_1" /> <input type="checkbox" id="ckb_2" disabled="true" /> <input type="checkbox" id="ckb_3" /> <input type="checkbox" id="ckb_4" /> <input type="button" id="btn" value="点击">例.需要把类型为checkbox,同时"可用"的元素设置成"已选择" 方法①使用属性过滤选择器 [type=checkbox]...

用Jquery选择器计算table中的某一列某一行的合计【图】

利用Jquery选择器,计算table中的某一列,某一行的合计,非常方便。下面以计算行合计为例: 核心算法: $(#tableId tr).each(function() { $(this).find(td:eq(columnIndex)).each(function() { totalAmount += parseFloat($(this).text()); }) });下面是案例代码 <!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...

Jquery选择器中使用变量实现动态选择例子

例子一: <table><tr><th>用户名</th><th>状态</th><tr><tr><td>张三</td><td data-uid="10000">正常</td><tr><tr><td>李四</td><td data-uid="10001">冻结</td><tr><tr><td>王二麻子</td><td data-uid=10002>冻结</td><tr> </table><script type="text/javascript"> $(document).ready(function(){var uid = 1001;$("td[data-uid = "+ uid +"]").html(正常); } </script>例子二:<script type="text/javascript">$(function(){ale...

常用jQuery选择器总结

在Dom 编程中我们只能使用有限的函数根据id 或者TagName 获取Dom 对象. 然而在jQuery 中则完全不同,jQuery 提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象以jQuery 包装集的形式返回。本文主要对常用的jQuery 选择器进行一个介绍及归类。 jQuery 选择器大体上可分为 4 类:基本选择器、层次选择器、过滤选择器、表单选择器。 其中过滤选择器可以分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过...

jQuery的:parent选择器定义和用法

:parent选择器的定义和用法: 此选择器匹配含有子元素或者文本的元素。 注意:空格也算是含有的元素。 语法结构: $(":parent") 此选择器一般也要和其他选择器配合使用,比如类选择器和元素选择器等等。例如: $("div:parent").animate({width:"300px"}) 以上代码能够将含有文本或者元素的div的宽度设置为300px。 如果不和其他选择器配合使用,则默认状态是和*选择器配合使用,例如$(":parent")等同于$("*:parent")。 实例代码: 实例一...

解决自定义$(id)的方法与jquery选择器$冲突的问题

一般就是改自己的函数名: 比较省事也简单,直接批量替换就可以了。 先上代码:代码如下:var $= function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; 这段代码是模仿jquery自定义id选择器的方法,但是因为jquery选择器也是用的这个“$”,如果你引用jquery并且使用这个方法,那么页面就会报错,解决大办法就是修改自己的方法把"$"改成"getId(id)";代码如下:ar getId = function (id) { return "...

使用jquery选择器如何获取父级元素、同级元素、子元素

一、获取父级元素 1、 parent([expr]): 获取指定元素的所有父级元素 代码如下:<div id="par_div"><a id="href_fir" href="#">href_fir</a> <a id="href_sec" href="#">href_sec</a> <a id="href_thr" href="#">href_thr</a></div> <span id="par_span"> <a id="href_fiv" href="#">href_fiv</a> </span> $(document).ready(function(){ $("a").parent().addClass(a_par); }); firebug查看jquery parent效果 二、获取同级元素: 1...