一：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不一定可以读取出来，用户可以清除掉了。同时可以被禁用。

Bjarne Stroustrup（C++之父）说：
逻辑应该是清晰的，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 ...

随机推荐

MyBatis的配置与使用(增,删,改,查)
---恢复内容开始--- Mybatis入门介绍一.MyBatis介绍什么是MyBtis? MyBatis 是一个简化和实现了 Java 数据持久化层(persistence layer)的开源框 ...
转:Java实现敏感词过滤
敏感词.文字过滤是一个网站必不可少的功能,如何设计一个好的.高效的过滤算法是非常有必要的.前段时间我一个朋友(马上毕业,接触编程不久)要我帮他看一个文字过滤的东西,它说检索效率非常慢.我把它程序拿过来 ...
创建raid10（五块磁盘）
创建raid10(五块磁盘) Raid10(5块磁盘) 上一个bolg已经做了raid5(3 个raid. 2个备份),在此条件下继续以下步骤: 1.先将磁盘系统卸载 2.看系统挂载里是否还有md0 ...
git 提交代码步骤
拉取服务器代码,避免覆盖他人代码 git pull 查看当前项目中有哪些文件被修改过 git status 提交代码至缓存 git add . 将代码提交到本地仓库中 git commit -m “提 ...
第八章使用jQuery操作DOM
DOM操作: jQuery中提供了一系列操作DOM强有力的方法,它们不仅简化了传统JavaScript操作DOM时繁冗的代码,更加解决了令开发者苦不堪言的跨平台浏览器的兼容. 它还让有页面元素真正动起 ...
[TimLinux] HTTP cookie与session技术
1. HTTP特点基于TCP/IP协议实现,上层应用协议版本:HTTP/1.0, HTTP/1.1 HTTP/1.0默认短连接,HTTP/1.1默认长连接 HTTP请求与响应的无状态性无状态性与 ...
python3如何随机生成大数据存储到指定excel文档里
本次主要采用的是python3的第三方库xlwt,来创建一个excel文件.具体步骤如下: 1.确认存储位置,文件命名跟随时间格式 2.封装写入格式 3.实现随机数列生成 4.定位行和列把随机数写入 ...
SSM 轻量级框架构建：图书管理系统
一.接业务,作分析 1.大致业务要求 1.1 使用 SSM( Spring MVC + Spring + MyBatis )实现图书信息管理系统, MySQL5.5 作为后台数据库,该系统包括查询图书 ...
nmap扫描、信息收集（网安全实训第一天）
本期内容:网站信息收集.nmap扫描 1. 信息收集 2. nmap扫描1.信息收集 (1)确定目标首先,我们确定攻击目标,在这里,我们随便找一个网站做测试,我以码云为例. (2)nslookup查 ...
【Vuejs】335-(超全) Vue 项目性能优化实践指南
点击上方"前端自习课"关注,学习起来~ 前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 D ...

jQuery总结02_jq的dom操作+属性操作