Jquery总结

最新推荐文章于 2024-05-03 11:47:20 发布
最新推荐文章于 2024-05-03 11:47:20 发布
阅读量244 收藏
点赞数
文章标签： javascript xhtml ViewUI

1．Jquery之Hello World

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script type="text/javascript" src="js/jquery-1.4.2.js"></script>

<script type="text/javascript">

//完整的写法

$(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>

<input type="text" id="txt" />

<input type="button" id="btn" value="Click Me" />

<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对象

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script type="text/javascript" src="js/jquery-1.4.2.js"></script>

<script type="text/javascript">

$(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>

<div id="div1" style="border-width:1px; border-style:solid;">

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

</div>

<input type="text" id="txt" />

</body>

</html>

 

 

 

 

3．Jquery之each(callback)

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="js/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(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

<p id="msgNames"></p>

</body>

</html>

 

 

4．Jquery之array和dictionary

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="js/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript">

/*

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之选择器

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="js/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript">

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

<style type="text/css">

.warning

{

color:Red;

background-color:Yellow;

}

</style>

</head>

<body>

<input type="button" id="btn" value="双击我给你好看" />

<p>Welcome</p>

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

<p class="warning">请勿触碰?！</p>

<input type="button" value="点我呀" class="warning" />

</body>

</html>

 

 

6．Jquery之相对选择器

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="js/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(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>

<div id="div1">

<ul>

<li>aaaaaaaaaaa</li>

<li>bbbbbbbbbbb</li>

<li>ccccccccccc</li>

</ul>

</div>

<div id="div2">

<ul>

<li>aaaaaaaaaaa</li>

<li>bbbbbbbbbbb</li>

<li>ccccccccccc</li>

</ul>

</div>

 

<table id="t1">

<tr><td>tt</td><td>tt</td></tr>

<tr><td>aa</td><td>bb</td></tr>

<tr><td>aa</td><td>bb</td></tr>

</table>

</div>

</body>

</html>

 

 

7．Jquery节点操作

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="js/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(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>

<input type="button" value="ReplaceWith" id="replace" />

<input type="button" value="Wrap" id="wrap" />

</body>

</html>

 

 

8．Jquery节点遍历

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="js/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(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>

<div>aaa</div>

<div>bbb</div>

<div>ccc</div>

<div>ddd</div>

<div>eee</div>

<div>aaa</div>

<div>bbb</div>

<div>ccc</div>

<div>ddd</div>

<div>eee</div>

<div>aaa</div>

<div>bbb</div>

<div>ccc</div>

<div>ddd</div>

<div>eee</div>

<div>aaa</div>

<div>bbb</div>

<div>ccc</div>

<div>ddd</div>

<div>eee</div>

</body>

</html>

 

 

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="js/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(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>

 

<style type="text/css">

.testitem

{

background-color:Yellow;

border-style:solid;

border-width:1px;

}

</style>

</head>

<body>

<div>

 

</div>

 

<table id="tableSites"></table>

 

<ul>

<li>aaaaaaaaa</li>

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

<li>ccccccccc</li>

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

<li>eeeeeeeee</li>

</ul>

<input type="button" value="删除ul中的一部分" id="removeUL" />

</body>

</html>

 

 

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(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 id="div1" style="border:5px dashed Red;">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

</div>

<input type="button" value="Click" id="btn" />

</body>

</html>

 

 

 

11．Jquery模拟QQTab效果

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(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>

<style type="text/css">

ul{list-style-type:none;}

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

.body{border:2px solid Blue;}

</style>

</head>

<body>

<ul id="qq">

<li>我的好友</li>

<li>张三<br />李四<br />王麻子<br /></li>

<li>我的同学</li>

<li>拉登<br />奥巴马<br />令狐冲<br /></li>

<li>陌生人</li>

<li>罗玉凤<br />陈冠希<br />刘翔<br /></li>

</ul>

</body>

</html>

 

 

12．Jquery之图片跟着鼠标飞

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

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

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

});

});

</script>

</head>

<body>

<div id="div1">

<img id="fly" style="position:absolute;" src="http://www.baidu.com/img/baidu_sylogo1.gif" width="300px" height="200px" alt="图片跟着鼠标飞" />

</div>

</body>

</html>

 

 

13．Jquery点击小图显示详细

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript">

//模拟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 id="details" style="position:absolute; display:none; border-bottom:1px dashed Blue;">

<img alt="" src="" id="detailsImg" />

<p id="detailsName"></p>

<p id="detailsHeight"></p>

<p><input type="button" value="关闭" id="close" /></p>

</div>

</body>

</html>

 

14．Jquery事件冒泡

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

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

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

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

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

});

</script>

</head>

<body>

<table onclick="alert('Click Table')">

<tr onclick="alert('Click TR')">

<td onclick="alert('Click TD')">

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

</td>

</tr>

</table>

 

<table id="t1">

<tr id="tr1">

<td id="td1">

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

</td>

</tr>

</table>

</body>

</html>

 

 

15．Jquery一次性事件

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

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

 

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

});

</script>

</head>

<body>

<input type="button" id="bind" value="Bind" />

<input type="button" id="one" value="One" />

</body>

</html>

 

 

16．Jquery之Hover()函数

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

/*

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

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

}).mouseleave(function () {

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

});

*/

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

});

