码迷,mamicode.com
首页 > Web开发 > 详细

JQuery

时间:2015-03-01 23:38:53      阅读:303      评论:0      收藏:0      [点我收藏+]

标签:

JQuery

开发出来的JavaScript的脚本包。

非侵入性的脚本。

 

一、找对象。

    基本的结构。

    <script language="javascript">
        $(document).ready(function () {
            //写代码
            //HTML文档在浏览器中加载完成时触发
        });
    </script>

    $,表示选择;document表示该页面;ready(),表示当HTML文档加载完成时触发

 

<body onload="">
</body>

    onload事件是页面所有内容加载完成时触发

 

 

  选择器。

    1、基本选择器

        标签选择器。

        class选择器。

        ID选择器。

        逗号隔开——并列

        空格隔开——后代

        >号隔开——子级选择

            //设置所有div的样式
            $("div").css("backgroundcolor", "blue");

            //class="show"的标签的子级标签中,id="ddd"的标签的样式
            $(".show,#ddd").css("border", "solid red 1px").css("height","100px");

            //class="show"的标签的子级标签中,所有div的样式
            $(".show div").css("border", "solid red 1px").css("height","100px");

            //class="show"的标签的子级标签中,第一级div的样式
            $(".show>div").css("border", "solid red 1px").css("height", "100px");

 

    2、过滤选择器

        $("基本选择:过滤选择")

 

    1)基本过滤——根据元素在HTML中的实际位置进行过滤。

        :first

        :last

        :eq(n)

        :gt(n)

        :lt(n)

        :odd

        :even

        :not(选择器)

            //首个class="show"的标签的样式
            $(".show:first").css("border", "solid red 1px").css("height", "100px");

            //最后一个class="show"的标签的样式
            $(".show:last").css("border", "solid red 1px").css("height", "100px");

            //第2个class="show"的标签的样式。(从0开始计数)
            $(".show:eq(2)").css("border", "solid red 1px").css("height", "100px");

            //索引号大于2的class="show"的标签的样式。(从0开始计数)
            $(".show:gt(2)").css("border", "solid red 1px").css("height", "100px");

            //索引号小于2的class="show"的标签的样式。(从0开始计数)
            $(".show:lt(2)").css("border", "solid red 1px").css("height", "100px");

            //第奇数个class="show"的标签的样式。(从1开始计数)
            $(".show:odd").css("border", "solid red 1px").css("height", "100px");

            //第偶数个class="show"的标签的样式。(从1开始计数)
            $(".show:even").css("border", "solid red 1px").css("height", "100px");

            //不是首个class="show"的标签的样式。
            $(".show:not(:first)").css("border", "solid red 1px").css("height", "100px");

 

    2)属性过滤——根据元素中的属性进行过滤。[]

        [属性名]

        [属性名=]

        [属性名!=]

        [属性名^=]

        [属性名$=]

        [属性名*=]

 

            //class="show",并且含有属性为aaa的标签的样式
            $(".show[aaa]").css("border", "solid red 1px").css("height", "100px");

            //class="show",并且属性aaa="hello"的标签的样式
            $(".show[aaa=hello]").css("border", "solid red 1px").css("height", "100px");

            //class="show"的标签中,属性aaa不是"hello"的标签的样式(包括没有属性aaa的标签)
            $(".show[aaa!=hello]").css("border", "solid red 1px").css("height", "100px");

            //class="show"的标签中,属性aaa以"h"开头的标签的样式
            $(".show[aaa^=h]").css("border", "solid red 1px").css("height", "100px");

            //class="show"的标签中,属性aaa以"o"结尾的标签的样式
            $(".show[aaa$=o]").css("border", "solid red 1px").css("height", "100px");

            //class="show"的标签中,属性aaa中含有"o"的标签的样式
            $(".show[aaa*=o]").css("border", "solid red 1px").css("height", "100px");

            //input标签中,type=text的标签的样式
            $("input[type=text]").css("border", "solid red 1px"); 

 

    (三)内容过滤——根据开始标签和结束标签中间的内容进行筛选。

        :contains(字符串)——元素中如果包含字符串,就选出该元素。

        :has(选择器)——元素中包含对应选择器的子元素,就选中该元素。

 

            //文字内容含有"good"、class="show"的标签的样式
            $(".show:contains(good)").css("border", "solid red 1px").css("height", "100px");

            //子级、后代级中含有id="dd"标签、class="show"的标签的样式
            $(".show:has(#dd)").css("border", "solid red 1px").css("height", "100px");

            //所有含有id="dd"的div标签的样式
            $("div:has(#dd)").css("border", "solid red 1px").css("height", "100px");

 

 

 

