【详解强大的jQuery选择器之基本选择器、层次选择器_jquery】教程文章相关的互联网学习教程文章

jQuery中选择器的基础使用教程

其实选择器就像开罐器一样,会用这个工具的人,自然吃的到甜头,但不会用这个工具的人,不管罐头里面的面筋土豆有多美味,吃不到就是吃不到,就如同jquery再怎么强大,也只能看着荧幕,而不知该如何下手,不过虽然选择器不难,也容易上手,但老实说,我用了一年多下来,还是觉得自己只有用皮毛而已,所以希望藉着这一系列的笔记,让自己能更长进一些 DOM怎么吃 DOM可以说是JavaScript与网页之间的联系管道,他提供了一个模型,让Ja...

jQuery选择器及jquery案例详解(必看)

JQuery选择器解析:为了更好的或者是更快的从复杂的DOM树中找到我们需要的一类标签1.层次选择器<!-- 当点击h2元素时,为#menu下的<span>元素添加色为#09F的颜色背景 --> <!-- <script type="text/javascript"> $(function () { $(h2).click(function () { $(#menu span).css(background-color,#09F); }); }); </script>--> 2.基本选择器<!-- 为标签选择器添加样式 --> <script type="text/javascript"> $(function () { $(h2).clic...

jQuery的实例及必知重要的jQuery选择器详解

Jquery能做什么 访问和操作DOM元素 控制页面样式 对页面事件进行处理 扩展新的jQuery插件 与Ajax技术完美结合Jquery的优势 体积小,压缩后只有100KB左右 l强大的选择器 出色的DOM封装 l可靠的事件处理机制 出色的浏览器兼容性 使用隐式迭代简化编程 丰富的插件支持 jQuery的知识的分解: 1.关于window.onload和$(function(){})区别 解析:window.onload等待页面上所有资源(html标签,css,img,js)都加...

jQuery基本选择器(实例及表单域value的获取方法)【图】

jQuery基本选择器包括 CSS选择器、层级选择器和、表单域选择器。 1.CSS选择器 (1)标签选择器 $("div") $("p") $("table") 等一系列 HTML 标签 (2)ID选择器 <input id="user" type="text"> 获取该标记的值:$("#user").val(); (3)类选择器 <input type="text" class="t"> 给该文本框添加样式:$(".t").css("border","2px solid blue"); (4)通用选择器 $("*").css("color","red"); //给所有元素设置样式 (5)群组选择器 $...

jQuery选择器基础入门教程

本文实例讲述了jQuery选择器用法。分享给大家供大家参考,具体如下: 什么是jQuery选择器 使用JavaScript操作页面上得DOM元素时,首先要获取DOM元素。但是原始的javascript只元件根据ID或者TagName获取DOM对象。 在jQuery中则完全不同,jQuery提供了异常强大的选择器用以帮助我们获取页面上的对象,并且将对象以jquery对象的形式返回。 首先来看看什么是选择器。 //根据id获取jQuery对象 var jQueryObject=$("#testDiv");上例中使用...

浅析jQuery事件之on()方法绑定多个选择器,多个事件

