jQuery语法

来源：互联网发布：客机纸模型图纸淘宝编辑：程序博客网时间：2024/06/05 23:45

jQuery语法

基础语法： $(selector).action()

$符号兴义jquery
选择符（selector）查询和查找HTML元素
jQuery的action（）执行对元素的操作

文档就绪事件

$(function(){    //jQuery代码})

jQuery选择器基于元素的id、类、类型、属性、属性值等‘查找’（或选择）HTML元素。基于已存在的Css选择器，除此之外，还有一些自定义的选择器。

实例

$(function(){    $("button").click(function(){        $("p").hide(); //点击按钮所有p元素隐藏    }})

#id选择器

$(function(){    $("button").click(function(){        $("#test").hide(); //点击按钮后，id为test的元素隐藏    })})

.class选择器

$(function(){    $("button").click(function(){        $(".test").hide(); //点击按钮后，class为test的元素隐藏    })})

引用独立文件中的jQuery函数

<head>    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">    </script>    <script src="my_jquery_functions.js"></script></head>

jQuery事件

常见DOM事件

鼠标事件键盘事件表单事件文档/窗口时间 click（单击） keypress submit load dblclick（双击） keydown change resize mouseenter（鼠标穿过元素） keyup focus（获得焦点） scroll mouseleave（鼠标离开元素） blur（失去焦点） unload

mouseup()鼠标按下 mousedown()鼠标松开 hover()光标悬停

jQuery事件方法语法

页面中指定一个点击事件

$("p").click();

下一步是定义什么时间出发时间。可以通过一个事件函数实现：

$("p").click(function(){// 动作触发后执行的代码!!});

jQuery效果-隐藏和显示

通过jQuery，可以使用hide()和show()方法来隐藏和显示HTML元素：

$("#hide").click(function(){    $("p").hide();});$("#show").click(function(){    $("p").show();});

语法：

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

可选的speed参数规定隐藏/显示的速度，可以取一下：”slow”、”fast”或毫秒
可选的callback参数是隐藏或显示完成后所执行的函数名称。

$("button").click(function(){    $("p").hide(1000); //在1000毫秒内隐藏});

jQuery toggle()
可以使用toggle()方法来切换显示或隐藏

$("button").click(function(){    $("p").toggle();});

jQuery效果-淡入淡出

jQuery Fading方法

jQuery 拥有下面四种 fade 方法：
* fadeIn()
jQuery fadeIn() 用于淡入已隐藏的元素。
语法: (selector).fadeIn(speed,callback);∗fadeOut()jQueryfadeOut()方法用于淡出可见元素。语法:(selector).fadeOut(speed,callback);
* fadeToggle()
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
语法: (selector).fadeToggle(speed,callback);∗fadeTo()jQueryfadeTo()方法允许渐变为给定的不透明度（值介于0与1之间）。语法:(selector).fadeTo(speed,opacity,callback);

jQuery效果-滑动

通过 jQuery，您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法：
* slideDown() 向下滑动元素
* slideUp() 向上滑动元素
* slideToggle() 切换滑动

jQuery停止动画

jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有jQuery效果函数，包括滑动、淡入淡出和自定义动画。
语法: $(selector).stop(stopAll,goToEnd);

jQuery HTML

jQuery DOM操作

jQuery 中非常重要的部分，就是操作 DOM 的能力。
jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
lamp DOM = Document Object Model（文档对象模型）
DOM 定义访问 HTML 和 XML 文档的标准：
“W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。”

获得内容 - text(),html()以及val()

三个简单使用的用于DOM操作的jquery方法：
* text() - 设置或返回所选的文本内容
* html() - 设置货返回所选元素的内容（包括HTML标记）
* val() - 设置或返回表单字段的值

实例

$("#btn1").click(function(){    alert("Text: " + $("#test").text());});$("#btn2").click(function(){    alert("HTML: " + $("#test").html());});$("#btn1").click(function(){    alert("值为: " + $("#test").val());});

获取属性 - attr()

用于获取属性值。

$("button").click(function(){    alert($("#run").attr("href")); //获取id为run的href值});

jquery - 设置内容和属性

设置内容 - text()、html() 以及 val()
我们将使用前一章中的三个相同的方法来设置内容：
* text() - 设置或返回所选元素的文本内容
* html() - 设置或返回所选元素的内容（包括 HTML 标记）
* val() - 设置或返回表单字段的值

实例

$("#btn1").click(function(){    $("#test1").text("Hello world!");});$("#btn2").click(function(){    $("#test2").html("<b>Hello world!</b>");});$("#btn3").click(function(){    $("#test3").val("RUNOOB");});

设置属性 - attr()

实例

$("button").click(function(){    $("#runoob").attr({        "href" : "http://www.runoob.com/jquery",        "title" : "jQuery 教程"    });});

jQuery - 添加元素

添加新的HTML内容

用于添加新内容的四个jQuery方法：
* append() - 在被选元素结尾插入内容

    $("p").append("追加文本")

prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

jQuery - 删除元素

删除已有的HTML元素
* remove() - 删除备选元素及其子元素

    $("p").remove(".italic"); //删除class="italic"的所有<p>元素

* empty() - 删除备选元素的子元素

jQuery - 获取并设置css类

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作

css() - 设置或返回样式属性

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

jquery - ajax简介

什么是AJAX？

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。

jQuery - AJAX load()方法

load()方法从服务器加载数据，并把返回的数据放入被选元素中。
语法: $(selector).load(URL,data,callback);

jQuery - AJAX get()和post()方法

两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
* GET - 从指定的资源请求数据
* POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

jQuery $.get()方法

语法： $.get(URL, callback);

jQuery $.post()方法

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

阅读全文

0 0

jQuery语法

基础语法： $(selector).action()

文档就绪事件

jQuery选择器基于元素的id、类、类型、属性、属性值等‘查找’（或选择）HTML元素。基于已存在的Css选择器，除此之外，还有一些自定义的选择器。

实例

#id选择器

.class选择器

更多实例

引用独立文件中的jQuery函数

jQuery事件

常见DOM事件

jQuery事件方法语法

jQuery效果-隐藏和显示

jQuery效果-淡入淡出

jQuery Fading方法

jQuery效果-滑动

jQuery停止动画

jQuery HTML

jQuery DOM操作

获得内容 - text(),html()以及val()

实例

获取属性 - attr()

jquery - 设置内容和属性

实例

设置属性 - attr()

实例

jQuery - 添加元素

添加新的HTML内容

jQuery - 删除元素

jQuery - 获取并设置css类

jquery - ajax简介

什么是AJAX？

jQuery - AJAX load()方法

jQuery - AJAX get()和post()方法

jQuery $.get()方法

jQuery $.post()方法