zoukankan      html  css  js  c++  java
  • JQuery02

    一:JQuery知识点

    *:JQuery的dom操作

    wps5ED9.tmp

    *:动态创建dom节点

    比如动态创建表格等,在js里面进行完成。

    wps5EDA.tmp

    *删除节点

    wps5EDB.tmp

    这里面的删除就是将其放在了一个地方,并不是真的删除,之后可以使用。

    *: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>
    image

    2:可以通过attr属性来进行隐藏。

    3:在jq里面通过下面的这种形式

    $(function(){});这是把一个$()是让其在ready的时候执行,若是没有这个就是定义了一个方法。

    Eg:阅读说明书

    wps5EED.tmp

    <!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:无刷新评论

    wps5EFE.tmp

    wps5EFF.tmp

    Eg::文本颜色变化

    wps5F00.tmp

    代码:

    wps5F11.tmp

    wps5F12.tmp

    Eg:wps5F13.tmp

    代码:wps5F14.tmp

    wps5F15.tmp

    *:节点替换

    wps5F16.tmp

    *:样式的操作

    wps5F27.tmp

    *:练习代码

    选中的高亮显示,里面就是有如何在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操作

    wps5F38.tmp

    *:实例 [全选和反选]

    01:这里主要的就是将以前学习到的知识,得以回顾,这样子好记忆。

    wps5F39.tmp

    <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函数,这里就是监听鼠标的事件。

    wps5F4B.tmp

    *:超链接的禁用

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

  • 相关阅读:
    之前的博客
    用struts2 s2-045漏洞拿站记录
    修改BlackLowKey皮肤样式,增加占屏比
    SpringBoot自动配置原理
    CAS无锁技术
    CAS单点登录原理解析
    死锁与活锁的区别,死锁与饥饿的区别
    jvm问题
    jdk动态代理的实现原理
    抽象工厂
  • 原文地址:https://www.cnblogs.com/netxiaohui/p/4907597.html
Copyright © 2011-2022 走看看