JQuery02
一：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>
<script 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不一定可以读取出来，用户可以清除掉了。同时可以被禁用。
JQuery02的更多相关文章
- 前端之jQuery02
文档操作 重点:创建标签,jQuery里面没有这个方法 内部(子标签) 添加到指定元素内部后面 $(A).append(B): // B作为A的最后一个儿子元素:(把B追加到A) $(A).appen ...
- 【jQuery02】点击标题面板显示内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【JQuery-02】事件绑定多次造成多次执行
http://blog.csdn.net/always_littlesun/article/details/52594548
随机推荐
- Java虚拟机8：虚拟机性能监控与故障处理工具
前言 定位系统问题的时候,知识.经验是基础,数据是依据,工具是运用知识处理数据的手段.这里说的数据包括:运行日志.异常堆栈.GC日志.线程快照.堆转储快照等.经常使用适当的虚拟机监控和分析的工具可以加 ...
- Razor.js，基于JavaScript的Razor实现
哈罗大家好,之前造了JS模板轮子Otmpl,虽然勉强算不错,但是和MVC Razor的简洁优雅相比,简直是惨不忍睹.经过几天的研究,终于在参考国外一些牛人的代码后,展现出第一版,欢迎各位园友拍砖讨论. ...
- printf背后的故事
printf背后的故事 说起编程语言,C语言大家再熟悉不过.说起最简单的代码,Helloworld更是众所周知.一条简单的printf语句便可以完成这个简单的功能,可是printf背后到底做了什么事情 ...
- 使用Guava提供的transform批量转换
实际开发了,为了快速查询,我们会把日期以Long类型的方式存储到数据库中,比如20000000000000L,但显示的时候,要完整的日期,即yyyy-MM-dd的格式显示. 这个时候,我们就可以使用C ...
- SWF READER 破解日志。
网上传闻swf reader是破解最厉害的神器,可以内存抓取+doSWF反编译.所以去官网下了一个: SWF_Reader_2.3 不出所料,demo版本没有反编译的功能.网上搜到一个哥们尝试了下: ...
- NodeJS系列~第四个小例子，NodeJs处理Get请求和Post请求
返回目录 说在前 对于HTTP请求来说,我们通常使用的是Get和Post,除此之外还有put,delete等,而对于get来说,比较lightweight,只是对字符串的传输,它会被添加到URL地址里 ...
- salesforce 零基础学习（二十八）使用ajax方式实现联动
之前的一篇介绍过关于salesforce手动配置关联关系实现PickList的联动效果,但是现实的开发中,很多数据不是定死的,应该通过ajax来动态获取,本篇讲述通过JavaScript Remoti ...
- iOS-MVC模式
提到ios中的mvc不得不提2011秋季斯坦福课程的老头,他的iphone开发公开课是所有描述ios中mvc模式最为准确并且最为浅显易懂的. 模型-视图-控制器 这个模式其实应该叫做MCV,用控制器把 ...
- javaweb回顾第十二篇监听器
前言:在web应用中,有时候你想在web应用程序启动或关闭的时候执行一些任务,或者你想见他Session的创建和关闭等你就可以通过监听器来实现.那么Servlet来8个监视器接口,下面一一讲解一下. ...
- Enterprise Solution 应用程序开发框架培训
一.系统架构 C# .NET 4.0 + Win Form + SQL Server 2005 二.五大核心模块 (菜单设计器Menu Designer,查询设计器Query Designer,报表设 ...