jQuery 语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
实例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有
元素
$("p.test").hide() - 隐藏所有 class="test" 的
元素
$("#test").hide() - 隐藏所有 id="test" 的元素
文档就绪事件
$(document).ready(function(){
// 开始写 jQuery 代码...
});
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
如果在文档没有完全加载之前就运行函数，操作可能失败。
jQuery事件
- 鼠标事件
click()， 鼠标点击
dblclick()， 双击
mouseenter()，鼠标移入
mouseleave()，鼠标移开 - 键盘事件
keypress()，按键时触发
keydown()，按下时触发
keyup()，松开时触发 - 表单事件
submit()，提交时
change()，value改变时
focus()，成为焦点时
blur()，失去焦点时 - 文档、窗口事件
load()，记载完成时
如：
$(document).ready(function(){
$("img").load(function(){
alert("图片已载入");
});
});
resize()，重置窗口大小
scroll()，滚动时
toggle()，切换隐藏、显示状态。
点击展示 淡入/淡出 面板
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
动画
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
带回调的动画
$("button").click(function(){
$("p").hide("slow",function(){
alert("段落现在被隐藏了");
});
});
节点操作
$("#runoob").attr("href") 获取href属性
$("#runoob").val() 获取value
$("#runoob").text() 获取文本
$("#runoob").html() 获取html
设置节点内容:
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("Hello world!");
});
$("#btn3").click(function(){
$("#test3").val("RUNOOB");
});
带回调的设置节点:
上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
//i是被选元素列表中当前元素的下标，我们获取的元素可能有多个
$("#test1").text(function(i,origText){
return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
});
设置属性：
$("#runoob").attr("href","http://www.runoob.com/jquery");
//设置多个属性
$("#runoob").attr({
"href" : "http://www.runoob.com/jquery",
"title" : "jQuery 教程"
});
//带回调的
$("#runoob").attr("href", function(i,origValue){
return origValue + "/jquery";
});
添加元素
function appendText(){
var txt1="文本。
"; // 使用 HTML 标签创建文本
var txt2=$("").text("文本。"); // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
}
$("img").after("在后面添加文本");
$("img").before("在前面添加文本");
那有木有考虑过append/prepend和after/before有什么区别呢？
append
s1
结果是这样的:
s1
s2
-----------------分割线---------------------------
after
s1
结果是这样的:
s1
s2
总结：
append/prepend 是在选择元素内部嵌入。
after/before 是在元素外面追加。