</script>

</head>

<body>

<h1><p>你好。</p></h1>

</body>

</html>

 

 

17．Jquery另类选择器

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(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>

<input type="radio" value="男" name="gender" />男<br />

<input type="radio" value="女" name="gender" />女<br />

<input type="radio" value="保密" name="gender" />保密<br />

 

<input type="checkbox" value="篮球¨°" />篮球<br />

<input type="checkbox" value="足球¨°" />足球<br />

<input type="checkbox" value="排球¨°" />排球<br />

<input type="checkbox" value="桌球" />桌球<br />

<input type="checkbox" value="羽毛球" />羽毛球<br />

 

<input type="button" value="设值" id="setValue" />

<input type="button" value="取值" id="getValue" />

</body>

</html>

 

18．Jquery行高亮显示

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

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

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

});

});

</script>

<style type="text/css">

.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之歌曲选择

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(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>

<div id="playlist">

<input type="checkbox" />女人如花-周华健<br />

<input type="checkbox" />再见-张震岳<br />

<input type="checkbox" />菊花台-周杰伦<br />

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

<input type="checkbox" />笔记-周笔畅<br />

</div>

<input type="button" id="selectAll" value="全选" />

<input type="button" id="selectNone" value="全不选" />

<input type="button" id="reverse" value="反选" />

</body>

</html>

 

 

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

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

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

});

});

</script>

<style type="text/css">

.blackwhite{ filter:Gray;}

</style>

 

</head>

<body>

<img alt="" src="http://t1.qpic.cn/mblogpic/6fe08dccb883505f6066/460" />

<br />

<input type="button" id="btn" value="滤镜切换" />

</body>

</html>

 

 

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

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

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

});

});

</script>

<style type="text/css">

.highlight{ background-color:Yellow;}

</style>

</head>

<body>

<input type="text" />

<p>pppppppppppppppppppp</p>

<div>dfdfdfdfddddddddddfdfd</div>

<div>77777777777777777777777</div>

<span>sssf000000000000000000000000</span>

<span>tttttttttttttttttttttttttttt</span>

</body>

</html>

 

 

22．Jquery 微软风格搜索框

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

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

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

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

}

}).focus(function () {

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

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

}

});

});

</script>

 

<style type="text/css">

.waiting{ color:Gray;}

</style>

</head>

<body>

<input type="text" id="kw" /><input type="button" value="登陆" />

</body>

</html>

 

 

 

23．Jquery控制样式

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(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>

 

<style type="text/css">

.filter{filter:Gray;}

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

.back{ background-color:Red;}

.night{ background-color:Black;}

</style>

</head>

<body>

<div id="div1"><h1>你好啊！</h1></div>

<input type="button" id="btnAdd" value="add" />

<input type="button" id="btnRemove" value="remove" />

<input type="button" id="btnToggle" value="切换" />

<br />

<input type="button" id="swithch" value="开关灯" />

<img alt="" src="http://t1.qpic.cn/mblogpic/6fe08dccb883505f6066/460" />

<input type="button" value="灰色滤镜" id="filter" />

</body>

</html>

 

 

24．Jquery版本计算器

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(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>

<input type="text" id="txt1" />+<input type="text" id="txt2" /><input type="button" id="add" value=" = " />

<input type="text" id="txt3" />

</body>

</html>

 

 

25．Jquery版评分控件

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(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 id="rating">

<tr><td></td><td></td><td></td><td></td><td></td></tr>

</table>

</body>

</html>

 

 

26．Jquery版球队选择

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(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 id="ul1" style="float:left; width:30%; border:2px dashed Blue;">

<li>国足</li>

<li>朝鲜</li>

<li>日本</li>

<li>巴西</li>

<li>美国</li>

</ul>

<ul id="ul2" style="float:left; width:30%; border:2px dashed Blue;"></ul>

</body>

</html>

 

 

27．Jquery版权限选择

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

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

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

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

});

});

</script>

</head>

<body>

<select id="select1" style="float:left; width:100px; height:120px;" multiple="multiple">

<option>添加</option>

<option>删除</option>

<option>修改</option>

