锋利的jquery 学习笔记

Menu

第1章 认识jQuery

1.3 jQuery代码的编写
1.4 jQuery对象和DOM对象
  • 1.4.1 DOM对象和jQuery对象简介
  • 1.4.2 jQurey对象和DOM对象的相互转换
  • 1.5 解决jQuery和其他库的冲突

第2章 jQuery选择器

  • 2.1 jQuery选择器是什么
  • 2.2 jQuery选择器的优势
  • 2.3 jQuery选择器
  • 2.5 选择器中的一些注意事项
  • 2.7 其他选择器

第3章 jQuery中的DOM操作

  • 3.1 DOM操作的分类
  • 3.2 jQuery中的DOM操作

第4章 jQuery中的事件和动画

  • 4.1 jQuery中的事件
  • 4.2jQuery中的动画
    • JQuery中animate的一些坑Script

第5章 jQuery对表单、表格的操作及更多应用

  • 5.1表单应用
  • 5.2表格应用
  • 5.3其他应用

第一章 认识jQuery

1.3 jQuery代码的编写
  • 在页面中引入jQuery
  • 放在HTML页面的head之间；
<head>
    <script src="../scripts/jquery.js" type="text/javascript"></script>
</head>
  • 1.3.2 编写简单的jQuery代码
  • $ 等价于 jQuery
  • 编写第1个jQuery程序
<script>
    $(document).ready(function(){             //等待Dom元素加载完毕
        alert("Hello World!");                  //弹出一个框
    });
</script>
  • 等待Dom元素加载完毕 简写形式
<script>
    $(function(){                                  //等待Dom元素加载完毕
        alert("Hello World!");                  //弹出一个框
    });
</script>
window.onload 和 $(document).ready的区别
  • 1.3.3 jQuery代码风格
  1. 链式操作风格