例子:

            //id="GridView1"的页眉的样式
            $("#GridView1 tr:first").css("background-color", "navy").css("color", "white");
            //id="GridView1"的大于第1行的奇数行的样式
            $("#GridView1 tr:gt(0):odd").css("background-color", "yellow");
            //id="GridView1"的大于第1行的偶数行的样式
            $("#GridView1 tr:gt(0):even").css("background-color", "pink");

 

 

 

.hasclass

 

二、操作

1、元素本身的操作:添加,复制,替换,清空

    empty():把元素内容全部清空,元素开始结束标记保留

    remove():彻底删除元素,包括开始结束标记。

    append(元素):在子元素的末尾追加

    prepend(元素):在子元素的开头追加。

    replaceWith(元素)

    clone()

 

            //清空选择标签内的所有内容
            $(".ul").empty();

            //移除选择标签(包括选择标签的开始结束标记)
            $("ul").remove();

            //ul标签中追加子元素(在后面追加)
            $("ul").append("<li>葡萄</li>");

            //ul标签中追加子元素(在前面追加)
            $("ul").prepend("<li>葡萄</li>")

            //将ul的最后一个子元素添加到ol中(ul中将移除该子元素)
            $("ol").append($("ul li:last"));

            //将ul的最后一个子元素添加到ol中(ul中保留该子元素)
            $("ol").append($("ul li:last").clone());

            //用ul的第一个子元素替换ol的最后一个子元素(ul中将移除该子元素)
            $("ol li:last").replaceWith($("ul li:first"));

            //用ul的第一个子元素替换ol的最后一个子元素(ul中保留该子元素)
            $("ol li:last").replaceWith($("ul li:first").clone());

 

 

 

  

2、元素属性的操作

  1)读属性:attr("属性名")

            //获取最后一个class="show"的标签的aaa属性
            var s = $(".show:last").attr("aaa");
            //alert(s);

 

 

  2)添加、修改属性:attr("属性名","属性值")

            //为最后一个class="show"的标签添加或修改属性
            $(".show:last").attr("bbb", "不许打瞌睡!").attr("aaa", "kokokokokookoko");

 

 

  3)移除属性:removeAttr("属性名")

            //移除属性
            $("#Button1").removeAttr("disabled");

 

 

3、元素样式的操作

  1)内联样式

      读取样式:css("样式名")

      设置样式:css("样式名","样式的值")

  2)操作样式表的class

      addClass("样式表的class")

      removeClass("样式表的class")

            //为第1行添加名为head的class样式
            $("#GridView1 tr:first").addClass("head");
            $("#GridView1 tr:gt(0)").addClass("row1");
            $("#GridView1 tr:gt(0):odd").addClass("row2");

            //移除样式
            $("#d2").removeClass("row1");

 

 

4、元素内容的操作

  1)表单元素 

  文本类text,textarea,hidden,password     选择类radio,checkbox,select,file        按钮类submit,button,reset,image

      (1)读内容

          选择器.val();

            //获取value值
            var s = $("#Button1").val();
            //alert(s);

 

 

      (2)写内容

          选择器.val();

            //写value值
            $("#Button1").val("修改后的按钮文字");

 

 

  2)非表单元素

      常规:容器类h1-h6,p,div,span,ul,ol,li

      常见:img    a

      表格:table tr td

      (1)读内容

          选择器.html()

          选择器.text()

            //获取第一个class="show"标签的内容(包括html标签)
            var s = $(".show:first").html();

            //获取第一个class="show"标签的从容(不包括html标签)
            var s = $(".show:first").text();
            //alert(s);

 

      (2)写内容

          选择器.html("内容")

          选择器.text("内容")

            //class="show"标签内添加i标签,i标签内容为“代码添加的文字”
            $("#dd").html("<i>代码添加的文字</i>")

            //class="show"标签内添加内容“<i>代码添加的文字</i>”
            $("#dd").text("<i>代码添加的文字</i>")

 

 

