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 |
?
?