<script>
    $(".level1 > a").click(function(){
        $(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();
        return false;
    });
</script>
  • （1）对于同一个对象不超过3个操作的，可以直接写成一行。代码如下：
$("li").show().unbind("click")；
  • （2）对于同一个对象的较多操作，建议每行写一个操作。代码如下：
<script>
    $(this).removeClass("mouseout")
        .addClass("mouseover")
        .stop()
        .fadeTo("fast",0.6)
        .fadeTo("fast",1)
        .unbind("click")
        .click(function(){
            // do something …
        });
</script>
  • （3）对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以考虑适当地缩进。例如上面提到的代码：
$(this).addClass("highlight")
.children("li").show().end()
.siblings().removeClass("highlight")
.children("li").hide()；
  • （4）程序块严格采用缩进风格书写，能保证代码清晰易读，风格一致。
  1. 为代码添加注释
1.4 jQuery对象和DOM对象
  • 1.4.1 DOM对象和jQuery对象简介
  1. DOM对象
var someElement = document.getElementById("id")
  1. jQuery对象
$("#foo").html()；  //获取id为foo的元素内的html代码。.html()是jQuery里的方法
  • 这段代码等同于：
document.getElementById("foo").innerHTML；
  • 1.4.2 jQurey对象和DOM对象的相互转换
  • 如果获取的对象是jQuery对象，那么在变量前面加上$，例如：
var  $variable   =   jQuery对象；
  • 1．jQuery对象转成DOM对象
  • jQuery提供了两种方法将一个jQuery对象转换成DOM对象，即[index]和get（index）。

    • （1）jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象。

    • （2）另一种方法是jQuery本身提供的，通过get(index)方法得到相应的DOM对象。

// [index]
var  $cr   =   $("#cr")；                     //jQuery对象
var  cr    =   $cr[0]；                       //DOM对象
alert( cr.checked )                          //检测这个checkbox是否被选中了

// get(index)
var $cr   =    $("#cr")；                     //jQuery对象
var cr    =    $cr.get(0)；                   //DOM对象
alert(cr.checked)                             //检测这个checkbox是否被选中了
  • 2. DOM对象转成jQuery对象
  • 对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。方式为$（DOM对象）。
var cr  =  document.getElementById("cr")；      //DOM对象
var $cr  =  $(cr)；                             //jQuery对象
  • 转换后，可以任意使用jQuery中的方法。通过以上方法，可以任意地相互转换jQuery对象和DOM对象。
  • 注意：平时用到的jQuery对象都是通过$()函数制造出来的，$()函数就是一个jQuery对象的制造工厂。
  • 1.5 解决jQuery和其他库的冲突
  • 1. jQuery在其他库之后导入
  • 在其他库和jQuery 库都被加载完毕后可以在任何时候调用 noConflict() 方法。noConflict() 方法会释放对 $ 标识符的控制权，这样其他脚本就可以使用它了。
<!-- 引入 prototype  -->
<script src="lib/prototype.js" type="text/javascript"></script>
<!-- 引入 jQuery  -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script language="javascript">
    jQuery.noConflict();                 //将变量$的控制权移交给prototype.js
    jQuery(function(){                 //使用jQuery
        jQuery("p").click(function(){
            alert(jQuery(this).text());
        })
    })
    $("pp").style.display = 'none';  //使用prototype.js隐藏元素
</script>
    1. 利用自定义快捷方式
var $j = jQuery.noConflict();           //自定义一个快捷方式
$j(function(){                            //使用jQuery，利用自定义快捷方式—$j
    $j("p").click(function(){
        alert( $j(this).text() );
        })
    })
$("pp").style.display = 'none';         //使用prototype.js隐藏元素
    1. 定义匿名函数并设置形参为$
jQuery.noConflict();                     //将变量$的控制权让渡给prototype.js
(function($){                             //定义匿名函数并设置形参为$
    $(function(){                       //匿名函数内部的$均为jQuery
        $("p").click(function(){          //继续使用 $()方法
            alert($(this).text() );
        });
    });
})(jQuery);                               //执行匿名函数且传递实参jQuery
$("pp").style.display = 'none';           //使用prototype
  • 2. jQuery在其他库之前导入
  • 只能使用jQuery() 了吧。

第2章 jQuery选择器

  • 2.1jQuery选择器是什么
$("#myP").click(function () {
    alert("click on paragraph!")
})
  • 2.2 jQuery选择器的优势
  • 根据返回的数组的长度来判断是否获取到元素
if ($("#tt").length > 0 ) {
//do something
}
  • 或者转化成DOM对象来判断，代码如下：
if ($("#tt")[0]) {
//do something
}

  • 2.3 jQuery选择器

  • jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。

  • 2.3.1 基本选择器

    $("#one").css("background","cyan");
    $(".mini").css("background", "cyan");
    $("div").css("background", "cyan");
    $("*").css("background", "cyan");
    $("span,#two").css("background", "cyan")
  • 2.3.2 层次选择器
    $("body div").css("background", "cyan"); // 选择body内所有div元素的背景色
    $("body>div").css("background", "cyan"); // 选择body内所有div子元素的背景色
    $(".one+div").css("background", "cyan"); // 选择class为one的后面div同辈元素
    $(".one").next("div").css("color", "red") // 等价于$(".one+div")
    $("#two~div").css("background", "cyan"); // 选择id为two后面的所有同辈元素为div的元素；
    $(".one").nextAll("div").css("color", "red")  // 等价于 $("#two~div")
    $(".one").siblings("div").css("color", "red")  // 选择于.one 同辈的所有div元素；
  • 2.3.3 过滤选择器
  • 过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与 CSS中的伪类选择器语法相同，即选择器都以一个冒号(:)开头。按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。
  1. 基本过滤选择器
    // $("div:first").css("color", "red")   // 选择第一个div元素
    // $("div:last").css("color", "red")    // 选择最后一个div元素
    // $("div:not(.one)").css("color", "red")   // 选择class不是one的所有div元素
    // $("div:even").css("background", "pink")  // 选择下标为双数的div元素
    // $("div:odd").css("background", "pink") // 选择下标为单数的div元素
    // $("div:eq(6)").css("background", "pink")  // 选择下标为6的div元素
    // $("div:gt(6)").css("background", "pink")  // 选择下标大于6的div元素（不包含6）
    // $("div:lt(6)").css("background", "pink") // 选择下标小于6的div元素（不包含6）
    // $(":header").css("color", "pink"); //选择所有head元素
    // $(":animated")  // 选择正在执行动画的所有元素；
    // $(":focus") // 选择当前获取焦点的所有元素；
  1. 内容过滤选择器
  • 内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。
    $("div:contains(di)").css("color", "pink") // 选择含有“di”文本的div元素
    $(":empty").css("background", "cyan")  // 选择空元素
    $("div:has(.mini)").css("background", "pink") // 选择含有class为mini元素的div元素
    $("div:parent").css("background", "pink")  // 选择不为空的div元素
  1. 可见性过滤选择器
  • 可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。
  • 在可见性选择器中，需要注意选择器:hidden，它不仅包括样式属性display为“none”的元素，也包括文本隐藏域（<input type="hidden" />）和visibility:hidden之类的元素。
// show()是jQuery的方法，它的功能是显示元素，3000是时间，单位是毫秒。
    $("div:visible").hide(3000) // 选择所有可见的div元素
    $("div:hidden").show(3000) // 选择所有隐藏的div元素
  1. 属性过滤选择器
  • 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。
    $("div[title]").css("background", "pink"); // 选择属性有title的div元素
    $("div[title=test]").css("background", "pink"); // 选择属性title的值为test的div元素
    $("div[title!=test]").css("background", "pink"); // 选择属性title的值不为test的div元素（没有title属性的也会被选择）
    $("div[title^=en]").css("background", "pink"); // 选择属性title的值以en开头的div元素
    $("div[title$=en]").css("background", "pink"); // 选择属性title的值以en结尾的div元素
    $("div[title*=st]").css("background", "pink"); // 选择属性title的值含有st的div元素
    $("div[class][id=two]").css("background", "pink"); // 选择有class属性并且id属性值为two的div元素
    $("div[title|=en]").css("background", "pink")   // 选择title属性的值为en 或 以en为前缀的（en-）div元素
    $("div[title~=en]").css("background", "pink")    // 选择title属性用空格分隔的值中含有en的div元素；
  1. 子元素过滤选择器
    :nth-child(n|even|odd|formula)
    //  匹配第几个子元素。从1开始索引。
    $("div:nth-child(n)")

    //  匹配偶数，:nth-child(even)第一行算1。element:even第一行算0；
    $("div:nth-child(even)")

    //  匹配奇数，:nth-child(odd)第一行算1。element:odd第一行算0；
    $("div:nth-child(odd)")

    // 规定哪个子元素需通过公式 (an + b) 来选取。(2n+1)= 频率是2，+1是从第一个元素开始；+1可以省略。
    $("div:nth-child(2n+1)").css("background", "yellow") // 选择div子元素

    // 选择父元素里的第一个p子元素；
    $("p:first-child")

    // 选择父元素里的最后一个p子元素；
    $("p:last-child")

    // 选择的元素为父元素里的唯一的子元素，如果父元素里有其他的子元素则不匹配；
    $("div:only-child").css("background", "yellow")
  1. 表单对象属性过滤选择器
  • 此选择器主要是对所选择的表单元素进行过滤，例如选择被选中的下拉框，多选框等元素
    // 选中form元素下面的所有 可用 的input元素
    $("#form input:enabled").val("input here")

    // 选中form元素下面的所有 不可用 的input元素
    $("#form input:disabled").val("disabled")

    // 选择input所有checked的元素
    $("input:checked").length

    // 选择select 下面所有选中的元素
    $("select :selected").css("color","red")
  • 2.3.4 表单选择器
  • 为了使用户能够更加灵活地操作表单，jQuery中专门加入了表单选择器。利用这个选择器，能极其方便地获取到表单的某个或某类型的元素。
 // 选择所有的<input>, <textarea>, <select>, <button>元素；
// //注意与$("#form1 input")的区别
    $(":input").css("color", "red")

    // 选择单行文本 input type=text的框
    $(":text").css("background", "red")

    // 选择密码框 input type=password的框
    $(":password").css("background", "red")

    // 选择所有单选框 input type=radio的框
    $(":radio").css("background", "red")

    // 选择所有多选框 input type=checkbox的框
    $(":checkbox").css("background", "red")

    // 选择所有提交按钮 input type=submit的框， botton元素也会选中
    $(":submit").css("background", "red")


    // 选择所有图像按钮 input type=image的框
    $(":image").css("background", "red")

    // 选择所有重置按钮 input type=reset的框
    $(":reset").css("background", "red")

    // 选择所有按钮 input type=button的框
    $(":button").css("background", "yellow")

    // 选择所有上传域 input type=file的框
    $(":file").css("background", "yellow")

    // 选择所有不可见元素 input type=hidden的框
    $("form :hidden").show(1000)
  • 2.5 选择器中的一些注意事项
  • 2.5.1 选择器中含有特殊符号的注意事项
  • 1. 选择器中含有“· ”、“#”、“（”或“]”等特殊字符就需要转义，例如：
// HTML代码如下：
<div id="id#b">bb</div>
<div id="id[1]">cc</div>
//如果按照普通的方式来获取，就会报错：
$("#id#b");
$("#id[1]");
// 正确的写法如下：
$("#id\\#b");                 //转义特殊字符“#”
$("#id\\[1\\]");              //转义特殊字符“[ ]”

第3章 jQuery中的DOM操作

  • DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松地访问页面中所有的标准组件。
  • 3.1DOM操作的分类
  • 一般来说，DOM操作分为3个方面，即DOM Core（核心）、HTML-DOM和CSS-DOM。
  1. DOM Core（核心）
  • DOM Core并不专属于JavaScript，任何一种支持DOM的程序设计语言都可以使用它。它的用途并非仅限于处理网页，也可以用来处理任何一种使用标记语言编写出来的文档，例如XML。JavaScript 中的getElmentById()、getElementsByTagName()、getAttribute()和setAttribute()等方法，这些都是DOM Core的组成部分。
// 使用DOM Core来获取表单对象的方法：
document.getElementsByTagName("form")；
// 使用DOM Core来获取某元素的src属性的方法：
element.getAttribute("src")；
  1. HTML-DOM
  • 在使用JavaScript和DOM为HTML文件编写脚本时，有许多专属于HTML-DOM的属性。它提供了一些更简明的记号来描述各种HTML元素的属性。
// 使用HTML-DOM来获取表单对象的方法：
document.forms  //HTML-DOM提供了一个forms对象
// 使用HTML-DOM来获取某元素的src属性的方法：
element.src；
  1. CSS-DOM
  • CSS-DOM是针对 CSS的操作。在JavaScript中，CSS-DOM技术的主要作用是获取和设置style对象的各种属性。通过改变style对象的各种属性，可以使网页呈现出各种不同的效果。
// 例如：设置某元素style对象字体颜色的方法：
element.style.color = "red"；
  • 3.2jQuery中的DOM操作
  • 3.2.1 查找节点
  1. 查找元素节点
// HTML
<p title="选择你最喜欢的水果." >你最喜欢的水果是？</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>

// 打印第二个li的值；
var $li = $("ul li:eq(1)")
text = $li.text()
alert(text)
  1. 查找属性节点
  • 利用 jQuery 选择器查找到需要的元素之后，就可以使用 attr()方法来获取它的各种属性的值。attr()方法的参数写一个是取值，写两个是设值；
var $para = $("p")；                 //获取<p>节点
var p_txt = $para.attr("title")；    //获取<p>元素节点属性title
alert(p_txt)；                       //打印title属性值
  • 3.2.2 创建节点
  • 在DOM操作中，常常需要动态创建HTML内容，使文档在浏览器里的呈现效果发生变化，并且达到各种各样的人机交互的目的。
  1. 创建元素 并 插入文档
// 创建节点
var $li = $("<li><em>这是</em><b>一个</b><a href='#' >复杂的组合</a></li>")；
// 插入节点
$(ul).append($li)

3．创建属性节点

//包括元素节点、文本节点和属性节点, 其中title='香蕉'就是创建的属性节点
var $li_1 = $("<li title='香蕉'>香蕉</li>")；
  • 3.2.3 插入节点
<p title="选择你最喜欢的水果." >你最喜欢的水果是？</p>
<ul>
    <li title='苹果'>苹果</li>
    <li title='橘子'>橘子</li>
    <li title='菠萝'>菠萝</li>
</ul>
  • append
  • 在目标元素的结尾插入指定内容。
var $li1 = $("<li>香蕉</li>")
$("ul").append($li1)
  • prepend
  • 在目标元素的起始处插入指定内容。
var $li1 = $("<li>香蕉</li>")
$("ul").prepend($li1)
  • after
  • 在目标元素之后插入元素；
$("p").after(<b>content</b>")
  • after
  • 在目标元素之前插入元素；
    $("p").before(<b>content</b>")
  • 3.2.4 删除节点
  • jQuery 提供了三种删除节点的方法，即remove()，detach()和empty()。
  1. remove()方法
    • 当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。
    • 另外remove()方法也可以通过传递参数来选择性地删除元素；
// 获取第2个<li>元素节点后，将它从网页中删除
$("li:eq(1)").remove()

//将<li>元素中属性title不等于“菠萝”的<li>元素删除
$("ul li").remove("li[title!=菠萝]")；
  1. detach()方法
  • detach() 方法移除被选元素，包括所有文本和子节点。这个方法会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素。
  • detach() 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同。
  1. empty()方法
  • empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点
  • 3.2.5 复制节点
  • clone()方法
  • clone方法有一个可选参数。布尔值。规定是否复制元素的所有事件处理。
$("ul li").click(function(){
    $(this).clone(true).appendTo("ul")
    // $(this).parent().append($(this).clone())
})
  • 3.2.6 替换节点
  • 如果要替换某个节点，jQuery提供了相应的方法，即replaceWith()和replaceAll()。
  • replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM元素。
$("p").replaceWith("<strong>Do you like it?</strong>")
  • replaceAll()与replaceWith()作用相同，就是与之相反；
$("<strong>Do you like it?</strong>").replaceAll("p")
  • 注意：如果在替换之前，已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件。
  • 3.2.7 包裹节点
  • wrap()、wrapAll() 和 wrapInner()
  • wrap() 单独包裹
  • 如果要将某个节点用其他标记包裹起来，jQuery提供了相应的方法，即wrap()。该方法对于需要在文档中插入额外的结构化标记非常有用，而且它不会破坏原始文档的语义。
// 用div元素包裹ul元素；
$("ul").wrap("<div></div>")
  • wrapAll() 整体包裹
  • 该方法会将所有匹配的元素用一个元素来包裹。它不同于wrap()方法，wrap()方法是将所有匹配到的元素进行单独的包裹。
$("ul").wrap("<div></div>")
<div><li title="苹果">苹果</li>
<li title="橘子">橘子</li>
<li title="菠萝">菠萝</li></div>
  • wrapInner() 包裹匹配元素的子元素
$("ul").wrapInner("<b></b>")
// 效果如下：
<ul>
    <b>
        <li title="苹果">苹果</li>
        <li title="橘子">橘子</li>
        <li title="菠萝">菠萝</li>
    </b>
</ul>
  • 3.2.8 属性操作
  1. 获取属性和设置属性
var text = $("p").attr("title")
  • 如果要设置<p>元素的属性title的值，也可以使用同一个方法，不同的是，需要传递两个参数即属性名称和对应的值。
$("p").attr("title", "new title")
  • 如果需要一次性为同一个元素设置多个属性，可以使用下面的代码来实现：
$("p").attr({"title":"new title", "name":"test"})
  • 注意：jQuery 中的很多方法都是同一个函数实现获取（getter）和设置（setter）的，例如上面的attr()方法，既能设置元素属性的值，也能获取元素属性的值。类似的还有html()、text()、height()、width()、val()和css()等方法。
  1. 删除属性
  • 需要删除文档中某个元素的特定属性，可以使用 removeAttr()方法来完成该任务。
  • 如果需要删除<p>元素的title属性，可以使用下面的代码实现：
$("p").removeAttr("title")；   //删除<p>元素的属性title
  • 3.2.9 样式操作
  1. 获取样式和设置样式
  • 例如使用attr()方法来获取<p>元素的class；
var p_class = $("p").attr("class")；      //获取<p>元素的class
  • 也可以使用attr()方法来设置<p>元素的class，jQuery代码如下：
$("p").attr("class","high")；             //设置<p>元素的class为“high”
  1. 追加样式
  • jQuery提供了专门的addClass()方法来追加样式。
$("p").addClass("another")；   //给<p>元素追加“another”类
  1. 移除样式
$("p").removeClass("high")；  //移除<p>元素中值为“high”的class
  • 删除多个class属性
$("p").removeClass("high  another")；
  • 删除全部class属性；
$("p").removeClass()；     //移除<p>元素的所有class
  • 判断是否含有某个样式
    hasClass()可以用来判断元素中是否含有某个class，如果有，则返回true，否则返回false。
$("p").hasClass("another")；
  • 注意：这个方法是为了增强代码可读性而产生的。在jQuery内部实际上是调用了is()方法来完成这个功能的。该方法等价于如下代码：$("p").is(".another")；
  • 3.2.10 设置和获取HTML、文本和值
  1. html()方法
  • 此方法类似于JavaScript中的innerHTML属性，可以用来读取或者设置某个元素中的HTML内容。
    • 获取 元素的html代码：$("p").html()；
    • 设置 元素的html代码：$("p").html("html code")
var p_html = $("p").html()；         //获取<p>元素的HTML代码
$("p").html("<strong>你最喜欢的水果是？</strong>")； //设置<p>元素的HTML代码

注意：html()方法可以用于XHTML文档，但不能用于XML文档。

  1. text()方法
  • 此方法类似于JavaScript中的innerText属性，可以用来读取或者设置某个元素中的文本内容。
<p title="选择你最喜欢的水果." ><strong>你最喜欢的水果是？</strong></p>
var p_text = $("p").text()；              // 获取<p>元素的文本内容
alert(p_text)；                           // 你最喜欢的水果是？
  • 设置元素的text
$("p").text("你最喜欢的水果是？")；        //设置<p>元素的文本内容
  1. val()方法
  • 此方法类似于 JavaScript 中的value 属性，可以用来设置和获取元素的值。无论元素是文本框，下拉列表还是单选框，它都可以返回元素的值。如果元素为多选，则返回一个包含所有选择的值的数组。
<input type="text" id="address" value="请输入邮箱地址"/><br /><br />
<input type="text" id="password" value="请输入邮箱密码"/><br /><br />
<input type="button" value="登录"/><br />

<script>
    $("#address").focus(function () {       //地址框获得鼠标焦点    
        var $addval = $(this).val();        //获取地址文本框的值
    // if($addval==this.defaultValue),也可以使用defaultValue属性代替 
    //this指向当前的文本框，“this.defaultValue”就是当前文本框的默认值。
        if($addval=="请输入邮箱地址"){      
            $(this).val("")                //如果符合条件，则清空文本框内容      
        }
    })
    $("#address").blur(function () {   //地址框失去鼠标焦点
        var $addval = $(this).val();
        if(!$addval){
            $(this).val("请输入邮箱地址")   //如果符合条件，则设置内容
        }
    })
</script>
// 密码框方法同上
  • 通过上面的例子可以发现val()方法不仅能设置元素的值，同时也能获取元素的值。另外，val()方法还有另外一个用处，就是它能使select（下拉列表框）、checkbox（多选框）和radio（单选框）相应的选项被选中，在表单操作中会经常用到。
    $("#single").val("选择3号")                    // 单选框用val方法设定默认值；
    $("#multiple").val(["选择4号","选择3号"])     // 多选框用val方法设定多个默认值；

    $(":checkbox").val(["check1", "check3"])     // checkbox用val方法设定多个默认值；
    $(":radio").val(["radio2"])                   // radio用val方法设定默认值；
  • 3.2.11 遍历节点
  1. children()方法
  • 该方法用于取得匹配元素的子元素集合
  • 注意：children()方法只考虑子元素而不考虑其他后代元素。
    var $ul = $("ul").children()
    for(i=0, len=$ul.length; i<len; i++){
        // 如果只写$ul[i]，那里面存的是JavaScriptDom，就需要用js的属性innerHtml来获取里面的html
        // $($ul[i]) 用$()工厂函数把JavaScriptObj变成了jQueryObj； 
        alert($($ul[i]).html())      
    }
  1. next()方法
  • 该方法用于取得匹配元素后面紧邻的同辈元素。
var $p1 = $("p").next()；   //取得紧邻<p>元素后的同辈元素
  1. prev()方法
  • 该方法用于取得匹配元素前面紧邻的同辈元素。
var $ul = $("ul").prev()；   //取得紧邻<ul>元素前的同辈元素
  1. siblings()方法
  • 该方法用于取得匹配元素前后所有的同辈元素。（不包括选中元素本身）
var $p = $("#myli").siblings();
  1. closest()
  • 该方法用于取得最近的匹配元素。首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，逐级向上直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。
  • 比如，给点击的目标元素的最近的li元素添加颜色，可以使用如下代码：
$("body").click(function (e) {
    $(e.target).closest("li").toggleClass("bg")
})
  1. parent()，parents()与closest()的区别
  • parent(): 返回元素的父元素；
  • parents()：返回元素的所有祖先元素；
  • closest()：元素向上找，返回的第一个匹配的元素；
  • 3.2.12 CSS-DOM操作
  • 取得元素的css样式：
$("p").css("color")；   //获取<p>元素的样式颜色
$("p").css("color","red")；   //设置<p>元素的样式颜色为红色
$("p").css({"fontSize":"30px" ,"backgroundColor":"#888888"})  // 也可以同时设置多个样式属性

  • 注意：（1）如果值是数字，将会被自动转化为像素值。（2）在css()方法中，如果属性中带有“-”符号，例如font-size和background-color属性，如果在设置这些属性的值的时候不带引号，那么就要用驼峰式写法，例如：$("p").css({ fontSize : "30px" , backgroundColor : "#888888" })如果带上了引号，既可以写成“font-size”，也可以写成“fontSize”。总之建议大家加上引号，养成良好的习惯。

  • 对透明度的设置

$("p").css("opacity","0.5")；

  • css()方法获取的高度值与样式的设置有关，可能会得到"auto"，也可能得到"10px"之类的字符串；而 height()方法获取的高度值则是元素在页面中的实际高度，与样式的设置无关，并且不带单位。

  • 在CSS-DOM中，关于元素定位有以下几个经常使用的方法。

  1. offset()方法
  • 获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left，它只对可见元素有效。
var li = $("#myLi").offset()
alert(li.left)
alert(li.top)
  1. position()方法
  • 它的作用是获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，与 offset()一样，它返回的对象也包括两个属性，即 top和left。
var li = $("#myLi").position()
alert(li.left)
alert(li.top)
  1. scrollTop()方法和scrollLeft()方法
  • 这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离。
var $p =  $("p")；
var scrollTop =  $p.scrollTop()；    //获取元素的滚动条距顶端的距离
var scrollLeft =  $p.scrollLeft()；  //获取元素的滚动条距左侧的距离
  • 可以为这两个方法指定一个参数，控制元素的滚动条滚动到指定位置。例如使用如下代码控制元素内的滚动条滚动到距顶端300和距左侧300的位置：
var $p =  $("p")；
$("textarea").scrollTop(300)；       //元素的垂直滚动条滚动到指定的位置
$("textarea").scrollLeft(300)；      //元素的横向滚动条滚动到指定的位置

第4章 jQuery中的事件和动画

  • 4.1 jQuery中的事件
    $(document).ready() // DOM准备就绪就会执行；
    $(window).load() //则会在所有内容（包括窗口、框架、对象和图像等）加载完毕后触发
  • 4.1.2 事件绑定
  • 在文档装载完成后，如果打算为元素绑定事件来完成某些操作，则可以使用bind()方法来对匹配元素进行特定事件的绑定，与ready()方法一样，bind()方法也可以多次调用。
  • bind()方法的调用格式为：bind( event [, event.data] , function)；
        $("h5.head").bind(
            {
                "mouseover":function (){$(".content").css({"width":"200px", "border":"1px solid blue", "background-color":"cyan", "margin-top":"-25px"}).show(10)},
                "mouseout":function (){$(".content").hide()},
            })
    })
  • 4.1.3 合成事件
  • jQuery有两个合成事件—hover()方法和toggle()方法，
  1. hover()
  • hover()方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第1个函数（enter）；当光标移出这个元素时，会触发指定的第2个函数（leave）。
  • hover()的语法hover(enter,leave)；
    $(function(){
        $("#panel h5.head").hover(function(){
            $(this).next().show();
        },function(){
            $(this).next().hide();
        });
    });

  • 4.1.4 事件冒泡

  • 阻止事件冒泡

  • 在页面上可以有多个事件，如果span in div in body， 这3个元素都绑定了click，如果点击span同时会引发div和body的click事件；如果需要阻止事件冒泡可以使用：event.stopPropagation()

$('span').bind("click",function(event){                 //event : 事件对象
var txt = $('#msg').html() + "<p>内层span元素被单击.<p/>"；
$('#msg').html(txt)；
event.stopPropagation()；                           //停止事件冒泡
})；
  • event.stopPropagation()； 阻止冒泡也可以改写为：return false；
  • 阻止默认行为
  • 在jQuery中，提供了preventDefault()方法来阻止元素的默认行为。
  • 举一个例子，在项目中，经常需要验证表单，在单击“提交”按钮时，验证表单内容，例如某元素是否是必填字段，某元素长度是否够 6 位等，当表单不符合提交条件时，要阻止表单的提交（默认行为）。
<script type="text/javascript">
        $(function(){
            $("#sub").bind("click",function(event){
                var username = $("#username").val();                         //获取元素的值
                if(username==""){                                             //判断值是否为空
                    $("#msg").html("<p>文本框的值不能为空.</p>");      //提示信息
                    event.preventDefault();                             //阻止默认行为( 表单提交 )
                }
            });
        })
</script>

  • **event.preventDefault()； 阻止默认行为也可以改写为：return false；
    **

  • 4.1.6 移除事件

  • 删除元素的所有click事件 ：$('#btn').unbind("click");

  • 语法：unbind([type],[data])；

  • 第1个参数是事件类型，第2个参数是将要移除的函数，具体说明如下。

    • （1）如果没有参数，则删除所有绑定的事件。
    • （2）如果提供了事件类型作为参数，则只删除该类型的绑定事件。
    • （3）如果把在绑定时传递的处理函数作为第2个参数，则只有这个特定的事件处理函数会被删除。

  • 单独删除某一个事件：

    // 首先需要为这些匿名处理函数指定一个变量。
    $('#btn').bind("click", myFun1 = function(){
        $('#test').append("<p>我的绑定函数1</p>");
    }).bind("click", myFun2 = function(){
        $('#test').append("<p>我的绑定函数2</p>");
    }).bind("click", myFun3 = function(){
        $('#test').append("<p>我的绑定函数3</p>");
    });

    // 然后就可以单独删除某一个事件了，jQuery代码如下：
    $('#delTwo').click(function(){
        $('#btn').unbind("click",myFun2); //删除“绑定函数2"
    });
  • one( type, [data], fn )；
  • 只需要触发一次，随后就要立即解除绑定的情况， jQuery 提供了一种简写方法——one()方法。One()方法可以为元素绑定处理函数。当处理函数触发一次后，立即被删除。即在每个对象上，事件处理函数只会被执行一次。
  • 4.1.7 模拟操作
  1. 常用模拟
  • 以使用trigger()方法完成模拟操作。例如可以使用下面的代码来触发id为btn的按钮的click事件。
  • 也可以直接用简化写法click()，来达到同样的效果：
$('#btn').trigger("click")；
$('#btn').click()；
  1. 触发自定义事件
// 例如为元素绑定一个“myClick”的事件，jQuery代码如下：
$('#btn').bind("myClick", function(){
    $('#test').append("<p>我的自定义事件.</p>")；
})；
// 想要触发这个事件，可以使用以下代码来实现：
$('#btn').trigger("myClick")；
  1. 传递数据
  • trigger(type,[data])方法有两个参数，第1个参数是要触发的事件类型，第2个参数是要传递给事件处理函数的附加数据，以数组形式传递。通常可以通过传递一个参数给回调函数来区别这次事件是代码触发的还是用户触发的。
下面是一个传递数据的例子。
$('#btn').bind("myClick", function(event, message1, message2){           //获取数据
$('#test').append( "<p>"+message1 + message2 +"</p>")；
})；
$('#btn').trigger("myClick", ["我的自定义","事件"] )；                   //传递两个数据
  1. 执行默认操作
  • trigger()方法触发事件后，会执行浏览器默认操作。例如：
  • $("input").trigger("focus")；
  • 以上代码不仅会触发为<input>元素绑定的focus事件，也会使<input>元素本身得到焦点（这是浏览器的默认操作）。
  • 如果只想触发绑定的focus事件，而不想执行浏览器默认操作，可以使用jQuery中另一个类似的方法——triggerHandler()方法。
  • $("input").triggerHandler("focus")；
  • 该方法会触发<input>元素上绑定的特定事件，同时取消浏览器对此事件的默认操作，即文本框只触发绑定的focus事件，不会得到焦点。
  • 4.1.8 其他用法
  1. 绑定多个事件类型
$(function(){
    $("div").bind("mouseover  mouseout", function(){
        $(this).toggleClass("over");
    });
});
  1. 添加事件命名空间，便于管理
  • 例如可以把为元素绑定的多个事件类型用命名空间规范起来，jQuery代码如下:
$(function(){
    $("div").bind("click.plugin",function(){      // 为click添加了plugin命名空间
        $("body").append("<p>click事件</p>");
    });
    $("div").bind("mouseover.plugin", function(){   // 为mouseover添加了plugin命名空间too
        $("body").append("<p>mouseover事件</p>");
    });
    $("div").bind("dblclick", function(){
        $("body").append("<p>dblclick事件</p>");
    });
    $("button").click(function() {
        $("div").unbind(".plugin");         // 为div元素unbind时只需要指定命名空间即可删除所有此命名空间的事件
    });
});
  1. 相同事件名称，不同命名空间执行方法
  • 例如可以为元素绑定相同的事件类型，然后以命名空间的不同按需调用
$(function(){
    $("div").bind("click",function(){
        $("body").append("<p>click事件</p>");
    });
    $("div").bind("click.plugin", function(){
        $("body").append("<p>click.plugin事件</p>");
    });
    $("button").click(function() {
        $("div").trigger("click!");   //注意click后面的感叹号，+感叹号只触发没有命名空间的click事件;
    });
});
  • 如果需要两者都被触发，改为如下代码即可：
  • $("div").trigger("click")； //去掉感叹号
  • 4.2jQuery中的动画
  • 注意：用 jQuery做动画效果要求要在标准模式下，否则可能会引起动画抖动。标准模式即要求文件头部包含如下的DTD定义：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  1. show()方法和hide()方法

    • show()方法和hide()方法是 jQuery 中最基本的动画方法。在 HTML 文档里，为一个元素调用hide()方法，会将该元素的display样式改为“none”。
    • 可以使用show()方法将元素的display样式设置为先前的显示状态（“block”或“inline”或其他除了“none”之外的值）。

  2. show()方法和hide()方法让元素动起来

  • 如果希望在调用show()方法时，元素慢慢地显示出来，可以为show()方法指定一个速度参数，"slow", ",normal”和“fast”（长度分别是600毫秒，400毫秒和200毫秒）。$("element").show("slow")；
  • 不仅如此，还可以为显示速度指定一个数字，单位是毫秒。例如，使用如下代码使元素在1秒钟（1000毫秒）内显示出来：$("element").show(1000)；
  • 4.2.2 fadeIn()方法和fadeOut()方法
$(":header").click(function () {
    var $con = $(this).next()
    if($con.is(":visible")){
        $con.fadeOut()
    }
    else{
        $con.fadeIn()
    }
})

4.2.3 slideUp()方法和slideDown()方法

  • slideDown() 方法通过使用滑动效果，显示被隐藏的元素。
  • slideUp() 通过使用滑动效果，隐藏被选元素，如果元素已显示出来的话。
  • $(selector).slideUp or slideDown(speed,callback)
  • speed 可以是 毫秒数 也可以是关键词 "slow"，"normal"，"fast"
  • callback可选。slideUp 函数执行完之后，要执行的函数。
  • 4.2.4 自定义动画方法animate()
  • $(selector).animate(styles,speed,easing,callback)
  • animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
  • 只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。
$("#btn1").click(function () {
    $("p").animate({"borderWidth":"10px", fontSize:"30px"})
})
$("#btn2").click(function () {
    $("p").animate({"borderWidth":"1px", fontSize:"20px"})
})
  • 综合动画
  • 接下来将完成更复杂的动画。单击<div>元素后让它向右移动的同时增大它的高度，并将它的不透明度从50%变换到100%，然后再让它从上到下移动，同时它的宽度变大，当完成这些效果后，让它以淡出的方式隐藏。
    $(function(){
        $("#myP").css("opacity", "0.5");//设置不透明度
        $("#myP").click(function(){
            $(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
                .animate({top: "200px", width :"200px"}, 3000 )
                .fadeOut("slow");
        });
    });
  • 4.2.5 动画回调函数
  • 如果在动画的最后一步要切换元素的CSS样式，而不是隐藏元素：
  • 如果只是按照常规的方式，将fadeOut ("slow") 改为css ("border","5px solid blue") 预期的效果是在动画的最后一步改变元素的样式，而实际的效果是，刚开始执行动画的时候，css()方法就被执行了。原因是 css()方法并不会加入到动画队列中，而是立即执行。
  • 可以使用回调函数（callback）对非动画方法实现排队。只要把 css()方法写在最后一个动画的回调函数里即可。代码如下：
$("#panel").click(function(){
    $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
        .animate({top: "200px" , width :"200px"}, 3000, function(){
            $(this).css("border","5px solid blue");
        })
});
  • 注意：callback回调函数适用于jQuery所有的动画效果方法，例如slideDown()方法的回调函数：
  • 这段代码表示id = "element"的元素将在0.4秒内（正常速度）向下完全展开。当动画完成后，执行回调函数体内的代码。
$("#element").slideDown("normal", function(){
//在效果完成后做其他的事情
})；
  • 4.2.6 停止动画和判断是否处于动画状态
  1. 停止元素的动画

  • 很多时候需要停止匹配元素正在进行的动画，例如上例的动画，如果需要在某处停止动画，需要使用stop()方法。
    stop()方法的语法结构为：stop([clearQueue],[gotoEnd])；

  • 参数clearQueue和gotoEnd都是可选的参数，为Boolean值（ture或flase）。

  • clearQueue：后面的动画队列是否还要执行；true执行，false不执行；

  • gotoEnd：是否需要完成当前的动画；true完成，false不完成；

    $(".btn1").click(function(){
        //$("p").stop();                                         // 停止当前动画；
        $("p").css("left",$("p").position().left+"px")      //  当前位置；
        $("p").css("right","auto");                          //  反向设置为auto
        $("p").animate({left:"+=100px"},1000);                //当前位置向右移动100

    });
    $(".btn2").click(function(){
        $("p").stop();
        $("p").css("right", -($("p").position().left)+"px")
        $("p").css("left","auto");
        $("p").animate({"right":"+=100px"},1000);
    });
  1. 判断元素是否处于动画状态
if(! $(element).is(":animated")){        //判断元素是否正处于动画状态
//如果当前没有进行动画，则添加新动画
}
  1. 延迟动画 delay()
$(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
    .delay(1000)
    .animate({top: "200px" , width :"200px"}, 3000 )
    .delay(2000)
    .fadeOut("slow");

4.2.7 其他动画方法

  1. toggle( speed, [callback] )

    • toggle()方法可以切换元素的可见状态。如果元素是可见的，则切换为隐藏的；如果元素是隐藏的，则切换为可见的。

  2. slideToggle()方法

    • slideToggle()方法通过高度变化来切换匹配元素的可见性。这个动画效果只调整元素的高度。
$("#panel h5.head").click(function(){
    $(this).next().slideToggle();
});
  1. fadeTo()方法
  • $(selector).fadeTo(speed,opacity,callback)
$(".btn1").click(function(){
  $("p").fadeTo(1000,0.4);
});
  1. fadeToggle()方法

  • $(selector).fadeToggle(speed,easing,callback)

  • 淡入和淡出的切换：fadeToggle() 方法在 fadeIn()和 fadeOut() 方法之间切换。

  • 4.2.8 动画方法概括

    动画方法概括

第5章 jQuery对表单、表格的操作及更多应用

  • 5.1表单应用
  • 5.1.1 单行文本框应用
  • 对textarea设置动画animate
<form>
    <div class="msg">
        <div class="msg_caption">
            <span class="bigger" >向上</span>
            <span class="smaller" >向下</span>
        </div>
        <div>
            <textarea id="comment" rows="8" cols="20">多行文本框高度变化.多行文本框高度变化.多行文
            本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变
            化.多行文本框高度变化.</textarea>
        </div>
    </div>
</form>

// jQuery代码
$(function(){
    var $comment = $('#comment');                      //获取评论框Obj
    $('.bigger').click(function(){                      //“放大”按钮绑定单击事件
        if( $comment.height() < 500 ){
            //重新设置高度，在原有的基础上加50
            if(!$comment.is(":animated")){
                // $comment.animate({height:"-=50"},400);   // element高度的变化
                $comment.animate({scrollTop:"-=50"},400);   // element滚动条高度变化
            }
        }
    });
    $('.smaller').click(function(){                     //“缩小”按钮绑定单击事件
        if( $comment.height() > 50 ){
    //重新设置高度，在原有的基础上减50
            if(!$comment.is(":animated")){
                $comment.animate({scrollTop:"+=50" },400);
            }
    }
    });
});
  • 对复选框最基本的应用，就是对复选框进行全选、反选和全不选等操作。复杂的操作需要与选项挂钩，来达到各种级联反应效果。
<form>
    你爱好的运动是？<br/>
    <input type="checkbox" name="items" value="足球"/>足球
    <input type="checkbox" name="items" value="篮球"/>篮球
    <input type="checkbox" name="items" value="乒乓球"/>乒乓球
    <input type="checkbox" name="items" value="羽毛球"/>羽毛球
    <br/>
    <input type="button" id="CheckedAll" value="全  选"/>
    <input type="button" id="CheckedNo" value="全不选"/>
    <input type="button" id="CheckedRev" value="反  选"/>
    <input type="button" id="send" value="提  交"/>
</form>


</body>

<script type="text/javascript">


    $("#CheckedAll").click(function(){
      //哪些应该用prop()访问呢？第一个原则：只添加属性名称该属性就会生效应该使用prop()；第二个原则：只存在true/false的属性应该使用prop()。按照官方说明，如果是设置disabled和checked 这些属性，应使用prop()方法，而不是使用attr()方法。
        //对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
        //对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
        $('input[type=checkbox]').prop("checked","true");
    });

    $("#CheckedNo").click(function(){
        $('[name=items]:checkbox').prop('checked', false);   //
    });
    
    $("#CheckedRev").click(function () {
        $("input[type=checkbox]").each(function () {                 // 遍历每一个符合的元素
            // 值取反, 如果选中checkbox是true那么用！变成false，没选中false！取反变成true作为值设置到checked属性里;
            $(this).prop("checked", !$(this).prop("checked"))
        })
    })
    
    $("#send").click(function () {
        str = "you checked is ： "
        $('input[type=checkbox]:checked').each(function () {     // :checked 挑选出选中的checkbox
            str += $(this).val()+"\r\n";                         // val() get element value
        })
        alert(str)
    })
  • 根据一个复选框的属性值 来给其它复选框加同样的属性值
$("#CheckedAll").click(function(){
    $('[name=items]:checkbox').attr("checked", this.checked);
});

5.1.4 下拉框应用

  • 是某网站的一个后台新增界面，在“负责频道”这个区域，用户可以通过中间的按钮将左边选中的选项添加到右边，也可以将右边的选项添加到左边，或者双击选项，将其添加给对方。


    图片.png
    <style>
        select {
            width:100px;
            height:160px;
        }
        .floatDiv{
            float:left;
        }
        #select1{
            background: #eaffe7;
        }
        #select2{
            background: #ffd9eb;
        }
    </style>

    <script src="./jquery/jquery-3.3.1.js" type="text/javascript"></script>
</head>
<body>
    <select multiple id="select1">
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option>
        <option value="4">option4</option>
        <option value="5">option5</option>
        <option value="6">option6</option>
        <option value="7">option7</option>
        <option value="8">option8</option>
    </select>
    <select multiple id="select2"></select>
    <div>
        <div class="floatDiv">
            <span id="add">添加选中项&gt; &gt; </span><br/>
            <span id="addAll">添加全部项&gt; &gt;</span>
        </div>

        <div class="floatDiv">
            <span id="remove">删除选中项&gt; &gt; </span><br/>
            <span id="removeAll">删除全部项到左边&gt; &gt;</span>
        </div>
    </div>
</body>

<script type="text/javascript">
    $("span#add").click(function () {
        var $option = $("select#select1 option:selected")
        var $remove = $option.remove()
        $("#select2").append($remove)
    })

    $("#addAll").click(function () {
        $("#select2").append($("#select1 option").remove())
    })
    
    $("span#remove").click(function () {
        var $option = $("select#select2 option:selected")
        var $remove = $option.remove()
        $("#select1").append($remove)
    })

    $("#removeAll").click(function () {
        $("#select1").append($("#select2 option").remove())
    })

    $("#select1").dblclick(function () {
        var $options =  $("option:selected");          //获取选中的选项
        $options.appendTo('#select2');                      //追加给对方
    })

    $("#select2").dblclick(function () {
        var $options =  $("option:selected");          //获取选中的选项
        $options.appendTo('#select1');                      //追加给对方
    })
</script>
  • 5.1.5 表单验证
<style>
        div.int{
            width:500px;
            text-align:left;
        }
        div.sub{
            width:230px;
            text-align:center;
            position:relative;
        }
        .high{
            color:red;
            font-weight:bold;
        }
    </style>
    <script src="./jquery/jquery-3.3.1.js" type="text/javascript"></script>
</head>
<body>
<form method="post" action="">
    <div class="int">
        <label for="username">用户名:</label>
        <input type="text" id="username" class="required" />
    </div>
    <div class="int">
        <label for="email">邮箱:</label>
        <input type="text" id="email" class="required" />
    </div>
    <div class="int">
        <label for="personinfo">个人资料:</label>
        <input type="text" id="personinfo" />
    </div>
    <div class="sub">
        <input type="submit" value="提交" id="send"/>&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="reset" id="res"/>
    </div>
</form>
</body>

<script type="text/javascript">

    $("form :input.required").each(function () {
        $(this).after($("<strong class='high'> * </strong>"))
    })

    $("form :input").bind("blur keyup focus", function () {
        var $parent = $(this).parent()
        if($(this).is($("#username"))){
            $(this).parent().find(".formtips").remove()
            if(this.value=="" || this.value.length<6){

                $(this).after($('<span class="formtips onError">至少输入六位的用户名</span>'))
            }
            else{
                $(this).after($('<span class="formtips onSuccess">输入正确</span>'))
            }
        }
        if ($(this).is($("#email"))){
            $(this).parent().find(".formtips").remove()
            if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]+/.test(this.value) ) ){
                $(this).after($('<span class="formtips onError">请输入正确的E-Mail地址</span>'))
            }
            else{
                $(this).after($('<span class="formtips onSuccess">输入正确</span>'))
            }
        }
    })

    $("#send").click(function () {
        $("form .required:input").trigger("blur");
        if($("form .onError").length){
            return false
        }
        alert("go to next...")
    })
