jQuery总结02_jq的dom操作+属性操作
一：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, ) + parseInt(tex2,);
$("#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>
<a href="http://images2015.cnblogs.com/blog/679140/201510/679140-20151024204414739-376621517.png">
<img style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="image" src="https://images2015.cnblogs.com/blog/679140/201510/679140-20151024204415567-1450693607.png" alt="image" width="" height="" border=""></a>
2:可以通过attr属性来进行隐藏。
3:在jq里面通过下面的这种形式
(function());这是把一个(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 = ;
var intarvalId;
$(function() {
$("#buttons").attr("disabled", true);
intarvalId = setInterval("CountDom()", );
});
function CountDom() {
if(leftSeconds<=) {
$("#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></td></tr>
<tr><td>小红</td><td></td></tr>
<tr><td>小路</td><td></td></tr>
<tr><td>小李</td><td></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(); //表示禁用了链接
});
});
</script>
<a href="Hover.html">Link</a>
*：Cookic
定义：它是保存在浏览器上的内容，用户在这次浏览页面向Cookic中保存文本内容，下次在访问的时候就可以取出上次保存的内容，这样子就得到了上次“记忆”内容。Cookic就是存储在浏览器里面的数据。<可以禁用>
特征：
1:它和域名相关的
《baidu.com的Cookic和taobao.com的Cookic是不一样的。》
2: 域名写入Cookic的总尺寸是有限制的。几千字节
3：Cookic不一定可以读取出来，用户可以清除掉了。同时可以被禁用。
逻辑应该是清晰的，bug难以隐藏。
依赖最少，易于维护。
错误处理完全根据一个明确的策略。
性能接近最佳，避免代码混乱和无原则的优化。
整洁的代码只做一件事。
jQuery总结02_jq的dom操作+属性操作的更多相关文章
- JQuery处理DOM元素-属性操作
JQuery处理DOM元素-属性操作 //操作元素的属性: $('*').each(function(n){ this.id = this.tagName + n; }) //获取属性值: $('') ...
- jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
- jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...
- 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...
- jQuery-介绍 加载 选择器 样式操作 属性操作 绑定click事件
jQuery - 介绍 加载 选择器 样式操作 属性操作 绑定click事件 注意:以下部分问题不能实现效果,因该是单词拼写错误(少个t)或者没有加引号(“swing”)... jquery介绍 jQ ...
- dom操作 属性操作 样式操作
jQuery DOM操作 1 插入子元素 append('<img>') 插后面 被插入元素调用 appendTo('<img scr="...">') 新 ...
- Dom样式操作-属性操作
1. 对样式进行操作: 1) 以样式(C1,C2等)为最小单位进行修改. className, classList, (以列表形式获得) classList.add("C2"), ...
- DOM模型-属性操作
HTML 元素包括标签名和若干个键值对,这个键值对就称为"属性"(attribute)."属性"本身是一个对象(Attr对象),但是实际上,这个对象极少使用.一 ...
- jQuery-对标签元素 文本操作-属性操作-文档的操作
一.对标签元素文本操作 1.1 对标签中内容的操作 // js var div1 = document.getElementById("div1"); div1.innerText ...
随机推荐
- Flask使用bootstrap为HttpServer添加上传文件功能
关于模态框 使用bootstrap实现点击按钮弹出窗口,简直不要太简单.我们只需要将写好的窗口内容隐藏,然后调用bootstrap的框架即可,简单几行就能完成相关功能实现.... 前提条件是,我们需要 ...
- volatile在外设寄存器基地址定义时的作用
volatile,作用就是告诉编译器不要因优化而省略此指令,必须每次都直接读写其值,这样就能确保每次读或者写寄存器都真正执行到位.——野火
- springcloud集成kafka
项目名称:布控预警 水平拆分出来的项目,作为一个单独的可以对外提供服务的项目 项目设计:springcloud,可以集成各个不同平台的一个作为对外提供的微服务项目 项目功能:实现各个平台和本平台之间的 ...
- php权重分配
假设有3个人 能力的权重 分别为 A=>1,B=>2,C=>3,那么当有6个案子的时候 A分配到1个,B分配到2个,C分配到3个,这很合理,但是当案子只有5个,或者有7个的时候, ...
- luogu P1102 A-B 数对 |二分查找
题目描述 出题是一件痛苦的事情! 题目看多了也有审美疲劳,于是我舍弃了大家所熟悉的 A+B Problem,改用 A-B 了哈哈! 好吧,题目是这样的:给出一串数以及一个数字 C,要求计算出所有 A- ...
- luogu P1327 数列排序
题目描述 给定一个数列{an},这个数列满足ai≠aj(i≠j),现在要求你把这个数列从小到大排序,每次允许你交换其中任意一对数,请问最少需要几次交换? 输入格式 第一行,正整数n (n<=10 ...
- Java修炼——四种方式解析XML_SAX
四种方式解析XML:DOM JDOM DOM4J SAX 先写一个XML栗子: <?xml version="1.0" encoding="U ...
- windows程序设计01_utf8编码问题
坚持与妥协 从学程序的第一天老师就给我们说源代码应该使用utf8保存.因为先入为主,"源代码应该使用utf8"的观念已经在"学院派"出身的程序员脑子里根深蒂固. ...
- Day 04 数据类型基础
目录 什么是数据类型 为什么对数据分类 整型和浮点型统称为数字类型 整型(int) 作用 定义 使用方法 浮点型(float) 作用 定义 使用方法 强制类型转换 什么是字符串 作用 定义 使用方法 ...
- 【JS】382- JavaScript 模块化方案总结
本文包含两部分,第一部分通过简明的描述介绍什么是 CommonJS.AMD.CMD.UMD.ES Module 以及它们的常见用法,第二部分则根据实际问题指出在正常的 webpack 构建过程中该如何 ...