`

jquery 摘要

    博客分类:
  • js
 
阅读更多

001、选择器类型

<script type="javascript">
<!-- 1、相对选择器-->
     $("td", $(this)).css("background", "red");  //$(this)元素下的td   
<!-- 2、多条件选择器-->  
     $("div,span,p[name='p1']")                          //选择div,span,p[name='p1']三种标签
<!-- 3、层次选择器-->
     $("#div li")获取div下的所有li元素(后代,子,子的子....) 
     $("#div > li")获取div下的直接li子元素//注意空格 
     $(".menuitem + div")获取样式名为menuitem之后的第一个div元素
     $(".menuitem ~ div")获取样式名为menuitem之后的所有的div元素
 </script>

001.1伪类选择器

         :first    //集合中的第一个元素 $("ul li:first")

         :last    $("ul li:last")

         :eq(n)    $("ul li:eq(2)")

         :even    //偶数 0 2 4 6 8 。。。

         :odd    //奇数   1 3 5 7 9 。。。

         :lt(n)   <

         :gt(n)   >

         :not(selector)    $("li :not(:first)").hide();

001.2父辈选择器

         parent([selector]);//直接父元素

         parents([selector]);//所有父元素

         parentUtil([selector]);//提供搜索范围

001.3同辈选择器(不包含当前元素)

          next([selector]):获取当前元素的下一个元素,可以指定选择器$("h3").next("li").css("color", "#FCF");

          nextAll([selector]):获取当前元素的所有同辈元素,可以指定选择器

         nextUtil([selector]):获得A到B之间的同辈元素$("#div1").nextUtil("div3").css("border", "1px solid red");

          prv([selector])

          prvAll([selector])

          siblings([selector])

          andSelf();:包含自身

                              $("#div1").nextUtil("div3").css("border", "1px solid red").andSelf();

001.4子类选择器

           children([selector]);:直接子元素

           find(selector);  :参数必选,选择范围为所有子元素

002、属性操作

<script type="javascript">
<!--某元素下具有某属性的子元素-->     
     $("#table02 .trSelected").length;
<!--具有某属性的元素-->
    $("div[name]").length;
<!--具有某属性值的元素-->
     $("div[class='trSelected']").length;
<!--属性字段-->  
    $("img[src^='.jpg']")
    $("img[src!='.pdf']")
    $("img[src$='.jpg']")
<!--多属性字段-->
 $("div[class='trSelected'] [name='ssj']")
</script> 

003、遍历radio

$(document).ready(function() { 
    var ele=$("input[name='exchangelx'][type='radio']").each(function(){
		alert(this.value);
		});  
})

004、jquery初始化函数

(function ($) {})(jQuery);

 005、获得元素个数

$("ul li").length

 006、从集合中排出某元素

$("A").not($(dom)).slideUp('slow');	

007、动态绑定事件

$("scopeDom").delegate("targetDom","click",function(){});
//jquery绑定动态dom事件(在scopeDom范围内为targetDom绑定click事件,
其中选择器仅支持#和.不支持复杂条件)
	

 008、jquery清除同辈中指定的元素

$("#span_qt a:eq(0)").siblings("a").remove();
	<span id="span_qt">  
		<a name="null" href="javascript:void(0);" class="cur" >全部</a>
		<a name="null" href="javascript:void(0);" class="cur" >aaa</a>
		<a name="null" href="javascript:void(0);" class="cur" >bbb</a>
       </span>

 009、jquery方法

       01:get(n);返回dom对象 $("ul li").get(1).css("color", "red"); //这个是错误的

                                                $("ul li").eq(1).css("color", "red"); //这个是正确的

       02、filter(selector);当前集合过滤,区别于find()子集合

       03、not(selector);当前集合下排除

       04、is(selector);判断是否是同一对象

       05、slice(start,[end]);当前集合区间  $("li ").slice(2); 第三个li   $("li ").slice(2,5);前闭后开,  3-4个li

                                                             

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    [jQuery实战第二版].pdf

    **读者评价摘要**: - **David Sills (JavaLobby, Dzone)**:这本书是一本优秀的作品,是Manning出版社“in Action”系列中的一个值得骄傲的继承者。它易于阅读且充满了实用代码。实验室页面是一种探索库的奇妙方式...

    jQuery学习资料

    从零开始学习jQuery (一) 开天辟地入门篇 2 一.摘要 2 二.前言 3 三.什么是jQuery 3 四.Hello World jQuery 4 五.启用Visual Studio 对jQuery的智能感知 6 六.在独立的.JS文件中启用脚本智能感知 8 七.总结 9 从零...

    jquery实现MD5加密

    MD5(Message-Digest Algorithm 5)是一种广泛使用的哈希函数,可以将任意长度的数据映射为固定长度的摘要信息,通常用于数据校验、密码存储等场景。在前端开发中,有时候为了增强数据安全性,可能需要在客户端对...

    jQuery dPassword MD5加密

    jQuery dPassword MD5加密是一种基于JavaScript的加密方法,它结合了流行的jQuery库和MD5哈希算法,为用户密码提供了一种安全的处理方式。在Web应用中,尤其是在涉及到用户敏感信息如密码时,通常会使用加密技术来...

    jquery,SM3国密算法

    1.SM3的国密算法; 2.Jquery语言实现; 3.算法不可逆,不可破解,安全性高; --------------------------------------------

    jQuery: Novice to Ninja

    - **内容摘要**:这部分提供了关于jQuery函数和方法的详细文档,方便读者在开发过程中查阅所需的信息。 11. **JavaScript技巧 (附录B)** - **章节概述**:这一附录收集了一些实用的JavaScript代码片段,帮助读者...

    jquery.js和jquery.md5.js进行md5加密

    **jQuery.js和jQuery.md5.js在Web开发中的应用** 在Web开发中,安全性和数据完整性是至关重要的。MD5(Message-Digest Algorithm 5)是一种广泛使用的哈希函数,能够将任意长度的数据转换为固定长度的摘要信息。...

    jQuery 实现字符串加密处理

    MD5(Message-Digest Algorithm 5)和SHA1(Secure Hash Algorithm 1)都是常见的哈希函数,它们可以将任意长度的数据转化为固定长度的摘要,具有不可逆性,常用于验证数据完整性或密码存储。 1. **MD5加密**:MD5...

    jquery手风琴插件

    手风琴插件常用于FAQ(常见问题解答)、菜单栏、导航条、内容摘要等场景。 ### 2. jQuery手风琴插件的基本使用 要使用jQuery手风琴插件,首先需要在页面中引入jQuery库和jQuery UI库,因为手风琴效果是jQuery UI的...

    jQuery网格视图图片画廊

    网格视图是将数据以等间距的单元格形式排列的布局方式,常用于展示图片、文章摘要等信息。它能够有效地利用网页空间,使内容看起来更有组织且易于阅读。在网页设计中,网格视图通常采用响应式设计,能适应不同设备...

    JQuery教程-从零开始学习jQuery

    ##### 摘要 本篇文章作为系列教程的开端,旨在为初学者提供一个全面了解JQuery的起点。无论你是刚接触编程的新手还是已经有了一定前端经验的开发者,都能从中找到有价值的信息。文章将覆盖JQuery的基本概念、安装...

    jQuery实现卡片页

    本教程将深入探讨如何使用jQuery来实现一个卡片页,这是一个常见的UI设计模式,适用于展示信息丰富的列表,如产品目录、用户简介或文章摘要。卡片页能够使内容更加有组织,易于阅读和交互。 首先,我们需要理解卡片...

    jquery新闻幻灯片展示(多种)

    - 幻灯片展示:这是一种网页设计技巧,通过自动或用户触发切换,以展示一系列内容,如新闻标题、图片或文章摘要。 2. **jQuery选择器** 在创建新闻幻灯片时,首先需要选取要操作的HTML元素,jQuery提供了丰富的...

    jquery垂直向上逐条滚动新闻列表

    标题中的“jquery垂直向上逐条滚动新闻列表”指的是使用jQuery库实现的一种常见网页动态效果,这种效果常见于新闻网站,能够使最新的新闻标题或摘要从屏幕底部向上滚动,以吸引用户的注意力并展示更多信息。...

    jquery-textEllipsis-20110314

    这个插件特别适用于新闻摘要、文章标题或者评论内容的展示。 ### 二、安装与引入 在项目中使用`jquery-textEllipsis`,首先需要确保已经引入了jQuery库。然后,你可以通过以下两种方式引入该插件: 1. **下载...

    很酷的黑色链接预览效果,jQuery niceTitle

    【jQuery niceTitle插件详解】 在网页设计中,链接预览是一种提高用户体验的巧妙方法,它可以在用户将鼠标悬停在链接上时显示链接指向页面的摘要信息,无需离开当前页面即可了解链接内容。"jQuery niceTitle"是一个...

    通过HTML + jquery + echarts 实现文字云图

    其中,文字云图(词云图)是常见的数据可视化形式之一,它以大小不一的文字来展示词语的频率,视觉效果独特,常用于新闻摘要、社交媒体分析等领域。本项目以"通过HTML + jquery + echarts 实现文字云图"为主题,提供...

    jquery mobile RSS阅读器demo

    接收到的XML数据会被解析,提取出标题、摘要、发布日期等关键信息,然后用jQuery Mobile的组件来展示这些内容。例如,每个RSS条目可以被包装成一个列表项(`&lt;li&gt;`),标题作为链接,摘要作为描述,发布日期可以显示...

    Jquery拖动窗格(仿igoogle)

    iGoogle是Google推出的一个个性化首页服务,允许用户自定义首页布局,添加各种小工具,如天气预报、新闻摘要等。这些小工具可以在页面上自由移动,提供了一种高度定制化的浏览体验。 **3. 拖动功能实现** 在jQuery...

    jQuery slider

    它在网站设计中广泛使用,可以展示产品图片、文章摘要或任何其他需要顺序展示的内容。通过使用jQuery库,开发者可以轻松地实现平滑过渡效果、自动轮播、导航箭头和点指示器等功能,提升用户体验。 **jQuery库基础**...

Global site tag (gtag.js) - Google Analytics