• JQuery学习笔记(3)


    jQuery学习

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

    $(document).ready(function(){

      $("p").click(function(){

      $(this).hide();

      });

    });

    </script>

    </head>

    <body>

    <p>If you click on me, I will disappear.</p>

    </body>

    常用的语法:

    $(this).hide() 隐藏当前的HTML元素

    $(“test”).hide() 隐藏id为test的元素

    $(“p”).hide() 隐藏所有<p>元素

    $(“.test”).hide() 隐藏所有class=“test”的元素

    所有jQuery函数位于一个document ready函数中,为了防止文档在完全加载之前就运行jquery代码而导致操作失败

    $(document).ready(function(){
    --- jQuery functions go here ----
    });

    jQuery 元素选择器

    jQuery 使用 CSS 选择器来选取 HTML 元素。

    $("p") 选取 <p> 元素。   根据元素名匹配

    $("p.intro") 选取所有 class="intro" 的 <p> 元素。根据类名.class

    $("p#demo") 选取所有 id="demo" 的 <p> 元素。根据ID  #id

    $(“div,span,p.myClass”) 选取匹配到的元素合并后一起返回

    层次选择器:

    $(“div span”) 选取<div>里的所有<span>元素

    $(“div > span”) 选择div下元素名是span的子元素

    $(‘.one + div ’)选取class 为one的下一个div兄弟元素 可以用next()方法代替:

    $(“.one”).next(“div”);

    $(‘#two ~ div ’) 选取id为two的元素后面的所有div兄弟元素 siblings,这个可以用nextAll()代替: $(“#prev”).nextAll(“div”);

    过滤选择器:

    都以一个冒号 : 开头

    可以分为:基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤,表单对象属性过滤

    基本过滤:

    :first

    :last

    :not(selector) 取出所有与选择器匹配的元素 $(“input:not(.myClass)”)

    :even() 选取索引为偶数的元素,索引从0开始

    :odd()

    :eq(index) 选取索引等于index的元素,索引从0开始 $(“input:eq(1)”)

    :gt(index) 选取索引大于index的元素而不包含index greater

    :lt(index) 小于index  less

    :header 选取所有标题元素<h1><h2><h3>

    :animated 选取当前正在执行动画的所有元素

    内容过滤选择器: 主要体现在他所包含的子元素或文本内容上

    :contains(text)  选取含有文本内容为text的元素

    :empty 选取不包含子元素或者文本的空元素

    :has(selector)选取含有选择器所匹配的元素的元素 $(“div:has(p)”)选取含有p元素的div元素

    :parent 选取含有子元素或者文本的元素

    可见性过滤选择器:

    :hidden 选取所有不可见的元素  $(“:hidden”)选取所有不可见的元素,包含<div style=”display:none;”> 文本隐藏域<input type=”hidden”>和visibility:hidden之类的元素。如果只想选择input元素 $(“input:hidden”)

    :visible 选取所有可见的元素

    jQuery 属性选择器:

    jQuery 使用 XPath 表达式来选择带有给定属性的元素。

    $("div[id]") 选取拥有属性id的元素。

    $("div[title=test]") 选取属性title为test的div元素。

    $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

    $(“[attribute^=value]”) 选取属性值以value开始的元素

    $(“[attribute$=value]”) 以value结束

    $(“div[title*=test]”) 选取属性title含有test的div元素

    子元素过滤选择器:

    :nth-child(index/even/odd/equation) 选取每个父元素下的第index个子元素,index从1开始

    :first-child 选取每个父元素的第1个子元素

    :last-child 选取最后一个子元素

    :only-child 选取父元素中只有一个子元素的元素

    $(“ul li:only-child”) 在ul中选取是唯一子元素的<li>元素

    表单对象属性选择器:

    $(“#form1 :enabled”); 选取表单内可用元素

    $(“#form1 :disabled”); 选取不可用元素

    $(“input:checked”); 选取被选中的<input>元素

    $(“select :selected”); 选取所有被选中的选项元素

    $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

    CSS选择器,可以改变元素的CSS属性:

    $("p").css("background-color","red");

    方法:

    $("p").hide()隐藏  $("p").show() 显示

    $(selector).hide(speed,callback);
    $(selector).show(speed,callback);

    speed参数规定隐藏、显示的速度,slow,fast,毫秒数

    callback参数是动作完成或所执行的函数名称

    toggle()方法来切换hide()和show()方法

    jQuery Fading 方法

    通过 jQuery,您可以实现元素的淡入淡出效果。

    jQuery 拥有下面四种 fade 方法:

    • fadeIn()
    • fadeOut()
    • fadeToggle()
    • fadeTo(speed,opacity,callback) 允许渐变为给定的不透明度(0-到1之间)

    jQuery滑动方法:

    slideDown(speed,callback) 向下滑动元素

    slideUp(speed,callback) 向上滑动元素

    slideToggle()在两个方法之间切换

    jQuery 动画 - animate() 方法

    jQuery animate() 方法用于创建自定义动画。

    语法:

    $(selector).animate({params},speed,callback);
    $("button").click(function(){
      $("div").animate({left:'250px'});
    }); 

    默认所有HTML元素都有一个静态位置且无法移动,如需对位置进行操作首先要把CSS position属性设置为relative,fixed或absolute 相对,确定,绝对

    <script>

    $(document).ready(function(){

      $("button").click(function(){

        $("div").animate({left:'250px'});

      });

    });

    </script>

    <div style="background:#98bf21;height:100px;100px;position:absolute;">

    </div>

    opacity:‘0.5’不透明度

    使用相对值:相对于元素的当前值。+=,-=

    height:'+=150px',
    '+=150px'

    也可以把属性的动画值设置为show,hide,toggle

    先把<div>元素移到右边再增大字号:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script>

    $(document).ready(function(){

      $("button").click(function(){

        var div=$("div"); 

        div.animate({left:'100px'},"slow");

        div.animate({fontSize:'3em'},"slow");

      });

    });

    </script>

    jQuery stop() 方法

    jQuery stop() 方法用于停止动画或效果,在它们完成之前。

    stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

    语法

    $(selector).stop(stopAll,goToEnd);

    方法链接:chaining 允许在相同的元素上运行多条jquery命令

    <script>

    $(document).ready(function()

      {

      $("button").click(function(){

        $("#p1").css("color","red").slideUp(2000).slideDown(2000);

      });

    });

    </script>

    DOM (Document Object Model)文档对象类型

    三个简单实用的用于 DOM 操作的 jQuery 方法:

    • text() - 设置或返回所选元素的文本内容
    • html() - 设置或返回所选元素的内容(包括 HTML 标记)
    • val() - 设置或返回表单字段的值

    alert("Value: " + $("#test").val());

    获取属性:

    attr()   $("button").click(function(){
      alert($("#w3s").attr("href"));
    });

    jQuery 方法:text()、html() 以及 val(),同样拥有回调函数。回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。

    属性操作:

    attr()获取和设置属性,removeAttr()删除元素属性

    jQuery attr() 方法也用于设置/改变属性值。

    attr() 的回调函数

    jQuery 方法 attr(),也提供回调函数。回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。

    下面的例子演示带有回调函数的 attr() 方法:

    实例

    $("button").click(function(){
      $("#w3s").attr("href", function(i,origValue){
        return origValue + "/jquery";
      });
    });

    添加新的 HTML 内容,插入节点

    我们将学习用于添加新内容的四个 jQuery 方法:

    • append() - 在被选元素的结尾插入内容 appendTo()
    • prepend() - 在被选元素的开头插入内容 prependTo()
    • after() - 在被选元素之后插入内容 insertAfter()
    • before() - 在被选元素之前插入内容 insertBefore()

    删除元素/内容,删除节点

    如需删除元素和内容,一般可使用以下两个 jQuery 方法:

    • remove() - 删除被选元素(及其子元素)
    • empty() - 从被选元素中删除子元素,清除元素的内容

    remove()方法也可以传递参数来选择性的删除元素:

    $(“ul li”).remove(“li[title!=菠萝]”);

    也可用appendTo()方法来移动元素:

    $(“ul li:eq(1)”).appendTo(“ul”);

    过滤被删除的元素:

    $(“p”).remove(“.italic”)  删除 class="italic" 的所有 <p> 元素:

    复制节点:clone()方法

    $(“ul li”).click(function(){ $(this).clone().appendTo(“ul”); })

    带参数后 clone(true) 则同时复制元素中所绑定的事件

    替换节点:

    repalaceWhith()

    replaceAll()

    包裹节点:

    wrap(); 是将所有的元素进行单独的包裹

    wrapAll(); 是将所有匹配的元素用一个元素来包裹

    wrapInner(); 是将每一个匹配元素的子内容包括文本节点包裹起来

    获取和设置HTML、文本和值:

    <p title="选择你喜欢的水果" class="high"><strong>你喜欢的水果是</strong> </p>

    var aa = $("p").html();

    alert(aa);     结果:<strong>你喜欢的水果是</strong>

    设置HTML的内容:

    $("p").html("<strong>这是更新后的内容</strong>");

    $(“p”).text();值显示文本值

    可以使下拉框的多个选项被选中:

    $("#mutiple").val(["选择2号","选择4号"]);

    也可以使用attr()方法实现同样功能:

    $("#mutiple option:eq(3)").attr("selected",true);

    $(“[value=radio2]:radio”).attr(“checked”,true);

    遍历节点:children();next();prev();siblings();closest();

                var $ul = $("ul").children();

                for (var i = 0,len = $ul.length;i<len;i++ ) {

                alert($ul[i].innerHTML);

                }

    closest() :

    给点击的目标元素的最近的li元素添加颜色:

       $(document).bind("click", function (e) {

                    $(e.target).closest("li").css("color","green");

                })

     

     

    jQuery 操作 CSS

    jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些:

    • addClass() - 向被选元素添加一个或多个类
    • removeClass() - 从被选元素删除一个或多个类
    • toggleClass() - 对被选元素进行添加/删除类的切换操作
    • css() - 设置或返回样式属性

    $("p").toggleClass("add"); 在样式之间重复切换

    <script>

    $(document).ready(function(){

      $("button").click(function(){

        $("h1,h2,p").addClass("blue");

        $("div").addClass("important");

      });

    });

    </script>

    也可以在addClass()方法中规定多个类: $("div").addClass("important  blue");

    返回CSS属性: css(“属性名”)

    $("p").css("background-color");

    设置CSS属性:$("p").css("background-color","yellow");

    设置多个属性:$("p").css({"background-color","yellow",”font-size”:”200%”});

    $("p :eq(1)").css({"font-size":"40px",backgroundColor:"888888"});

    如果在设置这些属性的时候不带引号,那么就要用驼峰式写法:如:

    $("p :eq(1)").css({fontSize:"40px",backgroundColor:"#888888"});

    如果带上了引号:可以写成 “font-size”也可以是” fontSize”  一般建议带上引号

    offset()方法:获取在当前视窗的相对偏移,返回的对象包含两个属性,

    left获取左偏移,top 获取右偏移

    jQuery 尺寸 方法

    jQuery 提供多个处理尺寸的重要方法:

    • width() 设置或返回元素的宽度(不包括内边距、边框、外边距)
    • height()设置或返回元素的高度(不包括内边距、边框、外边距)
    • innerWidth() 返回元素宽度,包括内边距
    • innerHeight() 返回元素高度,包括内边距
    • outerWidth()
    • outerHeight()

    设置指定的<div>元素宽高:

    $("#div1").width(500).height(500);

    向上遍历 DOM 树

    这些 jQuery 方法很有用,它们用于向上遍历 DOM 树:

    • parent() 返回被算元素的直接父元素,只会向上一级对DOM树遍历
    • parents()  返回元素的所有祖先元素
    • parentsUntil() 返回介于两个给定元素之间的所有祖先元素
    ·         $("span").parentsUntil("div");

    向下遍历 DOM 树

    children() 返回元素的所有直接子元素,只向下一级遍历

     $(“div”).children(“p.1”) 返回class = 1的所有<p>元素

    find() 返回  $(“div”).find(“span”) 返回<div>后代是所有<span>元素

    $(“div”).find(“*”) 返回<div>的所有后代

    在 DOM 树中水平遍历

    有许多有用的方法让我们在 DOM 树进行水平遍历:

    var $p1 = $("li").siblings();

                for (var i = 0, len = $p1.length; i < len; i++) {

                    alert($p1[i].innerHTML);

                }

    • siblings()   siblings() 方法返回被选元素的所有前后同胞元素。
    • nextAll()返回被选元素的所有跟随的同胞元素。
    • next()  返回被选元素的下一个同胞元素,只返回一个元素。取得匹配元素后面紧邻的同辈元素。
    • nextUntil()返回介于两个给定参数之间的所有跟随的同胞元素。
    • prev() 后面三个都是向前的
    • prevAll()
    • prevUntil()

    first()方法返回元素的首个元素

    $(“div p”).first();选取首个<div>元素内部的第一个<p>元素

    last()返回最后一个<p>元素

    图片的提示效果,鼠标移动时提示也跟着移动:

    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>

        <script type="text/javascript">

            $(function () {

                var x = 10;

                var y = 20;

                $("a.tooltip").mouseover(function (e) {

                    this.myTitle = this.title;

                    this.title = "";

                    var imgTitle = this.myTitle ? "<br/>" + this.myTitle : "";

                    var tooltip = "<div id='tooltip'><img src='"+this.href+"'alt='预览图'/>" + imgTitle + "</div>";

                    $("body").append(tooltip);

                    $("#tooltip").css(

                    {

                        "top": (e.pageY + y) + "px",

                        "left": (e.pageX + x) + "px"

                    }).show("fast");

                }).mouseout(function () {

                    this.title = this.myTitle;

                    $("#tooltip").remove();

                }).mousemove(function (e) {

                    $("#tooltip").css({

                         "top": (e.pageY + y) + "px",

                        "left": (e.pageX + x) + "px"

                    });

                });

            })      

        </script>

    <ul>

    <li><a href="../images/1.jpg" class="tooltip" title="测试图片1"><img src="../images/1.jpg" height="150px" width="150px" alt="图片1"/></a></li>

    <li><a href="../images/2.jpg" class="tooltip" title="测试图片2"><img src="../images/2.jpg" height="150px" width="150px" alt="图片2"/></a></li>

    </ul>

     

    Jquery中的事件:

    javascript中的 window.onload事件一次只能保存对一个函数的引用。

    Jquery的$(document).ready()每次调用$(document).ready()方法都会在现有的行为上追加新的行为,会根据注册的顺序依次执行函数。

    绑定事件:

        <script type="text/javascript">

            $(function () {

                $("#panel h5.head").bind("mouseover", function () {

                    $(this).next().show();

                });

                $("#panel h5.head").bind("mouseout", function () {

                    $(this).next().hide();

                });

            })

            //简写绑定事件

            $(function () {

                $("#panel h5.head").mouseover( function () {

                    $(this).next().show();

                });

                $("#panel h5.head").mouseout( function () {

                    $(this).next().hide();

                });

            })

        </script>

        <div id="panel">

        <h5 class="head">测试Jquery事件绑定</h5>   

        <div class="content">  

        <ul>

          <li>显示的内容</li>

          <li><img src="../images/1.jpg" style="height: 270px" /></li>

          </ul>

        </div>

      </div>

    绑定多个事件:

    $("#panel h5.head").bind("mouseovwe mouseout", function () {

                    $(this).next().toggle();

                });

     

    Jquery有两个合成事件,hover(),toggle()

    hover(enter,leave) 用于模拟光标悬停事件,当光标移动到元素上时触发第一个函数,移出时触发第二个函数。

    toggle(fn1,fn2,fn3…),开关的意思

          $(function () {

                $("#panel h5.head").toggle(function () {

                    $(this).next().show();

                }, function () {

                    $(this).next().hide();

                });

            })

    也可以切换元素的可见状态:

    $(function () {

                $("#panel h5.head").toggle(function () {

                                  $(this).addClass("highlight");

                    $(this).next().toggle();

                }, function () {

    $(this).removeClass("highliht");

                    $(this).next().toggle();

                });

            })

    事件冒泡问题:

    function (event)  event为事件对象。

    停止事件冒泡:event . stopPropagation();

    阻止默认行为:event . preventDefault();

    也可以使用 return false; 对上面的简写。阻止表单的提交。

    事件对象的属性:

    event.type 获取事件类型

    event.target 获取触发事件的元素

    event.PageX, event.pageY 获取鼠标当前相对于页面的坐标

    event.which 鼠标单击事件中获取到鼠标的左中右键,返回1,2,3 在键盘中获取键盘的按键

    移出按钮元素的上以前的注册事件:

    .unbind(); 移出所有click事件

    .unbind(“click”,myFun2); 删除绑定的函数2

    one(type,[data],fn) 方法的结构与bind()方法类似使用方法相同

    为元素绑定单击事件,只在第一次单击按钮时执行函数,之后单击不再执行

    模拟操作: trigger()

    $("input").trigger("focus");

    触发focus事件后会执行浏览器的默认操作,使<input>元素得到焦点。

    $("input").triggerHandler("focus");

    只触发事件不得到焦点。

    添加事件命名空间便于管理: name就是命名空间

    $("#panel h5.head").bind("mouseovwe . name   mouseout . name", function () {}

    用Jquery做动画效果要求要在标准模式下,否则会引起动画抖动,在文件头部包含如下DTD定义:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/

    xhtml1/DTD/ xhtml1-transitional.dtd">

    《锋利的Jquery》—单东林—人民邮电出版社

    Jquery对表单、表格的操作及更多应用:

    表单有1表单标签,2表单域,3表单按钮 三部分组成。

    获取和失去焦点改变样式:

    <style type="text/css">

            #msg

            {

                height: 134px;

                330px;

            }       

            .focus

            {

                border:1px solid #F00;

                background:#FCC           

                }

        </style>

        <script type="text/javascript">

            $(function () {

                $(":input").focus(function () {

                    $(this).addClass("focus");

                }).blur(function () {

                    $(this).removeClass("focus");

                });

            })

        </script>

    </head>

    <body>

    <form action="#" method="post" id="regForm">

    <fieldset>

     <legend>个人基本信息</legend>

     <div>

     <label for="username">名称</label>

     <input id="username" type="text" />

     </div>

      <div>

     <label for="pass">密码</label>

     <input id="pass" type="password" />

     </div>

      <div>

          <label for="msg">信息</label>

     <textarea id="msg"></textarea>

     </div>

    </fieldset>

    </form>

    </body>

    过渡动画使文本框变大小

       var $comment = $('#msg');

                $('.bigger').click(function () {

                    if (!$comment.is(":animated")) {

                        if ($comment.height <= 500) {

                            $comment.animate({ height: "+=50" }, 400);

                        }

                    }

                })

    全选全不选可以用一个复选框来操作:

    <input type="checkbox" id="checkedAll" />全选/取消<br />

       $("#checkedAll").click(function () {

            $('[name=items]:checkbox').attr('checked', this.checked);

        });

    反向选择:

    <input type="button" id="CheckedRev" value="反¤¡ä选?" />

    $("#CheckedRev").click(function () {

            $('[name=items]:checkbox').each(function () {

                $(this).attr("checked", !$(this).attr("checked"));

            });

    复选框和复选框组联动:

    $('[name=items]:checkbox').click(function () {

            var flag = true;

            $('[name=items]:checkbox').each(function () {

                if (!this.checked) {

                    flag = false;

                }

            });

            $("#checkedAll").attr('checked', flag);

        });

    Jquery中的ajax

    load()方法时Jquery中能载入远程HTML代码并插入DOM中。

    load(url [,data] [,callback])

    $.get(),$.post()

    GET请求会将参数跟在URL后进行传递,而POST是最为HTTP消息的实体内容发送给Web浏览器。

    GET传输的数据有大小限制,不能大于2KB,post理论上不受限制。

    GET请求的数据会被浏览器缓存下来。

    $.ajax({

    type:”POST”,

    url:””,

    dataType:””

    });

    $.ajax()方法是Jquery最底层的ajax实现,因此可以用它来代替前面的所有方法。

    序列化元素:

    1、serialize()方法,表单元素复杂时可以将DOM元素内容序列化为字符串,用于ajax请求

    2、serializeArray()方法,不是返回字符串,而是返回JSON格式的数据。

    3、$.param()方法,是serialize()的核心,用来对一个数组或对象按照key/value进行序列化。

     

    Jquery中的ajax全局事件:

    ajaxStart()

    ajaxStop()

    如果使某个ajax请求不受全局方法的影响,可以在$.ajax参数中的 global:false

  • 相关阅读:
    MS SQL SERVER导出表结构到Excel
    Ajax.ActionLink用法
    Layer弹出层关闭后刷新父页面
    Ajax.BeginForm提示不支持live属性或方法的错误
    BootStrap带样式打印
    利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService,返回json数据
    Bootstrap打印问题
    EF的表左连接方法Include和Join
    vs code的local history插件
    idea debug的drop frame,set watch和设置过滤条件
  • 原文地址:https://www.cnblogs.com/kennyliu/p/3454819.html
Copyright © 2020-2023  润新知