</script>
  • 5.2表格应用
  • 5.2.1 表格变色
    1.普通的隔行变色 
// Html 代码
<table>
<thead>
<tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
</thead>
<tbody>
<tr><td>张山</td><td>男</td><td>浙江宁波</td></tr>
<tr><td>李四</td><td>女</td><td>浙江杭州</td></tr>
<tr><td>王五</td><td>男</td><td>湖南长沙</td></tr>
<tr><td>赵六</td><td>男</td><td>浙江温州</td></tr>
<tr><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
<tr><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
</tbody>
</table>
// jQuery 代码
<script>
$("tr:odd").addClass("odd")；             /* 给奇数行添加样式*/
$("tr:even").addClass("even")；           /* 给偶数行添加样式*/
</script>

2.单击控制表格行高亮

$("tbody>tr").click(function () {
    $(this).addClass("selected").siblings().removeClass("selected");
})
// 当初始化表格的时候，默认已经选中的行将被高亮显示
$('tbody>tr:has(:checked)').addClass('selected')；

3.复选控制多行表格行高亮

$("tbody>tr").click(function () {
    if($(this).hasClass("selected")){
        $(this).removeClass("selected")
    }
    else{
        $(this).addClass("selected")
    }
})

//可以简化成以下格式
$('tbody>tr').click(function() {
    var hasSelected=$(this).hasClass('selected');
    $(this)[hasSelected?"removeClass":"addClass"]('selected');
})
  • 5.2.2 表格展开关闭
