一：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的更多相关文章

  1. 前端之jQuery02

    文档操作 重点:创建标签,jQuery里面没有这个方法 内部(子标签) 添加到指定元素内部后面 $(A).append(B): // B作为A的最后一个儿子元素:(把B追加到A) $(A).appen ...

  2. 【jQuery02】点击标题面板显示内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 【JQuery-02】事件绑定多次造成多次执行

    http://blog.csdn.net/always_littlesun/article/details/52594548

随机推荐

  1. .net开发笔记（十三） Winform常用开发模式第一篇

    上一篇博客最后我提到“异步编程模型”(APM),之后本来打算整理一下这方面的材料然后总结一下写篇文章与诸位分享,后来在整理的过程中不断的延伸不断地扩展,发现完全偏离了“异步编程”这个概念,前前后后所有 ...

  2. 使用DBUnit框架数据库插入特殊字符失败的查错经历

    本文记录的是使用DBUnit测试框架进行数据库数据插入时,插入特殊字符失败的查错经历.希望能对向我这样的小白同学们在遇到类似问题时,能够有一些启发.背景:在写跟数据库交互模块的单元测试,数据库表中的e ...

  3. FusionCharts简单教程(三)-----FusionCharts的基本属性

          通过前面两章的讲解我们可以制作出简单的图像,但是有时候我们需要对图像进行一个精确的规划,比如设置背景颜色.设置提示信息.设置间隔颜色等等,这时就需要我们对FusionCharts的细节有比 ...

  4. 浅谈Excel开发：二 Excel 菜单系统

    在开始Excel开发之前,需要把架子搭起来.最直接的那就是Excel里面的菜单了,他向用户直观的展现了我们的插件具有哪些功能.菜单出来之后我们就可以实现里面的事件和功能了.Excel菜单有两种形式,一 ...

  5. Hello Mybatis 01 第一个CRUD

    What's the Mybatis? MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google c ...

  6. Winform文件下载之WebClient

    最近升级了公司内部使用的一个下载小工具,主要提升了下面几点: 1． 在一些分公司的局域网中,连接不上外网 2． 服务器上的文件更新后,下载到的还是更新前的文件 3． 没有下载进度提示 4． 不能终止下 ...

  7. easy-ui 小白进阶史（二）：操作数据，easy-ui操作

    easy-ui的操作及交互: Html: @using LangBo.Facade; @using LangBo.DataDefine; @using System.Threading.Tasks; ...

  8. Java序列化格式详解

    RPC的世界,由于涉及到进程间网络远程通信,不可避免的需要将信息序列化后在网络间传送,序列化有两大流派: 文本和二进制. 文本序列化 序列化的实现有很多方式,在异构系统中最常用的就是定义成人类可读的文 ...

  9. Centos Another app is currently holding the yum lock

    yum命令用ctrl+z命令中断后,再运行yum时,出现: Existing lock /var/run/. Another app is currently holding the yum lock ...

  10. CefSharp .net

    构建基于Chromium的应用程序 chromium是google chrome浏览器所采用的内核,最开始由苹果的webkit发展而出,由于webkit在发展上存在分歧,而google希望在开发上有更 ...