jquery 语法基础
jquery 语法基础
基本语法：
$("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中几种特殊的符号$、!、@、^浅析
分类： JavaScript 2010-08-10 22:19 261人阅读 评论(0) 收藏 举报
在刚接触JQuery的时候，感觉很容易上手，但是用了一段时间开发前台的JS时候，总感觉有点迷糊对它的理解， 尤其是用到几个特殊
的符号进行选择器刷选的时候，不能很好的搭配使用，现在总结一下对它们的理解，以帮助和我一样对JQuery迷茫的人们。
1.$。在jQuery
中$("<span>")，这个语法等同于$(document.createElement("span"))
，这是一种用法，在选择元素的时候还会这样子的用：[attribute$=value]，匹配给定的属性是以某些值结尾的元素。下面举个例子来说明一下：
HTML代码
1.$。在jQuery
中$("<span>")，这个语法等同于$(document.createElement("span"))
，这是一种用法，在选择元素的时候还会这样子的用：[attribute$=value]，匹配给定的属性是以某些值结尾的元素。下面举个例子来说明一下：
HTML代码
<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />
jQuery 代码:
$("input[name$='letter']")
结果:
[ <input name="newsletter" />, <input
name="jobletter" /> ]
2.!。选择器：[attribute!=value]，匹配所有不含有指定的属性，或者属性不等于特定值的元素，此选择器等价于:not([attr=value])。
例子说明一下：
HTML代码
<input type="checkbox" name="newsletter"
value="Hot Fuzz" />
<input type="checkbox" name="newsletter"
value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil
Plans" />
jQuery 代码:
$("input[name!='newsletter']").attr("checked",
true);
结果:
[ <input type="checkbox" name="accept"
value="Evil Plans" checked="true" /> ]
3.*。选择器：[attribute*=value]，匹配给定的属性是以包含某些值的元素。举个例子说明一下：
HTML 代码:
<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />
jQuery 代码:
$("input[name*='man']")
结果:
[ <input name="man-news" />, <input
name="milkman" />, <input name="letterman2" /> ]
4.@。匹配包含给定属性的元素。注意，在jQuery
1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即
可。
5.^。选择器：[attribute^=value]，匹配给定的属性是以某些值开始的元素，下面举个例子来说明一下：
HTML 代码:
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />
jQuery 代码:
$("input[name^='news']")
结果:
[ <input name="newsletter" />, <input
name="newsboy" /> ]
在jquery中，当使用$(”input[name='metaId']“).val()不能直接获得被选择的radio的值，只是获得 radio标签的第一个值，这可能jquery使用xpath语言了进行查找有关，而我们通常是想获得被选中的radio的值，有以下几种方法：
1，使用$(”input[name='metaId']:checked”).val()获得 //name代表radio中name属性名
2，使用$(”:radio:checked”).val()获得 //限制页面只有一组radio标签
<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />
jQuery 代码:
$("input[name$='letter']")
结果:
[ <input name="newsletter" />, <input
name="jobletter" /> ]
2.!。选择器：[attribute!=value]，匹配所有不含有指定的属性，或者属性不等于特定值的元素，此选择器等价于:not([attr=value])。
例子说明一下：
HTML代码
<input type="checkbox" name="newsletter"
value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold
Fusion" />
<input type="checkbox" name="accept" value="Evil
Plans" />
jQuery 代码:
$("input[name!='newsletter']").attr("checked",
true);
结果:
[ <input type="checkbox" name="accept"
value="Evil Plans" checked="true" /> ]
3.*。选择器：[attribute*=value]，匹配给定的属性是以包含某些值的元素。举个例子说明一下：
HTML 代码:
<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />
jQuery 代码:
$("input[name*='man']")
结果:
[ <input name="man-news" />, <input
name="milkman" />, <input name="letterman2" /> ]
4.@。匹配包含给定属性的元素。注意，在jQuery
1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即
可。
5.^。选择器：[attribute^=value]，匹配给定的属性是以某些值开始的元素，下面举个例子来说明一下：
HTML 代码:
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />
jQuery 代码:
$("input[name^='news']")
结果:
[ <input name="newsletter" />, <input
name="newsboy" /> ]
浙公网安备 33010602011771号