Jquery总结

最新推荐文章于 2020-11-20 07:42:54 发布

weixin_30672019

最新推荐文章于 2020-11-20 07:42:54 发布

阅读量128

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/fanyong/p/3336378.html

本文深入探讨jQuery的基本用法，从简单的HelloWorld示例开始，逐步介绍对象操作、事件处理、动画效果、动态创建和删除节点、选择器、相对选择器、节点操作、遍历、图片跟随鼠标、图片点击显示详细信息、事件冒泡、一次性事件、hover函数、另类选择器、行高亮显示、歌曲选择、滤镜切换、body元素高亮、微软风格搜索框、样式控制、版本计算器、评分控件、球队选择、权限选择、属性过滤、文本非空验证、无刷新评论、选择过滤、注册页面

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1．Jquery之Hello World

<head>

//完整的写法

$(document).ready(function () {

alert("加载完毕");

});

//等价于简写的方法：

$(function () { alert("第二次加载完毕"); });

$(function () { alert("Hello World.") });

$(function () {

$("#btn").click(function () {

alert($("#txt").val());

});

$("div").click(function () {

$(this).hide("3000");

});

</script>

</head>

<body>

<div>

<p>

Knowledge

Once a wise man was crossing a certain mighty river. He wished to amuse himself and began to talk to the boatman.

" Do you know mathmatics? " he asked.

" No, Sir, " replied the boatman.

" Then you have lose one quarter of your life, " said the wise man. " Do you know history? "

" No, Sir, " answered the boat man.

" Then you have lost half of your life, " said the wise man. " Do you know philosophy? "

" I don't know that either, " asid the boatman.

" Then you have lost three quarter of your life. "

Just then a sudden gust of wind overturned the boat.

" Do you know how to swim? " asked the boatman.

" No. " replied the wise man.

" Well then, " replied the boatman, " you have lost your whole life. "

</p>

</div>

</body>

</html>

2．Jquery对象

<head>

$(function () {

alert($("#div1").html());

$("#div1").css("background", "Yellow");//有参数就是设值

});

$(function () {

alert($("#div1").css("border-width")); //无参数就是取值

});

$(function () { $("#txt").val(new Date().toLocaleString()) });

$(function () { alert($("#txt").val()); });

//同理，html和text也一样

</script>

</head>

<body>

Hello,<font color="red" size="18">My Dear Friends!</font>

</div>

</body>

</html>

3．Jquery之each(callback)

<head>

$(function () {

$("input[name=names]").click(function () {

var arr = new Array();

$("input[name=names]:checked").each(function (key, value) {

arr[key] = $(value).val(); //

$("#msgNames").text("共选中" + arr.length + "项:" + arr.join(","));

});

</script>

</head>

<body>

<input type="checkbox" name="names" value="Tom" />Tom

<input type="checkbox" name="names" value="Jim" />Jim

<input type="checkbox" name="names" value="Frankie" />Frankie

</body>

</html>

4．Jquery之array和dictionary

<head>

var arr = [3, 5, 8];

var arr2 = $.map(arr, function (item) { return item * 2 });//map返回值是一个数组

alert(arr2);

var dict = { "Frank": 20, "Lily": 30, "Tom": 40 };

$.each(dict, function (key, value) { alert(key + "的年龄是：" + value) });

//用for循-环写麻烦会很多

var arr = [2, 3, 4];

$.each(arr, function (key, value) { alert(key + "=" + value) });

//key是序号，value是值:0=2; 1=3; 2=4

$.each(arr, function (item) { alert(item) }); //一个参数返回的是key:0 1 2

$.each(arr, function () { alert(this) }); //0个参数返回的是value:2 3 4

var dict = { "Frankie": 20, "Lily": 30, "Tom": 40 };

$.each(dict, function () { alert(this) }); //0个参数的dict返回的也是value

//对于普通数组推荐使用无参的方式，直接返回value

//对于dict风格的，推荐使用key，value对，使用哪个参数用哪个，方便忆。

</script>

</head>

<body>

</body>

</html>

5．Jquery之选择器

<head>

//1 ID选择器$("#div1")→getElementById()

$(function () {

$("#btn").dblclick(function () {

alert("你双击我了！")

});

//2 Tag选择器 $("input")→getElementsByTagName()

$(function () {

$("p").click(function () {

alert("我是P，我快乐！");

});

//3 CSS选择器 $(".error")

$(function () {

$(".warning").click(function () {

alert("这是警告信息！");

});

//4 多条件选择器 $("div,p,span.menuitem")→同时选择div标签，p标签和同时拥有menuitem样式的span标签

//5 JQuery隐式迭代

$(function () {

var elements = $("#btn");

if (elements.length <= 0) {

alert("未找到指定元素");

return;

}

elements.mouseover(function () {

alert("鼠标移上来了。");

});

</script>

.warning

{

color:Red;

background-color:Yellow;

}

</style>

</head>

<body>

<p>Welcome</p>

<p class="warning">请出示有效证件！</p>

</body>

</html>

6．Jquery之相对选择器

<head>

$(function () {

$("#div1").click(function () {

//$("#div1 ul")

$("ul", $(this)).css("background", "Red");

//第二个参数传递一个JQuery对象，则相对于这个对象为基准，进行相对的选择

});

$(function () {

$("#t1 tr").mousemove(function () {

$("td", $(this)).css("background","Yellow");

});

</script>

</head>

<body>

<div>

<ul>

<li>aaaaaaaaaaa</li>

<li>bbbbbbbbbbb</li>

<li>ccccccccccc</li>

</ul>

</div>

<ul>

<li>aaaaaaaaaaa</li>

<li>bbbbbbbbbbb</li>

<li>ccccccccccc</li>

</ul>

</div>

</table>

</div>

</body>

</html>

7．Jquery节点操作

<head>

$(function () {

$("#replace").click(function () {

$("br").replaceWith("<hr />");

});

$(function () {

$("#wrap").click(function () {

$("p").wrap("<font color='red' size='22'></font>");

});

</script>

</head>

<body>

111111111111111111<br />

222222222222222222<br />

333333333333333333<br />

<p>aaaaaaaaaaaaaaaaaa</p>

<p>bbbbbbbbbbbbbbbbbb</p>

<p>cccccccccccccccccc</p>

</body>

</html>

8．Jquery节点遍历

<head>

$(function () {

$("div").mouseover(function () {

//alert($(this).next().text());

// $.each($(this).nextAll("div"), function () {

// $(this).css("background","Yellow");

//});

//一个更加简单的方法,自动进行隐式迭代每个元素

//$(this).nextAll("div").css("background", "Yellow");

//点击行高亮显示效果

//$("div").mouseover(function () {

//$(this).css("background", "Yellow");

//$(this).siblings().css("background", "White");

//以上两句还可以简写为：链式编程

//});

$(this).css("background", "Yellow").siblings().css("background", "White");

});

</script>

</head>

<body>

</body>

</html>

9．Jquery动态创建和删除节点

<head>

$(function () {

var link = $("<a href='#'>Baidu</a>");

$("div:first").append(link);

});

$(function () {

var data = {

"Baidu": "http://www.baidu.com",

"Sina": "http://www.sina.com",

"QQ": "http://www.qq.com"

};

$.each(data, function (key, value) {

var tr = $("<tr><td>" + key + "</td><td><a href=" + value + ">" + key + "</a></td></tr>");

$("#tableSites").append(tr);

});

$(function () {

$("#removeUL").click(function () {

$("ul li.testitem").remove();

});

</script>

.testitem

{

background-color:Yellow;

border-style:solid;

border-width:1px;

}

</style>

</head>

<body>

<div>

</div>

<ul>

<li>aaaaaaaaa</li>

<li class="testitem">bbbbbbbbb</li>

<li>ccccccccc</li>

<li class="testitem">ddddddddd</li>

<li>eeeeeeeee</li>

</ul>

</body>

</html>

10．Jquery最基本的动画效果toggle()

<head>

$(function () {

$("#btn").click(function () {

$("#div1").toggle(1000); //还可以设置参数slow.normal.fast

});

//动态创建元素注意！

$(function () {

var link = $("<a href='http://www.baidu.com' id='link1'>百度</a>");

//$("#link1").text("度娘");

//这样不管用，必须把动态创建的元素添加到界面上以后，才能通过选择器取得他，操作他。

$("body").append(link);

$("#link1").text("度娘");

});

</script>

</head>

<body>

你好你好你好你好你好你好你好你好你好你好你好你好

</div>

</body>

</html>

11．Jquery模拟QQTab效果

<head>

$(function () {

$("#qq li:odd").addClass("body");

$("#qq li:even").addClass("header").click(function () {

$(this).next("li.body").toggle("fast").siblings("li.body").hide("fast");

});

//一进入页面模拟点击

$("#qq li:first").click();

});

$(function () {

//一进入页面模拟点击

$("#qq li:first").click();

});

</script>

ul{list-style-type:none;}

.header{background-color:#F5E078; cursor:pointer;}

.body{border:2px solid Blue;}

</style>

</head>

<body>

</ul>

</body>

</html>

12．Jquery之图片跟着鼠标飞

<head>

$(function () {

$(document).mousemove(function (e) {

$("#fly").css("left",e.pageX).css("top",e.pageY);

});

</script>

</head>

<body>

</div>

</body>

</html>

13．Jquery点击小图显示详细

<head>

//模拟Ajax传递过来的数据

var data = {

"http://t1.qpic.cn/mblogpic/1ff7210271faea4a2f54/160": ["http://t1.qpic.cn/mblogpic/1ff7210271faea4a2f54/460", "Win7 Tips", "test"],

"http://t1.qpic.cn/mblogpic/6fe08dccb883505f6066/160": ["http://t1.qpic.cn/mblogpic/6fe08dccb883505f6066/460", "Andy", "lau"],

"http://t1.qpic.cn/mblogpic/b7d77e290ae69d24f398/160": ["http://t1.qpic.cn/mblogpic/b7d77e290ae69d24f398/460", "CSS", "CSSSprites"]

};

//界面加载时创建所有的图片

$(function () {

$.each(data, function (key, value) {

var smllImg = $("<img src='" + key + "'/>"); //创建小图

smllImg.attr("bigmappath", value[0]);

smllImg.attr("name", value[1]);

smllImg.attr("prop", value[2]);

//添加事件

smllImg.mousemove(function (e) {

$("#detailsImg").attr("src", $(this).attr("bigmappath"));

$("#detailsName").text("Name：êo" + $(this).attr("name"));

$("#detailsHeight").text("Prop：êo" + $(this).attr("prop"));

//修改位置

$("#details").css("left", e.pageX).css("top", e.pageY).css("display", "");

});

$("body").append(smllImg);

});

//关闭按钮

$("#close").click(function () {

$("#details").css("display", "none");

});

</script>

</head>

<body>

</div>

</body>

</html>

14．Jquery事件冒泡

<head>

$(function () {

$("#p1").click(function () { alert("p1被电了！"); });

$("#td1").click(function () { alert("td1被电了！"); });

$("#tr1").click(function () { alert("tr1被电了！"); });

$("#tb1").click(function () { alert("tb1被电了！"); });

});

</script>

</head>

<body>

<p onclick="alert('Click P')">I am a P,Click me</p>

</td>

</tr>

</table>

<p id="p1">Click Me.</p>

</td>

</tr>

</table>

</body>

</html>

15．Jquery一次性事件

<head>

$(function () {

$("#bind").bind("click", function () { alert("请猛击); });

//一次性事件,发生一次即移除该事件 $("#one").one("click", function () { alert("你只能点我一次！"); });

});

</script>

</head>

<body>

</body>

</html>

16．Jquery之Hover()函数

<head>

$(function () {

$("p").mouseenter(function () {

$(this).text("客官来了?");

}).mouseleave(function () {

$(this).text("大爷慢走！");

});

//合成函数，相当于把两个匿名函数传进来就行了。 $("p").hover(function () { $(this).text("客官来了？"); }, function () { $(this).text("大爷慢走！"); });

});

</script>

</head>

<body>

</body>

</html>

17．Jquery另类选择器

<head>

$(function () {

$("#getValue").click(function () {

alert($(":radio[name=gender]:checked").val());

});

$(function () {

$("#setValue").click(function () {

$(":radio[name=gender]").val(["保密"]);

$(":checkbox").val(["篮球", "桌球"]);

$(":checkbox[value=羽毛球]").attr("checked", true);

});

</script>

</head>

<body>

</body>

</html>

18．Jquery行高亮显示

<head>

$(function () {

$("table tr").mouseenter(function () {

$(this).addClass("highlight").siblings().removeClass("highlight") ;

});

</script>

.highlight{ background-color:Yellow;}

</style>

</head>

<body>

<table>

<tr><td>aaaaaaaaaaaaaaaaaaaaaaaaa</td><td>bbbbbbbbbbbbbbbbbbbbbbbbb</td></tr>

<tr><td>ccccccccccccccccccccccccc</td><td>ddddddddddddddddddddddddd</td></tr>

<tr><td>eeeeeeeeeeeeeeeeeeeeeeeee</td><td>fffffffffffffffffffffffff</td></tr>

<tr><td>ggggggggggggggggggggggggg</td><td>hhhhhhhhhhhhhhhhhhhhhhhhh</td></tr>

<tr><td>iiiiiiiiiiiiiiiiiiiiiiiii</td><td>jjjjjjjjjjjjjjjjjjjjjjjjj</td></tr>

<tr><td>kkkkkkkkkkkkkkkkkkkkkkkkk</td><td>lllllllllllllllllllllllll</td></tr>

</table>

</body>

</html>

19．Jquery之歌曲选择

<head>

$(function () {

$("#selectAll").click(function () {

$("#playlist :checkbox").attr("checked", true);

});

$("#selectNone").click(function () {

$("#playlist :checkbox").attr("checked", false);

});

$("#reverse").click(function () {

$("#playlist :checkbox").each(function () {

//设置成与它相反的值

$(this).attr("checked", !$(this).attr("checked"));

});

</script>

</head>

<body>

<input type="checkbox" />爱情三十六计-蔡依林<br />

</div>

</body>

</html>

20．Jquery 滤镜切换（仅适用IE）

<head>

$(function () {

$("#btn").click(function () {

$(document.body).toggleClass("blackwhite");

});

</script>

.blackwhite{ filter:Gray;}

</style>

</head>

<body>

<br />

</body>

</html>

21．Jquery之 body中元素高亮显示

<head>

$(function () {

$("body *").click(function () {

$(this).addClass("highlight").siblings().removeClass("highlight");

});

</script>

.highlight{ background-color:Yellow;}

</style>

</head>

<body>

<p>pppppppppppppppppppp</p>

<div>dfdfdfdfddddddddddfdfd</div>

<span>tttttttttttttttttttttttttttt</span>

</body>

</html>

22．Jquery 微软风格搜索框

<head>

$(function () {

$("#kw").val("请输入密码").addClass("waiting").blur(function () {

if ($(this).val() == "") {

$("#kw").val("请输入密码").addClass("waiting");

}

}).focus(function () {

if ($(this).val() == "请输入密码") {

$("#kw").val("").removeClass("waiting");

}

});

</script>

.waiting{ color:Gray;}

</style>

</head>

<body>

</body>

</html>

23．Jquery控制样式

<head>

$(function () {

$("#btnAdd").click(function () {

$("#div1").addClass("big").addClass("back"); ;

});

$("#btnRemove").click(function () {

$("#div1").removeClass("back");

});

$("#btnToggle").click(function () {

$("#div1").toggleClass("back");

});

$("#swithch").click(function () {

$(document.body).toggleClass("night");

});

$("#filter").click(function () {

$(document.body).toggleClass("filter");

});

</script>

.filter{filter:Gray;}

.big{ font-size:xx-large; color:Purple; }

.back{ background-color:Red;}

.night{ background-color:Black;}

</style>

</head>

<body>

<br />

</body>

</html>

24．Jquery版本计算器

<head>

$(function () {

$("#add").click(function () {

var value1 = $("#txt1").val();

var value2 = $("#txt2").val();

var value3 = parseInt(value1, 10) + parseInt(value2, 10);

$("#txt3").val(value3);

});

</script>

</head>

<body>

</body>

</html>

25．Jquery版评分控件

<head>

$(function () {

$("#rating td").html("<img src='../images/starEmpty.jpg' />").mouseenter(function () {

$("#rating td").html("<img src='../images/starFull.jpg' />");

$(this).nextAll().html("<img src='../images/starEmpty.jpg' />");

});

</script>

</head>

<body>

</table>

</body>

</html>

26．Jquery版球队选择

<head>

$(function () {

$("#ul1 li").mouseover(function () {

$(this).css("cursor", "pointer").css("background", "Red");

$(this).css("cursor", "pointer").siblings().css("background", "White");

//$(this).css("background", "Red").siblings().css("background", "White");

//一句话代替上面2句，链式编程

}).click(function () {

$(this).css("background","White").appendTo("#ul2");

});

</script>

</head>

<body>

</ul>

</body>

</html>

27．Jquery版权限选择

<head>

$(function () {

$("#moveToRight").click(function () {

var items = $("#select1 option:selected").remove();

$("#select2").append(items);

});

</script>

</head>

<body>

</select>

<input type="button" value=">" id="moveToRight" style="float:left; width:100%;" />

<input type="button" value=">>" style="float:left; width:100%;" onclick="moveAll(document.getElementById('select1'), document.getElementById('select2'))" />