JQuery_基本语法和特效

原创 2011年01月25日 10:59:00

基本语法:

 $("HTML元素").action()


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


  
文档就绪函数

 $(document).ready(function(){

  -------- 
 });

 
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。

下面是两种假如文档完全加载之前运行函数的话,操作失败的情况:

?试图隐藏一个不存在的元素。
?获得未完全加载的图像的大小。

.divcss{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}


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 属性。

 下面的例子把所有 p 元素的背景颜色更改为红色:

 $("p").css("background-color","red");


更多实例

 $(this) 当前 HTML 元素
 $("p") 所有 <p> 元素
 $("p.intro") 所有 class="intro" 的 <p> 元素
 $(".intro") 所有 class="intro" 的元素
 $("#intro") id="intro" 的第一个元素
 $("ul li:first") 每个 <ul> 的第一个 <li> 元素
 $("[href$='.jpg']") 所有带有以 ".jpg" 结尾的 href 属性的属性
 ("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素

jQuery 事件函数

 jQuery 事件处理函数是 jQuery 中的核心函数。
 事件处理函数是当 HTML 中发生事件时自动被调用的函数。
 由“事件”(event)“触发”(triggered)是经常被用到的术语。

jQuery 名称冲突

 jQuery 使用 $ 符号作为 jQuery 的简介方式。
 某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。
 jQuery 使用名为 noConflict() 的方法来解决该问题。
 var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。

jQuery 事件

 下面是 jQuery 中事件函数的一些例子:
 
 $(document).ready(function) 文档的就绪事件(当 HTML 文档就绪可用)
 $(selector).click(function) 被选元素的点击事件
 $(selector).dblclick(function) 被选元素的双击事件
 $(selector).focus(function) 被选元素的获得焦点事件
 $(selector).mouseover(function) 被选元素的鼠标悬停事件

jQuery 隐藏和显示

 通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示:
 hide() 和 show() 都可以设置两个可选参数:speed 和 callback。
 callback 参数是在 hide 或 show 函数完成之后被执行的函数名称
 speed 参数可以设置这些值:"slow", "fast", "normal" 或 milliseconds

jQuery 切换

 jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。
 隐藏显示的元素,显示隐藏的元素。
 speed 参数可以设置这些值:"slow", "fast", "normal" 或 milliseconds

jQuery 滑动函数

 - slideDown, slideUp, slideToggle
 
 jQuery 拥有以下滑动函数:

 $(selector).slideDown(speed,callback)
 $(selector).slideUp(speed,callback)
 $(selector).slideToggle(speed,callback)
 
 peed 参数可以设置这些值:"slow", "fast", "normal" 或 毫秒。
 callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。

jQuery Fade 函数

 - fadeIn(), fadeOut(), fadeTo()

 jQuery 拥有以下 fade 函数:

 $(selector).fadeIn(speed,callback)
 $(selector).fadeOut(speed,callback)
 $(selector).fadeTo(speed,opacity,callback)

 peed 参数可以设置这些值:"slow", "fast", "normal" 或 毫秒。
 fadeTo() 函数中的 opacity 参数规定减弱到给定的不透明度。
 allback 参数是在 hide 或 show 函数完成之后被执行的函数名称。

jQuery 自定义动画

 jQuery 函数创建自定义动画的语法:

 $(selector).animate({params},[duration],[easing],[callback])关键的参数是 params。
 它定义了产生动画的属性。可以同时设置多个此类属性:
 animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
 第二个参数是 duration。它定义用来应用于动画的时间。
 它设置的值是:"slow", "fast", "normal" 或 毫秒。
 HTML 元素默认是静态定位,且无法移动。
 如需使元素可以移动,请把 CSS 的 position 设置为 relative 或 absolute。

 

改变 HTML 内容
 
 语法
 $(selector).html(content)html()
 函数改变所匹配的 HTML 元素的内容(innerHTML)。


添加 HTML 内容

        语法
 $(selector).append(content)append()
 函数向所匹配的 HTML 元素内部追加内容。


 语法
 $(selector).after(content)after()
 函数在所有匹配的元素之后插入 HTML 内容。


 语法
 $(selector).before(content)before()
 函数在所有匹配的元素之前插入 HTML 内容。

 

jQuery CSS 操作

 jQuery 拥有三种供 CSS 操作的重要函数:

 ?$(selector).css(name,value)
 ?$(selector).css({properties})
 ?$(selector).css(name)

CSS 操作实例

 函数 css(name,value) 为所有匹配元素的给定 CSS 属性设置值:

 实例
 $(selector).css(name,value)
 $("p").css("background-color","yellow");

 函数 css({properties}) 同时为所有匹配元素的一系列 CSS 属性设置值:

 实例
 $(selector).css({properties})
 $("p").css({"background-color":"yellow","font-size":"200%"});


 函数 css(name) 返回指定的 CSS 属性的值:

 实例
 $(selector).css(name)
 $(this).css("background-color");


jQuery Size 操作

 jQuery 拥有两种供尺寸操作的重要函数:

 ?$(selector).height(value)
 ?$(selector).width(value)

Size 操作实例

 函数 height(value) 设置所有匹配元素的高度:

 实例
 $(selector).height(value)
 $("#id100").height("200px");

 函数 width(value) 设置所有匹配元素的宽度:

 实例
 $(selector).width(value)
 $("#id200").width("300px");

AJAX 和 jQuery

 Query 的 load 函数是一种简单的(但很强大的)AJAX 函数。它的语法如下:
 $(selector).load(url,data,callback)
 请使用选择器来定义要改变的 HTML 元素,使用 url 参数来指定您的数据的 web 地址。
 只有当您希望向服务器发送数据,才需要使用 data 参数。
 只有当您需要在完毕之后触发一个函数时,您才需要使用 callback 参数。

jQuery AJAX 请求

     请求                                   描述
 $(selector).load(url,data,callback)  把远程数据加载到被选的元素中
 $.ajax(options) 把远程数据加载到     XMLHttpRequest 对象中
 $.get(url,data,callback,type)        使用 HTTP GET 来加载远程数据
 $.post(url,data,callback,type)       使用 HTTP POST 来加载远程数据
 $.getJSON(url,data,callback)         使用 HTTP GET 来加载远程 JSON 数据
 $.getScript(url,callback)            加载并执行远程的 JavaScript 文件

(selector) jQuery 元素选择器语法

 (url) 被加载的数据的 URL(地址)
 (data) 发送到服务器的数据的键/值对象
 (callback) 当数据被加载时,所执行的函数
 (type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)
 (options) 完整 AJAX 请求的所有键/值对选项

 

jQuery基本语法和选择器

jQuery 一、jQuery介绍 1、JS类库 l  JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器。 2、当前流行的Ja...
  • CSDN_GIA
  • CSDN_GIA
  • 2017年02月02日 14:49
  • 389

jquery_$.ajax

首先引用jquery到项目里。         //准备ajax回调        function doAjax() {            //获取输入值            var name...
  • am20100204
  • am20100204
  • 2010年07月07日 22:45
  • 346

一、C#学习基础篇----基础语法

C#是一种面向对象的语言,类似于java,面向对象有的特点他都具备了面向对象的三个 基本特性,封装,继承,多态。其他的不多说了,我们直奔主题,C#有基本数据类型,和引用数据类型之分, 基本数据类型有b...
  • u011017980
  • u011017980
  • 2015年05月08日 23:50
  • 1643

Linq 基本语法

以下都是转载内容 1.简单的linq语法 //1 var ss = from r in db.Am_recProScheme ...
  • qq389216533
  • qq389216533
  • 2016年07月30日 22:38
  • 178

PHP的基本语法(一)

一、基本认识 1、PHP 脚本可放置在文档的任意位置; 2、PHP 脚本以开头,以 ?> 结尾; 3、默认文件扩展名为.php; 4、通常包含HTML标签以及一些PHP脚本代码; 5、PHP...
  • Geek_Geek
  • Geek_Geek
  • 2015年07月19日 21:53
  • 2474

Perl基本语法

注释=pod 1.xxx 2.ddd 3.这是多行注释 =cut# this is comment 单行注释判断语句if … elsif … else my @array = (1..10); for...
  • zhubinqiang
  • zhubinqiang
  • 2015年11月23日 17:48
  • 1460

JQuery_小蜜蜂

xmlns="http://www.w3.org/1999/xhtml">     http-equiv="Content-Type" content="text/h...
  • mingpingyao
  • mingpingyao
  • 2018年01月06日 12:02
  • 16

html css 术语 和 基本语法

术语语法 介绍 在学习之前区别html和css之间不同,语法和常用的术语。 Html语言是被创建用于给予网页内容结构和语义信息的超文本语言。 CSS语言是被创建用于给予网页内容样式的层叠样式表。...
  • ZiLongO
  • ZiLongO
  • 2014年04月26日 23:08
  • 1514

SQL Server -数据库基本语法的总结

-------------创建数据库和标 create database 数据库名 on ( name = 主要数据文件名, filename = 主要数据文件存放路径(注; 保证存...
  • snakewarhead
  • snakewarhead
  • 2011年03月22日 00:03
  • 2633

关于JSP基本语法的练习

这是一道李兴华老师的Java Web开发实战经典里面的5.9的课后题。 先看一下题目要求: 有两种思路,一种是局部加载,只需要更新列表即可;另一种就是重新加载整个网页。 一开始做的时候,我并...
  • u012504392
  • u012504392
  • 2017年03月24日 13:02
  • 156
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JQuery_基本语法和特效
举报原因:
原因补充:

(最多只允许输入30个字)