// Html 代码
<table>
    <thead>
    <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
    </thead>
    <tbody>
    <tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr>
    <tr class="child_row_01"><td>张山</td><td>男</td><td>浙江宁波</td></tr>
    <tr class="child_row_01"><td>李四</td><td>女</td><td>浙江杭州</td></tr>
    <tr class="parent" id="row_02"><td colspan="3">前台开发组</td></tr>
    <tr class="child_row_02"><td>王五</td><td>男</td><td>湖南长沙</td></tr>
    <tr class="child_row_02"><td>赵六</td><td>男</td><td>浙江温州</td></tr>
    <tr class="parent" id="row_03"><td colspan="3">后台开发组</td></tr>
    <tr class="child_row_03"><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
    <tr class="child_row_03"><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
    </tbody>
</table>

// jQuery 代码
<script>
$("tr[class=parent]").click(function () {
    var classv = $(this).prop("id")
    $(this).siblings(".child_"+classv).toggle()
})         // 选中的element立刻调用一次click
</script>
  • 如果当用户刚进入页面时，默认需要收缩起来，也是很简单的。只要触发click()事件即可。
$("tr[class=parent]").click(function () {
    var classv = $(this).prop("id")
    $(this).siblings(".child_"+classv).toggle()
}).click()
  • 5.2.3 表格内容筛选
  • 首先在表格上方添加一个文本框，用于根据用户输入的内容来筛选表格内容，然后为文本框绑定blur事件