<option>查询</option>

<option>打印</option>

</select>

<div style="float:left; width:5%;">

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

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

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

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

</div>

<select id="select2" style="float:left; width:120px; height:120px;" multiple="multiple"></select>

</body>

</html>

 

 

28．Jquery属性过滤器

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

$("input[value=显示选中项]").click(function () {

alert($("input:checked").val());

});

});

 

/*

$(function () {

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

alert($("input:checked").val());

});

});*/

</script>

</head>

<body>

<input type="checkbox" value="北京" />北京<br />

<input type="checkbox" value="南京" />南京<br />

<input type="checkbox" value="东京" />东京<br />

<input type="checkbox" value="西安" />西安<br />

<input type="checkbox" value="开封" />开封<br />

<input type="button" id="btn" value="显示选中项" />

</body>

</html>

 

 

29．Jquery版文本非空验证

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

$(":text").blur(function () { //当焦点离开时触发                 if ($(this).val().length <= 0) {

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

}

else {

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

}

});

});

</script>

</head>

<body>

<input type="text" /><input type="text" /><input type="text" /><input type="text" />

<input type="text" /><input type="text" /><input type="text" /><input type="text" />

</body>

</html>

 

 

30．Jquery版无刷新评论

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

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

var title = $("#title").val();

var body = $("#txtBody").val();

//var tr = $("tr><td>" + title + "</td><td>" + body + "</td></tr>");

var tr = $("<tr><td>" + title + "</td><td>" + body + "</td></tr>");

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

//清空title和body中的数据

$("#title").val("");

$("#txtBody").val("");

});

});

</script>

</head>

<body>

<p>我的第一个帖子，哈哈！</p>

<table id="tbComment">

<tr><td>匿名</td><td>沙发！</td></tr>

</table>

<input type="text" id="title" /><br />

<textarea rows="*" cols="*" id="txtBody"></textarea><br />

<input type="button" id="btnPost" value="发表评论" /><br />

</body>

</html>

 

 

31．Jquery版选择过滤器

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

$("#table1 tr:first").css("fontSize", "50"); //第一行

$("#table1 tr:last").css("color", "Red"); //最后一行

$("#table1 tr:gt(0):lt(3)").css("fontSize", "50"); //前三名

$("#table1 tr:gt(0):even").css("background","Yellow");//奇数行背景色，gt(0)去掉表头

});

</script>

</head>

<body>

<table id="table1">

<tr><td>姓名</td><td>成绩</td></tr>

<tr><td>Frankie</td><td>100</td></tr>

<tr><td>Tom</td><td>90</td></tr>

<tr><td>Lily</td><td>80</td></tr>

<tr><td>Lucy</td><td>70</td></tr>

<tr><td>Green</td><td>60</td></tr>

<tr><td>平均分</td><td>85</td></tr>

</table>

</body>

</html>

 

 

32．Jquery版注册页面

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript">

var leftSeconds = 10;

var intervalID;

$(function () {

$("#btnReg").attr("disabled", true); //用attr设置或者取值JQuery没有封装的属性

intervalID = setInterval("countDown()", 1000);

});

 

 

function countDown() {

if (leftSeconds <= 0) {

$("#btnReg").val("同意");

$("#btnReg").attr("disabled", false);

clearInterval(intervalID);

return;

}

leftSeconds--;

$("#btnReg").val("还剩" + leftSeconds + "秒");

}

</script>

</head>

<body>

<textarea rows="20" cols="50">111111aaaaaaaaaaavvvvvvvvvddddddddddwwwwwwwwwwwerrrrrrrreeeeeeee</textarea>

<input type="button" value="注册" id="btnReg" />

</body>

</html>

