您的位置：首页 > Web前端 > JQuery

JQuery02

2016-01-30 00:00 645 查看

一：JQuery知识点

*:JQuery的dom操作

*：动态创建dom节点

比如动态创建表格等，在js里面进行完成。

*删除节点

这里面的删除就是将其放在了一个地方，并不是真的删除，之后可以使用。

*：document方法

1:.val()可以获取到文本框里面的值，若括号里面有值则直接为赋值。

Eg:加法计算器

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.4.2-vsdoc.js"></script>
<script src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function() {
$("#buttons").click(function() {
var tex1 = $("#tex1").val();
var tex2 = $("#tex2").val();
var tex3 = parseInt(tex1, 10) + parseInt(tex2,10);
$("#tex3").val(tex3);
});
});
</script>
</head>
<body>
<input type="text" id="tex1"/><input type="button" value="+"/><input type="text" id="tex2"/>
<input type="button" value="=" id="buttons"/><input type="text" id="tex3"/>
</body>
</html>

2:可以通过attr属性来进行隐藏。

3：在jq里面通过下面的这种形式

$(function(){});这是把一个$()是让其在ready的时候执行，若是没有这个就是定义了一个方法。

Eg:阅读说明书

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.4.2-vsdoc.js"></script>
<sc
3ff0
ript src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
var leftSeconds = 10;
var intarvalId;
$(function() {
$("#buttons").attr("disabled", true);
intarvalId = setInterval("CountDom()", 1000);
});
function CountDom() {
if(leftSeconds<=0) {
$("#buttons").val("同意");
$("#buttons").attr("disabled", false);
clearInterval(intarvalId);
return;
}
leftSeconds--;
$("#buttons").val("请仔细阅读" + leftSeconds + "秒");
}
</script>
</head>
<body>
<textarea>在使用前请仔细阅读说明书。</textarea>
<input type="button" id="buttons" value="同意"/>
</body>
</html>

Eg：无刷新评论

Eg:：文本颜色变化

代码：

Eg:

代码：

*：节点替换

*:样式的操作

*：练习代码

选中的高亮显示，里面就是有如何在jq里面添加css样式。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.4.2-vsdoc.js"></script>
<script src="js/jquery-1.4.2.js"></script>
<style type="text/css">
#tables {
margin: auto;
}
</style>
<script type="text/javascript">
//$(function() {
//    $("#tables tr:first").css("font-size", 30);
//    $("#tables tr:last").css("color", "red");
//    $("#tables tr:gt(0) :lt(6) ").css("font-size", 28);
//    $("#tables tr:gt(0):even").css("background","red");
//});
$(function() {
$("#tables tr").click(function() {
$("td", $(this).css("background","red"));
});
});

</script>
</head>
<body>
<table id="tables">
<tr><td>姓名</td><td>年龄</td></tr>
<tr><td>小张</td><td>2</td></tr>
<tr><td>小红</td><td>43</td></tr>
<tr><td>小路</td><td>23</td></tr>
<tr><td>小李</td><td>23</td></tr>
</table>
</body>
</html>

*取的RadioButton操作

*：实例 [全选和反选]

01：这里主要的就是将以前学习到的知识，得以回顾，这样子好记忆。

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.4.2-vsdoc.js"></script>
<script src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function() {
$("#setAll").click(function() {
$("#List :checkbox").attr("checked",true);    //这是div下面的button
});
$("#notsetAll").click(function() {
$("#List :checkbox").attr("checked",false);
});
$("#reverse").click(function() {
$("#List :checkbox").each(function() {
$(this).attr("checked",!$(this).attr("checked"));
});
});
});
</script>
</head>
<body>
<div id="List">
<input type="checkbox"/>篮球1<br/>
<input type="checkbox"/>足球2<br/>
<input type="checkbox"/>篮球3<br/>
<input type="checkbox"/>篮球4<br/>
<input type="checkbox"/>篮球5<br/>
</div>
<input type="button" value="全选" id="setAll"/>
<input type="button" value="全不选" id="notsetAll"/>
<input type="button" value="反选" id="reverse"/>
</body>
</html>

*：事件

*:jquery里面的click事件就是封装的bind函数，代表点击事件，

*:hover函数，这里就是监听鼠标的事件。

*:超链接的禁用

<script type="text/javascript">
$(function() {
$("a").click(function (e) {
alert("今天Link不行了");
e.preventDefault(0);  //表示禁用了链接
});
});
</script>
<a href="Hover.html">Link</a>

*：Cookic

定义：它是保存在浏览器上的内容，用户在这次浏览页面向Cookic中保存文本内容，下次在访问的时候就可以取出上次保存的内容，这样子就得到了上次“记忆”内容。Cookic就是存储在浏览器里面的数据。<可以禁用>

特征：

1:它和域名相关的

《baidu.com的Cookic和taobao.com的Cookic是不一样的。》

2: 域名写入Cookic的总尺寸是有限制的。几千字节

3：Cookic不一定可以读取出来，用户可以清除掉了。同时可以被禁用。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航