jquery锚点跳转滚动条平滑滚动一句话代码
复制代码 代码如下:
$("html,body").animate({scrollTop: $("#box").offset().top}, 1000);
一下是一些jquery的小技巧
1. 控制编译结果
复制代码 代码如下:
<script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>
2.
1.如果要使用jQuery提供的函数, 就要首先构造jQuery包装集.
将Dom元素转换成jQuery包装集
复制代码 代码如下:
var div = document.getElementById("testDiv"); //Dom元素
var domToJQueryObject = $(div); //jQuery包装
3.jQuery包装集转Dom对象
复制代码 代码如下:
var domObject = $("#testDiv")[0]; // 得到DOM对象
$("#testDiv").each(function() { $(this).html("修改内容") })//转换为 jQuery包装集操作
4。
复制代码 代码如下:
jQuery( callback )
Returns: jQuery
$(document).ready()的简写方式
--------------------------------------------------------------------------------
从零开始学习jQuery (三) 管理jQuery包装集
复制代码 代码如下:
<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>
<script type="text/javascript"> <br>$( <br>function(){ <br>$("#btnShow").bind("click", function(event) { $(".filter").show();} ) ; <br>$("#btnHide").bind("click", function(event) { $(".filter").hide(500);} ) ; <br>} <br>); <br>// $("#btnChange").bind("click", function(event) { $("#divMsg").html("Hello World, too!"); }); <br></script>
<script type="text/javascript"> <br>//$("<div/>").css("border","solid 1px #FF0000").html("动态创建的div").appendTo(testDiv); //ok <br>//$("<div style=\"border:solid 1px #FF0000\">动态创建的div</script>
$(
function()
{
// alert("loaded!"); //加载完成后才执行
}
);
// alert("LODING。。。");//一遇到就执行
<script type="text/javascript"> <br>//模板 <br></script>
<script type="text/javascript"> <br>function first(){//first <br>var an_element=$("div").eq(0); <br>//得到 第一个 Div 整个的 div 如果 直接 输出 an_element会显示 那是一个对象 <br>alert(an_element.html());//输出 <br>} <br>function second(){ <br>var second_e= $("div").filter(".test2");//得到 是与偶有符合的 <br>/*======================这段代码测试是否是一个集合 但是报错 不懂用this==========================*/ <br>// second_e.each( <br>// function(){ <br>//this.html("修改它！") <br>// } <br>// ); <br>/*================================================*/ <br>alert(second_e.html());//测试 得到的 内容 只显示 第一个 div 的内容 <br>alert(second_e.eq(1).html());//得到第二个 <br>} <br>//================================================================================= <br></script>
第一个 例子:点我运行
| eq( index ) 获取第N个元素 | 获取匹配的第二个元素: $("p").eq(1) |
筛选出与指定表达式匹配的元素集合。第一个div
第 2 个 例子:点我运行
filter( expr )
保留带有 test2类的元素: 在这里是 带有 test2 class的
$("X").filter(".test2") 第2个div
<script type="text/javascript"> <br>function third(){ <br>//alert("a"); <br>var test3= $("p").filter( //同级 <br>function(index){//遍历 <br>// alert(index); <br>//alert($("ol",this).html()); <br>// alert( "index: "+index+$(this).html());// this 就是 各个 被遍历的对象 在这里是各个 P 标签里面的内容 <br>// 难道 <p> <ol><li>包含 ol 的P标签 里的内容没有？ <br>//这样才算 <p> p 的 内容<ol><li>包含 ol $(this).html()= p 的 内容 <br>alert( " 第"+index+" 个 p=> "+$(this).html()+" ol=> "+ $("ol",this).html() ); <br>//可能是版本的问题 我引进的是 * jQuery JavaScript Library v1.3.2-vs <br>//所有的内容都是空 <br>return $("ol",this).length==0;//1多条件筛选 2 返回 false则这个元素被删除 <br>} <br>); <br>alert(test3.html()); <br>} <br></script>
filter( fn ):
筛选出与指定函数返回值匹配的元素集合
这个函数内部将对每个对象计算一次 (正如 '$.each'). 如果调用的函数返回false则这个元素被删除，否则就会保留。
p 的 html
- ol的html
- li
How are you? 不 包含
<script type="application/javascript"> <br></script>