5、相关元素的操作

    前:prev(),prevAll(),prevAll(选择器)

 

            //选择标签的前一个标签(同级标签)
            $(".show[aaa=hello]").prev().css("border", "solid red 1px").css("height", "100px");

            //选择标签的前面的所有class="show"的标签(同级标签)
            $(".show[aaa=hello]").prevAll().css("border", "solid red 1px").css("height", "100px");

 

 

    后:next(),netxtAll(),nextAll(选择器)

            //选择标签的后一个标签(同级标签)
            $(".show[aaa=hello]").next().css("border", "solid red 1px").css("height", "100px");

            //选择标签的后面class="show"的标签(同级标签)
            $(".show[aaa=hello]").nextAll(".show").css("border", "solid red 1px").css("height", "100px");

 

    内:find("选择器")

            //find,在选择标签的第一级子级标签中查找
            $(".show:first").find("div:last").css("border", "solid red 1px").css("height", "100px");

 

    外:parent(),parents(),parents(选择器)

            //查找选择标签的父级标签
            $("#dd").parent().css("border", "solid red 1px").css("height", "100px");

            //选择标签的所有父级标签中class="show"的标签的样式
            $("#dd").parents(".show").css("border", "solid red 1px").css("height", "100px");

 

 

 

            //$("input:disabled").css("background-color", "red");
            //$("input[disabled=disabled]").css("background-color","blue"); 

 

JQuery事件:

  click,dbclick,mouseover,mouseout,focus,blur,change,keyup,keydown,mouseup,mousedown

  javascript事件名,把on去掉就是jquery的事件。

  jquery的事件跟函数很象,只是括号中用得是function(){}

 

    <script language="javascript">
        $(document).ready(function () {
            $(".dd").click(function () {  //为class="dd"的标签添加事件click
                alert("事件");
            })
        });
    </script>

 

复合事件:

    hover()——相当于把mouseover()mouseout()组合起来。

    <script language="javascript">
        $(document).ready(function () {
            $(".dd").hover(function () {
                $(this).addClass("ddover")
            }, function () {
                $(this).removeClass("ddover");
            });

            //$(".dd").mouseover(function () {
            //    $(this).addClass("ddover");
            //}).mouseout(function () {
            //    $(this).removeClass("ddover");
            //});
        });
    </script>

 

 

    toggle(,,,,,,)——点一下执行下一个函数,当执行到最后一个函数,再点就会执行第一个函数。

    <script language="javascript">
        $(document).ready(function () {
            $(".dd").toggle(function () {
                $(this).removeClass("ddover3");
                $(this).addClass("ddover");
            }, function () {
                $(this).removeClass("ddover");
                $(this).addClass("ddover1");
            }, function () {
                $(this).removeClass("ddover1");
                $(this).addClass("ddover2");
            }, function () {
                $(this).removeClass("ddover2");
                $(this).addClass("ddover3");
            });
            $(".dd").hover(function () {
                $(this).addClass("ddover")
            }, function () {
                $(this).removeClass("ddover");
            });
        });
    </script>

 

 

    toggleClass()方法:用来切换样式。如果有这个样的class就去掉,如果没有的话就加上。

            $(this).toggleClass("ddover");

 

 

 

阻止事件冒泡:

需要在事件的函数小括中加上一个参数,在这里叫abc .要阻止事件冒泡,就需要调abc的方法stopPropagation().

            $(".dd").click(function (abc) {
                $(this).toggleClass("ddover");
                abc.stopPropagation();
            });

 

像超链接、按钮等在点击的都会有默认操作。

要阻止默认操作,需要在事件的函数小括中加上一个参数,在这里叫abc .要阻止事件冒泡,就需要调abc的方法preventDefault().

 

return false;具备阻止事件冒泡和默认操作的两个功能。

 

事件绑定与解除:

$(对象).bind("事件名",function(){事件的函数});

$(对象).unbind("事件名");

 

动画:

slideUp()

slideDown()

 

fadeIn()

fadeOut()

 

 

 

 

 

 

 

 

 

 

 

 

 

 

JQuery

标签:

原文地址:http://www.cnblogs.com/phantom-k/p/4307734.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!