slideToggle():
语法:
$(selector).slideToggle(speed,callback)
speed
可选。规定元素从隐藏到可见的速度（或者相反）。默认为 "normal"。
可能的值：
毫秒 （比如 1500）
"slow"
"normal"
"fast"
在设置速度的情况下，元素在切换的过程中，会逐渐地改变其高度（这样会创造滑动效果）。callback
可选。toggle 函数执行完之后，要执行的函数。
除非设置了 speed 参数，否则不能设置该参数。
提示：如果元素已经隐藏，则该效果不产生任何变化，除非规定了 callback 函数。
ready():
语法 1
$(document).ready(function)
语法 2
$().ready(function)
语法 3
$(function)
当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。
由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。
ready() 函数规定当 ready 事件发生时执行的代码。
ready() 函数仅能用于当前文档，因此无需选择器。
提示：ready() 函数不应与 <body onload=""> 一起使用。
detach()
语法
$(selector).detach()
detach() 方法移除被选元素，包括所有文本和子节点。
这个方法会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素。
detach() 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同。
实例:
//移动元素
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("body").append($("p").detach());
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>移动 p 元素</button>
</body>
//使用 detach() 方法来删除并恢复一个元素。
<script type="text/javascript">
$(document).ready(function(){
var x;
$("#btn1").click(function(){
x=$("p").detach();
});
$("#btn2").click(function(){
$("body").prepend(x);
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button id="btn1">删除 p 元素</button>
<button id="btn2">恢复 p 元素</button>
</body>
//使用 detach() 方法来移动元素，并保留元素的 jQuery 数据。
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("body").append($("p").detach());
});
$("p").click(function(){
$(this).animate({fontSize:"+=1px"})
});
});
</script>
</head>
<body>
<p>在本段落移动之后，试着点击该段落，请注意它保留了 click 事件。</p>
<button>移动 p 元素</button>
</body>
animate()
语法：
$(selector).animate({params},speed,callback);
- 必需的 params 参数定义形成动画的 CSS 属性。
- 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
- 可选的 callback 参数是动画完成后所执行的函数名称。
实例:
$("button").click(function(){
$("div").animate({left:'250px'});
});
animate() - 操作多个属性
实例:
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
stop()
stop() 方法停止当前正在运行的动画。
语法
$(selector).stop(stopAll,goToEnd)
| 参数 | 描述 |
|---|---|
| stopAll | 可选。规定是否停止被选元素的所有加入队列的动画。 |
| goToEnd | 可选。规定是否允许完成当前的动画。该参数只能在设置了 stopAll 参数时使用。 |
实例:
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
$("#stop").click(function(){
$("#box").stop(true);
});
});
finish()
语法:
$(*selector*).finish(*queueName*)
停止当前运行的动画，移除所有排队的动画，并为被选元素完成所有动画。该方法与 .stop(true,true) 方法类似，不同的是，finish() 也会引起所有排队动画的 CSS 属性停止。
queueName可选。规定要停止动画的队列名称。
slideToggle()
slideDown()
slideUp()
- slideToggle()方法通过使用滑动效果（高度变化）来切换元素的可见状态。
如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。- slideUp() 方法在已经显示的情况下,隐藏选中的元素
- slideDown() 方法在已经隐藏的情况下,显示选中的元素
语法
$(selector).slideToggle(speed,callback) //在显示与隐藏之间来回切换
$(selector).slideUp(speed,callback) //在已经显示的情况下,隐藏选中的元素
$(selector).slideDown(speed,callback) //在已经隐藏的情况下,显示选中的元素
| 参数 | 描述 |
|---|---|
| speed | 可选。规定元素从隐藏到可见的速度（或者相反）。默认为 "normal"。可能的值：毫秒 （比如1500）"slow""normal""fast"在设置速度的情况下，元素在切换的过程中，会逐渐地改变其高度（这样会创造滑动效果）。 |
| callback | 可选。toggle 函数执行完之后，要执行的函数。除非设置了 speed 参数，否则不能设置该参数。 |
index()
语法
$(selector).index() //获得第一个匹配元素相对于其同胞元素的 index 位置。
$(selector).index(element) //获得元素相对于选择器的 index 位置。该元素可以通过 DOM 元素或 jQuery 选择器来指定。
index() 方法返回指定元素相对于其他指定元素的 index 位置。
这些元素可通过 jQuery 选择器或 DOM 元素来指定。
注释：如果未找到元素，index() 将返回 -1。
实例:
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
alert($(".hot").index($("#favorite")));
});
});
</script>
</head>
<body>
<p>请点击下面的按钮，以获得 id="favorite" 的元素相对于 jQuery 选择器 (class="hot") 的 index：</p>
<button>获得 index</button>
<ul>
<li>Milk</li>
<li class="hot">Tea</li>
<li class="hot" id="favorite">Coffee</li>
</ul>
</body>
展示元素$node, 隐藏元素$node
$(ele).show()
$(ele).hide()
获取元素$node 的 属性: id、src、title， 修改以上属性
$node.attr('id');//获取
$node.attr('id’,'值'); //修改
$node.attr('src');//获取
$node.attr('src’,'值');//修改
$node.attr('title');//获取
$node.attr('title’,'值');//修改
给$node 添加自定义属性data-src
$node.data("src",str)
在$ct 内部最开头添加元素$node
$(".ct").prepend(node);
在$ct 内部最末尾添加元素$node
$(".ct").append(node);
删除$node
$node.remove()
把$ct里内容清空
$ct.empty()
在$ct 里设置 html <div class="btn"></div>
$ct.html('<div class="btn"></div>')
获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
$node.width();//不包括内边距宽度,仅包括内容
$node.height();//不包括内边距高度,仅包括内容
$node.innerWidth();//包括内容和内边距宽度
$node.innerHeight();//包括内容和内边距高度
$node.outerWidth();//包括内容,内边距,边框宽度
$node.outerHeight();//包括内容,内边距,边框高度
$node.outerHeight(true);//包括内容,内边距,边框,外边距高度
$node.outerWidth(true);//包括内容,内边距,边框,外边距宽度
获取窗口滚动条垂直滚动距离
$(window).scrollTop()
获取$node 到根节点水平、垂直偏移距离
$node.offset().left
$node.offset().top
修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css({"color":"red","font-size":"14px"})
遍历节点，把每个节点里面的文本内容重复一遍
$node.each(function(){
console.log($(this).text())
})
从$ct 里查找 class 为 .item的子元素
$ct.find('.item')
获取$ct 里面的所有孩子
$ct.children()
对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
$node.parents('.ct').children('.panel')
获取选择元素的数量
$(ele).length
$(ele).size()
获取当前元素在兄弟中的排行
$(ele).index();
网友评论