资源
jQuery 语法
- jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
- jQuery代码在
<script>....</script>
块中写
基础语法: $(selector).action()
- jQuery 使用 $ 符号作为 jQuery 的简写。若和其它框架冲突,使用noConflict() 方法来解决
- 选择符(selector)基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素
- jQuery 的 action() 执行对元素的操作
实例:
$(this).hide(); //隐藏当前元素
$("p").hide(); //隐藏所有 <p> 元素
$("p.test").hide(); //隐藏所有 class="test" 的 <p> 元素
$("#test").hide(); //隐藏所有 id="test" 的元素
$(".test").hide(); //隐藏所有带有 class="test" 属性的元素
代码入口
jQuery 函数位于一个 document ready 函数中
$(document).ready(function(){
// 开始写 jQuery 代码...
});
简写为:
$(function(){
// 开始写 jQuery 代码...
});
jQuery事件
- jQuery 是为事件处理特别设计的
- 页面对不同访问者的响应叫做事件
- 常见事件:鼠标事件,键盘事件,表单事件,文档/窗口事件
- 详见
jQuery AJAX 方法
load() 从服务器加载数据,并把返回的数据放置到指定的元素中
- load()加载的内容中的javascript代码会自动执行,而单纯的ajax加载的内容中的javascript代码则不会自动执行
- javascript可被放置在 HTML 页面的 <body> 和 <head> 部分中,也可以放在其它的元素中,eg:<p>中
- 详细load()的用法请点击
$(function(){
//在打开该页面后把<boby>中的内容换成从服务器拉取的
$("body").load("http://127.0.0.1:10052/uuocmd/1001");
//在打开该页面后把id="test"的元素中的内容换成从服务器拉取的
//$("#test").load("http://127.0.0.1:10052/uuocmd/1001");
});
get() 使用 AJAX 的 HTTP GET 请求从服务器加载数据
post() 使用 AJAX 的 HTTP POST 请求从服务器加载数据
其它jQuery AJAX 方法
jQuery 获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法:
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
$(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){
alert("值为: " + $("#testinput").val());
});
});
jQuery - 设置内容text()、html() 以及 val()
$(function(){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("RUNOOB");
});
});
jQuery - 获取/设置元素的属性值
$(function(){
//获取值
var tiltel=$("#testwebsite").attr("title");
//设置属性值
$("button").click(function(){
$("#testwebsite").attr("href","./test.html");
});
//设置多个属性值
$("button").click(function(){
$("#testwebsite").attr({
"href" : "./test.html",
"title" :tiltel+tiltel
});
});
});
jQuery - 获取/设置元素的自定义属性值
自定义属性名字必须符合规则 data-*
$(function(){
//获取属性 data-[key] = [value]
var tiltel1=$("#testwebsite").data("title");
//等价于
var tiltel2=$("#testwebsite").attr("data-title");
//设置属性
$("#itestwebsited").data("title", "测试");
//等价于
$("#testwebsite").attr("data-title","测试");
});