weixin_34363171
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery总结
10-24
1、查找元素的方法多种多样，非常灵活 2. 拥有隐式迭代特性，因此不再需要手写for循环了。 3. 完全没有兼容性问题。 4. 实现动画非常简单，而且功能更加的强大。 5. 代码简单、粗暴。
在Ubuntu20.04使用微信和企业微信
qq_19394273的博客
10-29 3230
在Ubuntu20.04使用微信和企业微信 安装deepin 修改软件源为阿里镜像仓库： 1) 备份原始文件 sudo cp /etc/apt/sources.list /etc/apt/sources.list,bak 2) 修改文件 通过sudo gedit /etc/apt/sources.list打开文件，将以下内容拷贝至文件后保存关闭 deb http://mirrors.aliyun.com/ubuntu/ focal main restricted universe multiver
【渝粤教育】国家开放大学2018年春季 0463-22T英语语音 参考试题
渝粤题库
12-24 190
科目编号：0463 座位号： 2017─2018学年度第二学期期末考试 英语语音笔试题 (开卷) 2018年7月 根据读音规则为下列单词注音 （10分） Saturday 2. notify demand 4. country 5. answer
jQuery总结
weixin_44327380的博客
10-15 622
jQuery总结一、jQuery是什么？二、jQuery 核心函数三、jQuery 对象和 dom 对象区分四、jQuery 选择器1.基本选择器2.层级选择器3.过滤选择器五、jQuery 元素筛选 一、jQuery是什么？ jQuery，顾名思义，也就是 JavaScript 和查询（Query），它就是辅助 JavaScript 开发的 js 类库。 jQuery 核心思想！！！ 它的核心思想是 write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。 jQue
jQuery总结1
08-03
1、代码示例 2、执行代码 1、基本介绍 2、代码示例 1、 JS 对象与 jQ 对象的区别 2、转换原因 3、转换语法 4、代码示例 5、执行结果 6、总结
JQuery入门，JQuery总结
01-05
jquery jQuery是一个广泛使用的JavaScript库，它可以极大地简化JavaScript编程，让开发者jQuery是一个广泛使用的JavaScript库，它可以极大地简化JavaScript编程，让开发者更加便捷、高效地编写代码。jQuery的主要...
JQuery总结内容
01-16
JQuery自己平常总结积累的内容，供大家一起共同分享学习。
element-ui的bug记录
nick_zhang的博客
04-29 418
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 819
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。
最新发布
XING的博客
05-03 667
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。数据库作为系统数据储存平台，实现了基于B/S结构的Web系统。界面简洁，操作简单。采用M（model）V（view）C（controller）三层体系结构，通过。
bpmn-js推荐几款常用的插件
飞云先生
04-30 87
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
基于React实现B站评论区
stu_kk的博客
05-02 774
使用React构建了一个仿照B站基本的前端评论系统，实现了动态加载、排序、添加和删除评论的基本功能。通过React的状态管理和事件处理机制，实现了交互式的用户体验。但是在实际应用中，还需考虑与后端接口的交互、错误处理、分页加载、以及更复杂的用户交互逻辑。
表格隔行变色
weixin_54339833的博客
05-02 276
2.$(document).ready() 是 jQuery 中的一个函数，它确保在文档结构（DOM）加载完成后执行指定的代码。与原生 JavaScript 的 window.onload 不同，$(document).ready() 会在 HTML 文档结构被加载和解析完成后立即执行，而无需等待样式表、图片和子框架的完成加载。if (index % 2 === 0) { // 偶数行。if (i % 2 === 0) { // 偶数行。// 可以省略，因为默认背景色通常是白色。
用Typescript写自动化工作流
联蔚盘云的博客
04-29 1117
acao 的命令还有一些其他用法，比如指定执行某个 job 或者忽略依赖 通过命令行参数的方式注入等等，详细使用方式可以查看文档这个项目最近也在持续更新中，后续也会支持更多的预设，web ui 的操作方式也在计划中小伙伴想参与预设的开发也欢迎 pr 呀。
echarts+百度地图如何定义边界线
abc8002117034的博客
04-30 281
5.setOption里面的参数option.series是echarts散点图的配置项,option.bmap是百度地图的配置项，比如center是当前地图的中心点，zoom是缩放数值，roam是是否可以缩放，mapStyle是地图的样式。3.方法getCenterPoint是获取当前区域中心点的经纬度，我们将会在区域的中心点显示区域名称和具体数值。4.方法convertData返回的是地图上红色散点里面的数据，是对idata的数据格式做的一层转换。2.变量styleJson是地图的样式，可以去。
redux快速入门
qq_73270720的博客
04-29 317
简单的加减案例,学会redux快速入门
小区服务|基于SprinBoot+vue的小区服务管理系统(源码+数据库+文档)
weixin_66413741的博客
05-01 1038
这次开发的小区服务管理系统对安保管理、安保分配管理、客服聊天管理、字典管理、房屋管理、反馈管理、论坛管理、公告管理、反馈处理管理、住户管理、员工管理、管理员管理等进行集中化处理。经过前面自己查阅的网络知识，加上自己在学校课堂上学习的知识，决定开发系统选择B/S模式这种高效率的模式完成系统功能开发。这种模式让操作员基于浏览器的方式进行网站访问，采用的主流的Java语言这种面向对象的语言进行小区服务管理系统程序的开发，在数据库的选择上面，选择功能强大的Mysql数据库进行数据的存放操作。
jQuery echarts
02-03
jQuery是一个快速、简洁的JavaScript库，它...总结起来，jQuery是一个用于简化JavaScript操作的库，而echarts是一个用于可视化图表展示的库。它们可以结合使用，通过jQuery来操作DOM元素，实现与echarts的交互效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值