jQuery基础知识--选择器与效果

时间:2022-09-18 19:39:09

$(this).hide()-----隐藏当前元素 
$("p").hide()------隐藏所有段落 
$(".test").hide()--隐藏所有class="test"的元素 
$("#test").hide()--隐藏所有id="test"的元素

文档就绪函数 
$(document).ready(function() { 
    ---------jQuery function go here------------ 
})

jQuery选择器 
    选择器允许对元素组或单个元素进行操作。

学习jQuery选择器的关键是学习jQuery选择器如何准确地选取你希望应用效果的元素 
jQuery元素选择器和属性选择器允许你通过签名、属性名或内容对HTML元素进行选择。 
选择器允许你对HTML元素组或单个元素进行操作。 
在HTML DOM术语中: 
选择器允许你对DOM元素组或单个DOM节点进行操作。

jQuery元素选择器 
    jQuery使用CSS选择器来选取HTML元素 
    $("p")选取<p>元素 
    $("p.intro")选取所有class="intro"的<p>元素 
    $("p#demo")选取所有id="demo"的<p>元素 
jQuery属性选择器 
   jQuery使用XPath表达式来选择带有给定属性的元素。 
   $("[href]")选取所有带有href属性的元素。 
   $("[href='#']")选取所有带有href值等于"#"的元素。 
   $("[href!='#']")选取所有带有href值不等于"#"的元素。 
   $("[href$='.jpg']")选取所有href值以".jpg"结尾的元素。 
jQuery CSS选择器 
    jQuery CSS选择器可用于改变HTML元素的CSS属性。

jQuery效果 
   1.jQuery隐藏/显示 
        hide()----隐藏被选的元素 
        show()----显示被选的元素 
        toggle()--对被选元素进行隐藏和显示的切换 
   2.jQuery淡入淡出 
        fadeIn()------逐渐改变被选元素的不透明度,从隐藏到可见--$(selector).fadeIn(speed,callback); 
            可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。 
            可选的 callback 参数是 fading 完成后所执行的函数名称。 
        fadeOut()-----逐渐改变被选元素的不透明度,从可见到隐藏--$(selector).fadeOut(speed,callback); 
        fadeToggle()--可以在 fadeIn() 与 fadeOut() 方法之间进行切换。--$(selector).fadeToggle(speed,callback); 
        fadeTo()------把被选元素逐渐改变至给定的不透明度--$(selector).fadeTo(speed,opacity,callback); 
            必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。 
            fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。 
            可选的 callback 参数是该函数完成后所执行的函数名称。 
   3.jQuery滑动 
        slideDown()----用于向下滑动元素--$(selector).slideDown(speed,callback); 
            可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。 
            可选的 callback 参数是滑动完成后所执行的函数名称。 
        slideUp()------用于向上滑动元素--$(selector).slideUp(speed,callback); 
        slideToggle()--可以在 slideDown() 与 slideUp() 方法之间进行切换--$(selector).slideToggle(speed,callback); 
   4.jQuery动画 
        jQuery animate()方法允许创建自定义的动画。 
        语法: 
            $(selector).animate({params}, speed, callback); 
            必须的params参数定义形成动画的CSS属性 
            可选的speed参数规定效果的时长。它可以取以下值:"slow"、"fast"或毫秒 
            可选的callback参数是动画完成后所执行的函数名称。

5.jQuery stop() 
        stop()方法用于在动画或效果完成前对它们进行停止。 
        stop()方法适用于jQuery效果函数,包括滑动、淡入淡出和自定义动画。 
        语法: 
            $(selector).stop(stopAll, goToEnd); 
            可选的stopAll参数规定是否应该清除动画队列。默认是false,即仅停止活动的动画,允许任何排入队列的动画向后执行。 
            可选的goToEnd参数规定是否立即完成当前的动画。默认是false。

6.jQuery Callback 
        Callback函数在当前动画100%完成之后执行。 
        语法: 
            $(selector).hide(speed, callback) 
            callback参数是一个在hide操作完成后被执行的函数。 
        如果您希望在一个涉及动画的函数之后来执行语句,请使用 callback 函数。 
   7.jQuery Chaining 
        通过jQuery,你可以把动作/方法链接起来。 
        Chaining允许我们在一条语句中允许多个jQuery方法(在相同的元素上)。 
        例如:$("#p1").css("color", "red").slideUp(2000).slideDown(2000); 
        或 $("#p1").css("color", "red") 
                   .slideUp(2000) 
                   .slideDown(2000);

