jQuery 简单归纳总结

jQuery语法是为HTML元素的选取编制的,可以对元素执行某些操作。

基础语法是:$(selector).action()

+美元符号定义 jQuery

+选择符(selector)“查询”和“查找” HTML 元素

+jQuery 的 action() 执行对元素的操作

示例:

$("p").hide()--隐藏所有段落

$(this).hide()--隐藏当前元素

jQuery选择器:

元素选择器:

$("p")--选取<p>元素

$("p.intro")--选取所有class=“intro”的<p>元素

$("p#intro")--选取所有id=“ontro”的<p>元素

属性选择器:

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href=‘#‘]") 选取所有带有 href 值等于 "#" 的元素。

$("[href!=‘#‘]") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$=‘.jpg‘]") 选取所有 href 值以 ".jpg" 结尾的元素

CSS选择器:

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

jQuery 名称冲突:

jQuery使用$符号作为jQuery的简称方式。

某些其他JavaScript库(比如Prototype)也是用同样的符号。

那么此时,jQuery使用noConflict()的方法来解决此问题。

Var jq=jQuery.noConflict(); //帮助你使用自己的名称来使用jQuery

jQuery是为事件处理专门设计的。

$(document).ready(function(){

$("button").click(function(){

$("p").hide();

});

});

jQuery hide()和show()

语法:

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

speed隐藏动作所执行速度,它可以取值:“slow”.“fast”和毫秒值

callback隐藏后回调函数

jQuery toggle():显示被隐藏的元素,隐藏已显示的元素

jQuery效果:淡入淡出

淡入:$(selector).fadeIn(speed,callback)

淡出:$(selector).fadeOut(speed,callback)

淡入淡出切换:$(selector).fadeToggle(speed,callback)

渐变为给定不透明度:$(selector).fadeTo(speed,opacity,callback)

speed:动作执行速度。它可以取值:“slow”.“fast”和毫秒值

opacity:参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。

jQuery滑动效果

向下滑动:$(selector).slideDown(speed,callback);

向上滑动:$(selector).slideUp(speed,callback);

上下切换:$(selector).slideToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

jQuery 动画 animate()

语法:$(selector).animate({params},speed,callback);

patams:必须参数,定义形成的动画css属性

speed :可选参数,规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

注:默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置

进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或

absolute。

jQuery:stop()--停止函数,动画或效果。

语法:$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,

即仅停止活动的动画,允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

Chaining可以把动作方法链接起来:

$("#p1").css("color","red")

.slideUp(2000)

.slideDown(2000);

jQuery拥有可操作HTMML元素的属性的强大方法。

三个简单实用的用于 DOM 操作的 jQuery 方法:

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容(包括 HTML 标记)

val() - 设置或返回表单字段的值

attr() - 获取链接中href属性的值

ps:括号无值为获取,有值为设置

jQuery-添加元素

append() - 在被选元素的结尾插入内容(内部)

prepend() - 在被选元素的开头插入内容(内部)

after() - 在被选元素之后插入内容(外部)

before() - 在被选元素之前插入内容(外部)

jQuery-删除元素

remove() - 删除被选元素(及其子元素)

empty() - 从被选元素中删除子元素

jQuery-获取并设置CSS类

addClass() - 向被选元素添加一个或多个类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

css() - 设置或返回样式属性,可设置多个css属性,如下:

css({"propertyname":"value","propertyname":"value",...});

jQuery-尺寸

width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。

height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。

innerWidth() 方法返回元素的宽度(包括内边距)。

innerHeight() 方法返回元素的高度(包括内边距)。

outerWidth() 方法返回元素的宽度(包括内边距和边框)。

outerHeight() 方法返回元素的高度(包括内边距和边框)。

jQuery-遍历

向上遍历 DOM 树

这些 jQuery 方法很有用,它们用于向上遍历 DOM 树:

parent() 方法返回被选元素的直接父元素。

parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。

可以使用可选参数来过滤对祖先元素的搜索。

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

例:

$(document).ready(function(){

$("span").parents("ul");

});

向下遍历 DOM 树

下面是两个用于向下遍历 DOM 树的 jQuery 方法:

children()方法返回被选元素的所有直接子元素。可以使用可选参数来过滤对子元素的搜索。

find()方法返回被选元素的后代元素,一路向下直到最后一个后代。

$(document).ready(function(){

$("div").children("p.1");

});