$(document).on(click, #header .top, #main .btn, function () {// code...});on()方法绑定多个事件 $("table.planning_grid").on({mouseenter: function() {// Handle mouseenter...},mouseleave: function() {// Handle mouseleave...},click: function() {// Handle click...} }, "td"); 用on()方法绑定多个选择器、多个事件 $(document).on({mouseenter: function() {// Handle mouseenter...},mouseleave: function() {/...

简单讲解jQuery中的子元素过滤选择器【图】

子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素。$(li:first-child).css(background, #ccc); //每个父元素第一个li 元素 $(li:last-child).css(background, #ccc); //每个父元素最后一个li 元素 $(li:only-child).css(background, #ccc); //每个父元素只有一个li 元素 $(li:nth-child(odd)).css(background, #ccc); //每个父元素奇数li 元素 $(li:nth-child(even)).css(background, #ccc); //每个父元素偶数li...

jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载【图】

我们经常会应用到日期和时间选择器,之前我们使用最多的是jQuery UI的datepicker(),那么今天我给大家介绍一款非常有趣的日期和时间选择器,它分为日期选择器datedropper以及时间选择器timedropper,他们俩尤其适合在移动端上应用。在线演示 源码下载 日期选择器datedropper 使用非常简单,分三步,1、引入相关js和css文件。注意datedropper和timedropper都是基于jQuery的插件,所以也要引入jQuery库文件。 <script src="jq...

jQuery插件实现适用于移动端的地址选择器【图】

最近在工作中需要用到地址选择器,像下面这样的,本想在网上找一个,可是没找到,于是自己写了个jquery插件。直接上代码吧:var provinces = {"A": {"安徽":["合肥市","芜湖市","蚌埠市","淮南市","马鞍山市","淮北市","铜陵市","安庆市","黄山市","滁州市","阜阳市","宿州市","巢湖市","六安市","亳州市","池州市","宣城市"]},"B": {"北京": ["北京市"]},"C": {"重庆":["重庆市"]},"F": {"福建":["福州市","厦门市","莆田市","三明...

jquery在ie7下选择器的问题导致append失效的解决方法

1,有如下这样一段html代码如下: <div class="right"id="pending"> <table class="one"width="100%"border="0"cellspacing="0"cellpadding="0"> <tbody> </tbody> </table> <div id="pendingpage"class="paging"> </div> </div> 2,我用jquery动态填充tbody下的内容代码如下代码如下: $("#pending table tbody").empty().append(th).append(html); 这段代码在ie7及以下ie版本会有问题,jquery无法通过#pending table tbody 找...

jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结

这两天在做一个专题的时候遇到了一个通配符的问题 //弹层操作 $(function(){//视频播放$("a[href^=#video]").each(function(index, element) {$(this).click(function(){$(".popDiv,#videoBox1").show();});});//图片$(".imgs a:not([href^=#video])").each(function(){$(this).children("img").click(function(){var src=$(this).attr("attr");//alert(src);$("#picBox img").attr("src","images/" + src);$(".popDiv,#picBox").s...

jQuery入门之层次选择器实例简析【图】

本文实例分析了jQuery入门之层次选择器的使用方法。分享给大家供大家参考,具体如下: 这里简单介绍一下jQuery层次选择器中ancestor descendant与parent>child的区别。 parent>child:根据父元素匹配所有的子元素,层次关系是父子关系。 ancestor descendant:根据祖先元素匹配所有的后代元素,层次关系是祖先和后代。 编写代码,进行测试,以更加清楚的区分两者的区别: <div id="first">1<span>1.1 </span><span>1.2 </span><div>...

jquery选择器简述【图】

jQuery选择器使得获得页面元素变得更加容易、更加灵活,从而大大减轻了开发人员的压力。如同盖楼一样,没有砖瓦,就盖不起楼房,得不到元素谈何其他各种操作呢?可见,jQuery选择器的重要性。 jquery选择器大方向可以分为这样:下面我们先来看看基本选择器总的CSS选择器:1.标签选择器: $("element") 其中,参数element,表示待查找的HTML标记名,如$("div"),标签选择器获取元素的方式是高效的,因为它继承自javascript中的getEmel...

jquery实现不包含当前项的选择器实例

本文实例讲述了jquery实现不包含当前项的选择器实例。分享给大家供大家参考。具体如下: 这段代码演示了jquery选择所有的链接,点击其中一个链接时,其它的链接都变色,只有当前链接不变色 var $allLinks = $("a"); $allLinks.click(function() {$allLinks.not(this).css("color", "red"); });更多关于jquery选择器相关内容感兴趣的读者可查看本站专题:《jquery选择器用法总结》 希望本文所述对大家的jquery程序设计有所帮助。

JQuery选择器、过滤器大整理

经过一晚上的查找整理,终于整理出一套应该算最全面的JQuery选择过滤器的方法了。所有代码均经过测试。 首先HTML代码代码如下: HTML Code <html> <head> <script type="text/javascript" src="JQuery/jquery-1.5.1.js"></script> </head> <body> <form name="form1" id="form1" class="form1" action="" method="post"> <table name="table1" id="table1" class="table1"> <tr name="tr1" id="tr1" class="tr1"> <td n...