$("input#myi").ready(function () {
    $("tr").css("display","none").removeClass("selected")
    $("input#myi").blur(function () {
        $("tr").css("display","none").removeClass("selected")
        var value = $(this).val();
        $("tr:contains('"+value+"')").addClass("selected").show()
    })
})
  • 5.3其他应用
  • 5.3.1 网页字体大小
<body>
<div class="msg">
    <div class="msg_caption">
        <span class="bigger" >放大</span>
        <span class="smaller" >缩小</span>
    </div>
    <div>
        <p id="para">
            This is some text. This is some text. This is some text. This is some text. This is some text.
            This is some text. This is some text. This is some text. This is some text. This is some text. This is some
            text. This is some text. This is some text. This is some text. This is some text. This is some text. This is
            some text. This is some text. This is some text.
        </p>
    </div>
</div>

</body>
<script type="text/javascript">

    $("span").click(function () {
        var thisEle = $("#para").css("font-size")
        var textFontSize = parseInt(thisEle , 10)    // 转换为10进制的整数；
        var unit = thisEle.slice(-2)       // 得到字体单位slice切-2开始到最后的str 这里就是px
        var cName = $(this).attr("class")     // 得到点击元素的class属性
        if(cName=="bigger"){
            if(textFontSize<=22){            // 不超过22时+=2
                textFontSize+=2;
            }

        }
        else if(cName=="smaller") {
            if(textFontSize>=12){
                textFontSize-=2;
            }
        }
        $("p#para").css("font-size",textFontSize+unit)
    })