在 DOM 树中水平遍历

有许多有用的方法让我们在 DOM 树进行水平遍历:

siblings()方法返回被选元素的所有同胞元素。

next()方法返回被选元素的下一个同胞元素。

nextAll()方法返回被选元素的所有跟随的同胞元素。

nextUntil()方法返回介于两个给定参数之间的所有跟随的同胞元素。

prev()

prevAll()

prevUntil()

jQuery 遍历-过滤

first() 方法返回被选元素的首个元素。

$(document).ready(function(){

$("div p").first();

});

last() 方法返回被选元素的最后一个元素。

eq() 方法返回被选元素中带有指定索引号的元素。

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,

匹配的元素会被返回。

not() 方法返回不匹配标准的所有元素。与 filter() 相反。

jQuery - AJAX

AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。

简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。

使用 AJAX 的应用程序案例:谷歌地图、腾讯微博、优酷视频、人人网等等。

jQuery - AJAX load() 方法(简单但强大的AJAX方法),

从服务器加载数据,并把返回的数据放入被选的元素中。

语法: $(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

实例:

$("button").click(function(){

$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){

if(statusTxt=="success")

alert("外部内容加载成功!");

if(statusTxt=="error")

alert("Error: "+xhr.status+": "+xhr.statusText);

});

});

jQuery $.get() 方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

语法:

$.get(URL,callback);

实例:

$(document).ready(function(){

$("button").click(function(){

$.get("/example/jquery/demo_test.asp",function(data,status){

alert("数据:" + data + "\n状态:" + status);

});

});

});

jQuery $.post() 方法

$.post() 方法通过HTTP POST 请求从服务器上请求数据

语法:

$post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

实例:

$("button").click(function(){

$.post("demo_test_post.asp",

{

name:"Donald Duck",

city:"Duckburg"

},

function(data,status){

alert("Data: " + data + "\nStatus: " + status);

});

});

时间: 2024-10-06 05:13:30

jQuery 简单归纳总结的相关文章

jQuery简单的轮播特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

jquery 简单弹出层

预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* width height is defined by javascript */ position: absolute; top:0; left: 0; z-index: 1000; background-color: #000; opacity: 0.2; *filter:alpha(opacity=2

jquery 简单弹出层(转)

预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* width height is defined by javascript */ position: absolute; top:0; left: 0; z-index: 1000; background-color: #000; opacity: 0.2; *filter:alpha(opacity=2

基于Jquery 简单实用的弹出提示框

引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间自己写了个弹出效果,放到项目上去发现效果还不错,这里贴出来,做个备忘,有需要的同学可以拿去,也可以作为一个参考. 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.d

就linux三剑客简单归纳

就linux三剑客简单归纳: 1:awk 习题1:用 awk 中查看服务器连接状态并汇总 netstat -an|awk '/^tcp/{++s[$NF]}END{for(a in s)print a,s[a]}' ESTABLISHED 1 LISTEN 20 习题2:统计 web 日志访问流量,要求输出访问次数,请求页面或图片,每个请求的总大小, 总访问流量的大小汇总 awk '{a[$7]+=$10;++b[$7];total+=$10}END{for(x in a)print b[x],

jQuery简单表单验证效果

jQuery简单表单验证效果:只要有表单的地方,基本都会有表单验证,下面就结合实例简单介绍一下最简单的表单验证,如何防止填写的表单内容为空.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <tit

jQuery简单的Ajax调用示例

jQuery简单的Ajax调用示例 jQuery确实方便,下面做个简单的Ajax调用: 建立一个简单的html文件: <!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="Public/js/jquery-easyui-1.3.1/jquery-1.8.2.min.js"></script> <script type=&qu

jquery简单的tab切换特效插件jquery-tab demo代码下载

原文:jquery简单的tab切换特效插件jquery-tab demo代码下载 源代码下载地址:http://www.zuidaima.com/share/1550463496178688.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm

Jquery简单的placeholder效果

Jquery简单的placeholder效果 由于IE6-IE9不支持HTML5中的placeholder,所以自己依赖于Jquery简单的写了一个,供参考! 先看看效果吧!如下JSFiddle地址 查看效果链接 JS代码如下: /* * JS placeholder * IE6-IE9不支持HTML5中的placeholder */ function Placeholder(options) { this.config = { defaultColor: '#ccc', curColor: '