jQuery学习及jQuery使用手册

W3School在线测试工具

一.通过jQuery，选取HTML元素，并对它们执行“操作”。

    $(this).hide()                隐藏当前的HTML元素

    $("#test").hide()          隐藏id="test"的元素 （当id相同时隐藏第一个）

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

    $(".test").hide              隐藏所有class="test"的元素

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

 

二.jQuery属性选择器

    jQuery 使用 XPath 表达式来选择带有给定属性的元素。

    $("[href]") 选取所有带有 href 属性的元素。

    $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

    $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。（注：这个没进行测试）

    $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

 

三.jQuery CSS 选择器

     jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

    下面的例子把所有 <p >元素的背景颜色更改为红色：

$("p").css("background-color","red");

    所有的jquery选择器   

四.Jquery 效果

     jQuery 可以创建隐藏、显示、切换、滑动以及自定义动画等效果。

    显示和隐藏 toggle()=hide()+show()

$("button").click(function(){
$("p").toggle();
});

    滑动  slideToggle()=slideDown()+slideUp()

 

$(".flip").click(function(){
$(".panel").slideToggle();
});

 

$(selector).hide()	隐藏被选元素
$(selector).show()	显示被选元素
$(selector).toggle()	切换（在隐藏与显示之间）被选元素
$(selector).slideDown()	向下滑动（显示）被选元素
$(selector).slideUp()	向上滑动（隐藏）被选元素
$(selector).slideToggle()	对被选元素切换向上滑动和向下滑动
$(selector).fadeIn()	淡入被选元素
$(selector).fadeOut()	淡出被选元素
$(selector).fadeTo()	把被选元素淡出为给定的不透明度
$(selector).animate()	对被选元素执行自定义动画

五.jQuery HTML 操作

 

   

$(selector).html(content)	改变被选元素的（内部）HTML
$(selector).append(content)	向被选元素的（内部）HTML 追加内容
$(selector).prepend(content)	向被选元素的（内部）HTML “预置”（Prepend）内容
$(selector).after(content)	在被选元素之后添加 HTML
$(selector).before(content)	在被选元素之前添加 HTML