jQuery基础知识--选择器与效果的更多相关文章

  1. jquery基础知识汇总

    jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...

  2. jQuery基础之选择器

    摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...

  3. JQuery基础知识(1)

    JQuery基础知识(1) 对JQuery学习中遇到的小细节进行了整理和总结 1.JQuery hide()和show()方法,分别对选中的元素进行隐藏和显示,语法:hide()和show分别有对应的 ...

  4. JQuery基础知识(2)

    JQuery基础知识(2) JQuery滑动效果 1. JQuery slideDown(); 语法: $(selector).slideDown(speed,callback); 可选的 speed ...

  5. 0417 jQuery基础知识

    jQuery基础知识 jQuery需要引入一个js文件,并且这个文件在所有js代码之前(包括引入的其他js文件) 基础操作(对比js): 1.找标签: js:document.getElement.. ...

  6. JQuery基础知识梳理篇

    这周没事,优化线上项目,因为前端都在赶项目,我又若菜.于是前端数据展示也要自己来.看javascript看到吐,决定梳理一下Jquery基础知识.敲黑板) 闲扯结束,进入正题. 选择器 介绍 jque ...

  7. 【JQuery基础知识&sol;statusCode&lpar;状态码&rpar;】---初学者必备

    今天,给大家分享一下JQuery的基础知识,简单介绍一下JQuery高级_Ajax,和我们常见的一些statusCode(状态码)~~~ 如果存在错误,请大家多多指正留言~小女子在此谢过! 一.JQu ...

  8. jQuery基础---常规选择器

    内容摘要: 1.简单选择器 2.进阶选择器 3.高级选择器 发文不易,转载请注明出处! jQuery 最核心的组成部分就是:选择器引擎.它继承了 CSS 的语法,可以对 DOM 元素的标签名.属性名. ...

  9. jQuery语法、选择器、效果等使用

    1.jQuery语法 1.1 基础语法:$(selector).action( ) 美元符号定义 jQuery 选择符(selector)“查询”和“查找” HTML 元素 jQuery 的 acti ...

随机推荐

  1. HTML5 中的Nav元素详解

    什么是Nav元素 Nav元素可以用作页面导航的链接组,在导航链接组里面有很多的链接,点击每个链接可以链接到其他页面或者当前页面的其他部分,并不是所有的链接组都要被放在nav元素里面,我们只需要把最主要 ...

  2. JavaScript中的String

    1.基本类型String var str ="helloworld"; 要记住:保存的是Unicode字符,一旦创建便不可变   2.引用类型String var strObj = ...

  3. 关于矩阵最通俗的解释-超级经典zz

    线性代数课程,无论你从行列式入手还是直接从矩阵入手,从一开始就充斥着莫名其妙.比如说,在全国一般工科院系教学中应用最广泛的同济线性代数教材(现在到了第四版),一上来就介绍逆序数这个“前无古人,后无来者 ...

  4. caffe之&lpar;四&rpar;全连接层

    在caffe中,网络的结构由prototxt文件中给出,由一些列的Layer(层)组成,常用的层如:数据加载层.卷积操作层.pooling层.非线性变换层.内积运算层.归一化层.损失计算层等:本篇主要 ...

  5. hdu&lowbar;5884&lowbar;Sort&lpar;二分&plus;单调队列&rpar;

    题目链接:hdu_5884_Sort 题意: 有n个数,每个数有个值,现在你可以选择每次K个数合并,合并的消耗为这K个数的权值和,问在合并为只有1个数的时候,总消耗不超过T的情况下,最小的K是多少 题 ...

  6. 必须要会的 50 个 React 面试题

    翻译:疯狂的技术宅 原文:www.edureka.co/blog/interv… 如果你是一位有抱负的前端程序员并准备面试,那么这篇文章很适合你.本文是你学习和面试 React 所需知识的完美指南. ...

  7. oracle 导入execl

    如果没有配置好的,就需要添加一个 如果找不到相应的驱动就安装AccessDatabaseEngine.exe

  8. eclipse plugin development -menu

    org.eclipse.ui.menus locationURI MenuContribution locationURI = "[Scheme]:[id]?[argument-list]& ...

  9. 并发 --- 2 进程的方法&comma;进程锁 守护进程 数据共享 进程队列&comma; joinablequeue模型

    一.进程的其他方法 1.   .name      进程名   (可指定) 2.  .pid     进程号 3.   os.getpid         在什么位置就是什么的进程号 4.   .is ...

  10. Hive调优

    Hive存储格式选择 和Hive 相关优化: 压缩参考 Hive支持的存储数的格式主要有:TEXTFILE .SEQUENCEFILE.ORC.PARQUET. 文件存储格式 列式存储和行式存储 行存 ...