jQuery 语法实例
- $(this).hide()
演示 jQuery hide() 函数，隐藏当前的 HTML 元素。 $(“#test”).hide()
演示 jQuery hide() 函数，隐藏 id=”test” 的元素
$(“p”).hide()
演示 jQuery hide() 函数，隐藏所有元素。
- $(“.test”).hide()
演示 jQuery hide() 函数，隐藏所有 class=”test” 的元素jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。 - $(“p”) 选取
元素。
- $(“p.intro”) 选取所有 class=”intro” 的
元素。
- $(“p#demo”) 选取所有 id=”demo” 的
元素
| header 1 | header 2 |
|---|---|
| 语法 | 描述 |
| $(“p”) | 所有 元素 |
| $(“p.intro”) | 所有 class=”intro” 的 元素 |
| $(“.intro”) | 所有 class=”intro” 的元素 |
| $(“#intro”) | id=”intro” 的元素 |
| $(“ul li:first”) | 每个
|
| $(“[href$=’.jpg’]”) | 所有带有以 “.jpg” 结尾的属性值的 href 属性 |
| $(“div#intro .head” | id=”intro” 的 元素中的所有 class=”head” 的元素 |
动画
1 | $(selector).animate({params},speed,callback); |
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称
开始滑动 停止滑动
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）
$("#p1").css("color","red")
.slideUp(2000).slideDown(2000);
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
删除元素/内容
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素
接受一个参数 可以过滤被删除的元素
删除类名为==italic==的p元素
$("p").remove(".italic");
jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性6.jQuery - 尺寸
- width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
- height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
- innerWidth() 方法返回元素的宽度（包括内边距）。
- innerHeight() 方法返回元素的高度（包括内边距）。
- outerWidth() 方法返回元素的宽度（包括内边距和边框）。
- outerHeight() 方法返回元素的高度（包括内边距和边框）。
2017/7/25更新