jQuery菜鸟总结

一、基本语法

1.注意：jquery的<script> 标签应该位于页面的 <head> 里面。

jquery的在线文件有很多，谷歌，微软都可以。加入以下<script>即可使用jQuery

选择器

2. jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。也就是选择器

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

美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

示例如下：

$(this) ：当前 HTML 元素

$("p") ：所有 <p> 元素

$("p.intro") : 所有 class="intro" 的 <p> 元素

$(".intro") : 所有 class="intro" 的元素

$("#intro") : id="intro" 的元素

$("[name=date]") : 选择 name为date 的元素，此处的[ ]内部可以添加多个条件。

3.获得元素内容 - text()、html() 以及 val()

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

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

示例如下：

$(this) .text() ：获取当前元素的文本内容

$("#intro").html : 获取id="intro" 的元素的html内容

$("selector").val() : 设置选中元素的值
$("selector").val(新值) ：修改选中元素的值

4.回调函数.

text()、html() 以及 val()，同样拥有回调函数。

他们的回调函数由两个参数构成：被选元素列表中当前元素的下标，以及原始（旧的）值。

然后以函数新值返回您希望使用的字符串。

5.通过jQuery添加新的 HTML 内容

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

比如： $("#para").append("test"); 表示 id为para的元素末尾添加test

6.jQuery操作css元素

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

7.注意：通过jquery获取的对象，命名时最好在前面加上$。

var $cr=$("cr"); //jquery对象

var cr=document.getElementById("cr"); // js的DOM对象

二、JQuery遍历

三、事件

1、ready 事件：当 DOM（文档对象模型）已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。

所有的jquery代码都会写在$(document).ready(function(){ // --- jQuery functions go here ---- }); 里面。

比如:

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

            });
        });

常见的事件如下所示：

$(document).ready(function) : 将函数绑定到文档的就绪事件（当文档完成加载时）。
$(selector).click(function) : 触发或将函数绑定到被选元素的点击事件。

$(selector).change(function) : 当元素的值发生改变时，会发生 change 事件。该事件仅适用于文本域（text field），以及 textarea 和 select 元素。

注意：在jQuery中点击按钮的事件是click，而不是onclick
$(selector).dblclick(function) : 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) : 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) :触发或将函数绑定到被选元素的鼠标悬停事件

2.事件方法

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

用法：

$(selector).on(event,childSelector,data,function)

bind()方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

用法：

$(selector).bind(event,data,function)

data属于可选，enent和function是必选的。

四、jQuery ajax

1.load() 方法

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

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

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

注意：如果要加载的文件在同一文件夹下，可以只写文件名;如果不是在同一文件夹下，需要写绝对路径。

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

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

比如：

$("#div1").load("demo_test.txt #p1"); 表示把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中;

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

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

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

3.jQuery $.post() 方法
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。
语法： $.post(URL,data,callback);

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

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

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