</script>

5.3.2 网页选项卡

   <style>
        ul{
            padding-left:0;
        }
        ul li{
            width:60px;
            height:20px;
            border:1px solid black;
            margin-right:5px;
            background-color: #eaeaea;
            display:block;
            float:left;
            text-align:center;
        }

        .tab_box div.hide{
            display:none
        }
        .tab_box div{
            width:500px;
            height:250px;
            border:1px solid black;
            float:left;
        }
        .tab_box{
            clear:both;
        }
        .selected{
            background-color: #4974ff;
            color:white;
        }
    </style>
    <script src="./jquery/jquery-3.3.1.js" type="text/javascript"></script>
</head>
<body>

<div class="tab">
    <div class="tab_menu">
        <ul>
            <li class="selected">时事</li>
            <li>体育</li>
            <li>娱乐</li>
        </ul>
    </div>
    <div class="tab_box">
        <div>时事</div>
        <div class="hide">体育</div>
        <div class="hide">娱乐</div>
    </div>
</div>

</body>
<script type="text/javascript">
    $("ul li").click(function () {
        $(this).siblings().removeClass("selected").end().addClass("selected");     // 先把选中的siblings全部删除selected，再把选中的加上selected；
        var value = $(this).text()
        $(".tab_box div:contains('"+value+"')").siblings().hide().end().show()     // 先把内容隐藏，然后把相关内容显示；
    })
</script>
  • 5.3.3 网页换肤
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,772评论 6赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,458评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,610评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,640评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,657评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,590评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,962评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,631评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,870评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,386评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,969评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2赞 342

推荐阅读更多精彩内容