一: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不一定可以读取出来,用户可以清除掉了。同时可以被禁用。
相关推荐
【锋利的jquery】高清PDF 01,共6部分,全书190M。
Jquery技术的基础详细学习笔记,总结了Jquery技术的各个知识点,可以用来复习以及对基础知识的巩固,对新人的学习很有帮助。
最后感谢Shawphy提供1.4.1版,jehn提供1.5.2版,愚人码头提供1.7版 jquery1.7手册中文 CHM文档,编译于2012.02.09,也算是最新的jQuery参考文档了。内容 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
在本资源中,“精通JavaScript+jQuery_02-10实例”涵盖了JavaScript和jQuery的多个核心章节,旨在帮助用户深入理解和熟练运用这两种强大的Web开发工具。JavaScript是一种广泛应用于客户端浏览器的脚本语言,而jQuery...
java_ajax_JQuery_day02.pdf
jquery1.7手册中文 CHM文档,编译于2012.02.09,也算是最新的jQuery参考文档了。内容比较丰富,查询方便,放在手边,可作为jquery速查手册,包括jQuery核心、选择器、属性、筛选器、文档处理、css、事件处理、效果、...
jquery文档02
《jQuery基础教程第四版》是学习JavaScript库jQuery的重要参考资料,其中"Book02_jQuery_选择元素"这一章节主要探讨了如何在DOM(文档对象模型)中高效地选取和操作元素,这是jQuery的核心功能之一。在jQuery中,...
2012/03/17 02:57 232,361 jquery-1.4.3-vsdoc.js 2012/03/17 02:57 77,746 jquery-1.4.3.min.js 2012/03/17 02:57 233,419 jquery-1.4.4-vsdoc.js 2012/03/17 02:57 78,601 jquery-1.4.4.min.js 2012/03/17 02:57 ...
### jQuery基础教程02知识点详解 #### 一、jQuery简介 - **定义**:jQuery是一款优秀的JavaScript库,它简化了HTML文档遍历、事件处理、动画等操作,并且提供了强大的DOM操作能力。 - **特点**: - **轻量级**:...
jquery1.7手册中文 CHM文档,编译于2012.02.09,也算是最新的jQuery参考文档了。内容比较丰富,查询方便,放在手边,可作为jquery速查手册,包括jQuery核心、选择器、属性、筛选器、文档处理、css、事件处理、效果、...
《jQuery 1.4.1 官方中文参考文档》是开发者们学习和掌握jQuery库的重要资源,尤其对于中文环境下的开发人员来说,这是一份非常实用的指南。该文档于2010年2月14日更新,旨在帮助用户理解和应用jQuery 1.4.1版本的...
{ "id": "2", "cell": ["2", "Jane Smith", "2022-01-02"] }, // ... ] } ``` ### 4. 功能扩展 jQuery Grid 提供了丰富的插件和事件,可以实现更多功能: - **搜索/过滤**:使用 `filterToolbar` 或 `...
jQuery快速开发资料jQuery案例 代码 素材 笔记 作业资料,学习资料 01-getElementById获取元素.html 02-getElementsByTagName获取某些元素.html 03-H5新增获取元素方式(1).html 04-获取特殊元素.html 05-事件三要素....
[HTML][jQuery]_02._jQuery的選擇器
《jQuery基础教程(第2版)》作为《jQuery基础教程》的升级版,涵盖了jQuery 1.3的全部新特性,特别是新增了介绍jQuery UI(jQuery官方用户界面插件库)的内容。《jQuery基础教程(第2版)》前6章以通俗易懂的方式介绍了...
在深入探讨jQuery相关的知识点之前,我们首先了解一下jQuery是什么。jQuery是一个快速、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。jQuery的设计目标是使JavaScript编程变得更加简单...
04-02-2011 Attributes Attributes str.attr( name ) $.attr( name, val ), .attr( map ), .attr( name, fn(index, attr) ) $.removeAttr( name ) Class $.addClass( class ), .addClass( fn(index, class) ) bool....
'2022-02-14': '情人节' } }); }); ``` 这个例子中,我们使用`$(document).ready()`函数确保在DOM加载完成后初始化日历。通过`#calendar`选择器找到对应的DOM元素,并调用`.calendar()`方法来实例化插件。`...
在给定的“高级搜索Jquery插件2015年02月28日版本”中,我们关注的是如何在复杂的网页结构中,特别是涉及到嵌套母板页的情况下,实现高效且准确的搜索功能。 母板页(Master Page)是ASP.NET框架中的一种功能,允许...