jQuery学习笔记（一）

jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

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

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

实例:

• $(this).hide() - 隐藏当前元素

• $("p").hide() - 隐藏所有 <p> 元素

• $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素

• $("#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("<b>Hello world!</b>");
});
$("#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="<p>文本。</p>";              // 使用 HTML 标签创建文本
    var txt2=$("<p></p>").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

<p>
  <span class="s1">s1</span>
</p>
<script>
$("p").append('<span class="s2">s2</span>');
</script>

结果是这样的:

<p>
  <span class="s1">s1</span>
  <span class="s2">s2</span>
</p>

-----------------分割线---------------------------
after

<p>
  <span class="s1">s1</span>
</p>
<script>
$("p").after('<span class="s2">s2</span>');
</script>

结果是这样的:

<p>
  <span class="s1">s1</span>
</p>
<span class="s2">s2</span>

总结：

append/prepend 是在选择元素内部嵌入。

after/before 是在元素外面追加。