jQuery笔记

引入核心库 ：
下载地址：http://docs.jquery.com/Downloading_jQuery#Download_jQuery

<script type="text/javascript" src="jquery.js"></script>

 

文档加载完后执行ready方法：

<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
        $("p").hide();
    });
});

 

获取相应组件：
$(this)获取当前的 HTML 元素。
$("#test")获取id="test" 的元素。
$("p")获取所有 <p> 元素。
$(".test")获取所有 class="test" 的元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取 id="demo" 的第一个 <p> 元素。

$("[href]")，$("[href='#']")，$("[href!='#']")，$("[href$='.jpg']") 获取含指定属性及值的元素，最后一个表示以.jpg结尾

$("ul li:first")所有ul元素内的第一个li元素

基本语法：
css("样式名","样式值")->如$("p").css("background-color","red")
css({"样式名":"样式值","样式名":"样式值"})改变多个属性

height(value)设置高度
width(value)设置宽度

hide()影藏当前元素
show()现实当前元素
hide[slow](speed,callback),speed的值有fast,slow,normal,或者毫秒，callback为执行完后调用的JS方法
toggle(speed,callback)，在hide与show间相互切换

slideDown()向下展开元素
slideUp()向上合拢元素
slideToggle("slow")交替合拢或展开当前元素

fadeOut(speed,callback)元素渐渐消失
fadeIn(speed,callback)元素渐渐出现
fadeTo(speed,0.25)元素渐渐淡出甚至透明

animate({params},[duration],[easing],[callback])
animate({height[width]:300,opacity:0.4},"slow")动态调整高度与宽度,可起到动画效果

html(content)改变当前元素内部的内容
append(content)在当前元素内部追加内容
prepend(content)在当前元素内部起始位置添加内容

after(content)在当前元素后面追加内容
before(content)在当前元素前面追加内容


jQuery的AJAX实现
$(selector).load(url,data,callback)


更多方法可参考http://www.w3school.com.cn/jquery/jquery_ref_events.asp

jQuery防止名称冲突：
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。
<script type="text/javascript">
var jq=jQuery.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").hide();
  });
});
</script>