(以下大部分内容来源于w3s网站)
一、基本语法
1.注意:jquery的<script> 标签应该位于页面的 <head> 里面。
jquery的在线文件有很多,谷歌,微软都可以。加入以下<script>即可使用jQuery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
选择器
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获取的对象,命名时最好在前面加上$。
二、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 参数是请求成功后所执行的函数名。
4.