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

$(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);

时间: 2024-10-25 17:32:50

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

JQuery基础知识(2)

JQuery基础知识(2) JQuery滑动效果 1. JQuery slideDown(); 语法: $(selector).slideDown(speed,callback); 可选的 speed 参数规定效果的时长.它可以取以下值:"slow"."fast" 或毫秒. 可选的 callback 参数是滑动完成后所执行的函数名称. 2.JQuery slideUp();用于向上滑动元素 语法: $(selector).slideUp(speed,callback

JQuery基础知识(1)

JQuery基础知识(1) 对JQuery学习中遇到的小细节进行了整理和总结 1.JQuery hide()和show()方法,分别对选中的元素进行隐藏和显示,语法:hide()和show分别有对应的参数,即hide(speed);隐藏的速度进行了限定.hide(1000)/show(1000); 2.JQuery toggle()方法用来切换hide()和show();可以用speed参数进行控制显示和隐藏的速度. JQuery的淡入淡出 1.JQuery fadeIn();此方法可以携带不同

Jquery基础之选择器

选择器是JQuery的根基,在JQuery中对事件处理.选择遍历Dom.ajax操作都依赖选择器.JQuery选择器分为基本选择器.层次选择器.过滤选择器.表单选择器. 一.基本选择器 1.ID选择器$("#ID") 页面中每个ID是唯一的,ID选择器选择每个ID元素,如下方法如下:$("#ID");例:$("#tbxName")这个方法选择id=tbxName的页面元素.选择结果为单个元素. 2.类选择器$(".class"

jQuery基础知识总结

1.  jQuery基本概念介绍   1.1 什么是jQuery 一个javascript库,把常用方法写到一个js文件中,需要的时候直接调用即可 学习jQuery就是学习一些方法 1.2 为什么要学习jQuery write less do more 1.3 jQuery的使用 a.引包     b.入口函数     c.实现功能 1.4 版本介绍 3个版本 1.x      2.x     3.x 其中版本1兼容IE6/7/8,版本2和3实现的功能更多一些,版本3更适合最新的浏览器 每个大版

Jquery基础篇6___动画效果

最近由于太忙,总是没有时间写东西,不是有句古话说时间似海绵中的水,挤挤总会有的,但感觉当了程序员之后,总是在忙着写代码,忙着学新技术,时间本来就不够,想挤挤时间抽空写点东西,总是挤不出来.忙里偷得半日闲,有时间还是写写比较好.有时候感觉自己写的这些东西不是很多人都有吗,而且Jquery官网上写的要比自己好多了,但是写自己的东西总会有自己的理解,有自己的想法在其中,而且印象也比较深刻.学过Jquery的人,肯定会感觉自己当时候照着例子的时候会,真正要写大型的JS代码的时候,却总写不出来,而且过不了

jquery基础知识学习笔记

jquery是一个js库/常用版本是jjquery-1.7.2.js/这个版本主要是用来做开放用途 做产品的时候是用它的min版本.玩jquery的时候,不管干啥都要花钱(美元) 注意点: 1.silbings('input');除了发生事件的那个元素的其他同级input兄弟元素 注意silblings要加上s   2.jquery无法获取当前时间   3.jquery对象和js对象混合操作的问题(阅读书籍解决)   4.innerHTML=html(内容);   5.is(":checked&

jQuery基础,选择器

jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口:具有高效灵活的cs

jquery基础知识基本使用概述(1)

jQuery基本介绍 为什么要学jQuery [01-让div显示与设置内容.html] 使用JS操作DOM的时候,会遇到以下的一些缺点: //1. 获取元素的方法太少且长,麻烦.//2. 遍历伪数组很麻烦,通常要嵌套一大堆的for循环.//3. 注册的事件会覆盖.//4. 有兼容性问题.//5. 实现动画很麻烦 初体验 [02-让div显示与设置内容.html] $(document).ready(function () {    $("#btn1").click(function

Webform——JQuery基础(选择器、事件、DOM操作)

一.选择器 1.基本选择器 ①id选择器:#       ②class选择器:.       ③标签名选择:标签名 ④并列选择:用,隔开          ⑤后代选择:用空格隔开 代码用法展示:   2.过滤选择器 (1).基本过滤 ①首个::first        ②尾个::last       ③任意个::eq(索引号)        ④大于::gt(索引号) ⑤小于::lt(索引号)         ⑥排除::not(选择器)         ⑦奇数:odd           ⑧偶数: