044 学习记录

来源：互联网发布：淘宝上好看的包包店编辑：程序博客网时间：2024/06/03 19:28

jQuery

    javascript 和 Query，即是辅助Javascript开发的库。    特点：    1.jQuery是一个快速的简介的JavaScript框架，可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程。    1>.提供了强大的功能函数    2>.解决浏览器兼容性问题    3>.纠正错误的脚本知识    4>.体积小、使用灵活（只需引入一个js文件）    5>.易扩展、插件丰富    作用：    简化JavaScript和Ajax编程，能够使程序员从设计和书写繁杂的JS应用中解脱出来。将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。方便地选择页面元素(模仿CSS选择器更精确、灵活)动态更改页面样式/页面内容(操作DOM，动态添加、移除样式)控制响应事件(动态添加响应事件)提供基本网页特效(提供已封装的网页特效方法)快速实现通信(ajax)。用户体验的角度：改善了页面视觉效果，增强了与页面的交互性，体验更绚丽的网页物资。

基本语法：

    $(function(){}) ;是$(document).ready(function(){});的简写.    $(document).ready(function(){})和window.onload 的区别        ready表示文档已加载完成（不包含图片等非文字媒体文件）        onload是指页面包含图片在内的所有元素都加载完成        $(document).ready(function(){})要比window.onload先执行

jQuery包装集:

    在jQuery的世界中将所有的对象，无论是一个还是一组，都封装成一个jQuery包装集，即集合。也就是说，$()的返回结果都是集合，不是单个对象。    例如：var jQueryObject = $(“#testDiv");    虽然，通过id获得的是一个元素对象，但是依然以集合的方式返回，只不过，集合中只有一个元素而已。    jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。    基础语法是：$(selector).action()    美元符号定义 jQuery    选择符（selector）“查询”和“查找” HTML 元素    jQuery 的 action() 执行对元素的操作    示例    $(this).hide() - 隐藏当前元素    $("p").hide() - 隐藏所有段落    $(".test").hide() - 隐藏所有 class="test" 的所有元素    $("#test").hide() - 隐藏所有 id="test" 的元素

$(this)和this的区别

    当你用的是jquery时，就用$(this)，如果是JS，就用this    JS里的元素只要包上$()就是jquery对象了，而jquery的对象只要加上[0]或者.get(0)，就是js元素了。    $(this)是jquery对象，this就是简单指当前元素。jquery对象不能直接指定元素的属性（ele.style），需要get（index）或者直接（index）取得对象中元素才行    JQuery中的 $() 这个符号，实际上这个符号在JQuery中相当于JQuery（），即$(this)=jquery(this);也就是说，这样可以返回一个jquery对象。那么，当你在网页中alert($('#id'));时，会弹出一个[object Object ]，这个object对象，也就是jquery对象了

jQuery包装集与DOM 对象的互转

jQuery包装集转DOM对象

    jQuery包装集是一个集合，所以我们可以通过索引器访问其中的某一个元素    //testDiv是页面某元素的id    var domObject = $(“#testDiv”)[0];

DOM对象转jQuery包装集

    //testDiv是页面某元素的id    var div = document.getElementById("testDiv");    var domToJQueryObject = $(div);    .get(index)：获取包装集里的一个或所有匹配的元素。如果不指定参数，包装集里的所有元素就以javascript数组的形式返回；如果指定的下表参数，就返回下表所对应的元素。

JQuery获取内容和属性

jQuery DOM 操作jQuery 中非常重要的部分，就是操作 DOM 的能力。jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。获得内容 - text()、html() 以及 val()三个简单实用的用于 DOM 操作的 jQuery 方法：    text() - 设置或返回所选元素的文本内容    html() - 设置或返回所选元素的内容（包括 HTML 标记）    val() - 设置或返回表单字段的值

<head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){  $("#btn1").click(function(){    alert("Text: " + $("#test").text());  });  $("#btn2").click(function(){    alert("HTML: " + $("#test").html());  });});</script></head><body><p id="test">这是段落中的<b>粗体</b>文本。</p><button id="btn1">显示文本</button><button id="btn2">显示 HTML</button></body>

这里写图片描述

<head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){  $("button").click(function(){    alert("Value: " + $("#test").val());  });});</script></head><body><p>姓名：<input type="text" id="test" value="米老鼠"></p><button>显示值</button></body>

这里写图片描述

获取属性 - attr()    jQuery attr() 方法用于获取属性值。如何获得链接中 href 属性的值$("button").click(function(){            alert($("#test").attr("href"));            });

JQuery的选择器

基本选择器

     * :选择所有元素。    例:$(“*")选择页面所有元素      #id:根据元素id选择。          例:$("#divId") 选择id为divId的元素      .class:根据元素的css类选择。          例:$(".bgRed")选择所用CSS类为bgRed的元素      element:根据元素的名称选择。          例:$("a") 选择所有<a>元素     select1,select2,selectN:组选择器，同时选中几个选择器。          例：$("#divId, a, .bgRed")     设置值：$("#one").css("backgroundColor","red");

层次选择器

    包含选择器： ancestor descendant:在给定的祖先元素下匹配所有的后代元素       例：$(“form input”) 选择表单中所有input元素    子选择器： parent > child:选择parent的直接子节点child              例：$(“.myList>li”) 选择CSS类为myList元素中的直接子节点<li>对象。          相邻选择器： prev + next:选择prev元素后面的next元素,即相邻元素              例：$(“label + input”) 选择所有跟在label后面的input元素     兄弟选择器： prev～siblings:选择prev后面的根据siblings过滤的元素，即同辈元素。              例：$(“form～input”)选择所有与表单同辈的input元素

            //包含选择器    form里的所有form元素            $("form input").css({"background":"red","height":"200px"});            //子选择器    .mylist直接子元素            $(".mylist>li").css("background","green");            //相邻选择器  选择所有跟在.mylist2后面的input元素                            $(".mylist2+input").css("background","blue");            //兄弟选择器  和form同级别的input元素            $("form~input").css("backgroundColor","yellow");            $("#one div").css("backgroundColor","red");            $("#one>div").css("backgroundColor","blue");

内容选择器

    :contains(text) :匹配包含给定文本的元素       例：$(“div:contains(‘John’)”)查找所有包含 “John” 的div元素     :empty:匹配所有不包含子元素或者文本的空元素       例：$("td:empty")     :has(selector):匹配含有选择器所匹配的元素的元素        例：$("div:has(p)").addClass("test");给所有包含p元素的div元素添加一个test类

可见性选择器

    :hidden:匹配所有的不可见元素      例：<table>       <tr style="display:none"><td>Value 1</td></tr>      <tr><td>Value 2</td></tr>      </table>             $(“tr:hidden”)结果为：      <tr style="display:none"><td>Value 1</td></tr>     :visible:匹配所有的可见元素      例：$("tr:visible")结果为：       <tr><td>Value 2</td></tr>

$(function(){        alert($("tr:hidden")[0]);        $("tr:visible").css("backgroundColor","red");    });<table>        <tr style="display:none"><td>我是隐身的</td></tr>        <tr><td>我是可见的</td></tr>        <tr><td>我也是可见的</td></tr></table>

表单选择器

    input:匹配所有input,textarea,select和button元素。    例：$(":input")查找所有的input元素    :text:匹配所有的单行文本框。    :password:匹配所有密码框。    :button:匹配所有按钮。    :radio:匹配所有单选按钮。    :checkbox:匹配所有复选框。    :hidden:匹配所有不可见元素，或者type为hidden的元素。    :image:匹配所有图像域。    :submit:匹配所有提交按钮。    :reset:匹配所有重置按钮。    :file:匹配所有文件域。    如果是:#form1:input就表示匹配所有input, textarea, select 和 button 元素        #form1(此处有一个空格):input返回id为form 后所有input, textarea, select 和 button 元素        #form1 input 返回id为form 后所有input    $("div").append()    .css("color", "red")

<script type="text/javascript" src="jquery-1.8.3.js"></script><script type="text/javascript">    $(function(){         var $alltext=$("#formid :text");        var $allbutton=$("#formid :button");        var $allinput=$("#formid input");//#formid后的所有input        var $input=$("#formid :input");//#formid 后的所有input button ...        $("#resultid").click(function(){            $("#divid").append("有"+$alltext.length+"个text类型")                        .append("有"+$allbutton.length+"个button类型")                        .append("有"+$allinput.length+"个input类型")                        .append("有"+$input.length+"个类型");        });    });</script></head><body>    <h1>表单选择器</h1>    <hr/>    <form action="xxxx" id="formid">        <button>Button</button><br/>        <input type="checkbox"/>1        <input type="checkbox"/>2        <input type="checkbox"/>3<br/>        <input type="file"/><br/>        <input type="text"/><br/>        <input type="radio"/>1        <input type="radio"/>2<br/>        <input type="reset" value="重置"/><br/>        <input type="submit" value="提交"/><br/>        <input type="text" /><br/>        <textarea rows="3" cols="11"></textarea><br/>        <input type="button" value="button"/><br/>        <select>            <option>11</option>            <option>22</option>            <option>33</option>        </select>    </form>    <button id="resultid">显示结果</button><br/>    <div id="divid"></div></body>

常用伪类选择器

    伪类选择器：    可以看作是可以看作是一种特殊的类选择符    :first      匹配找到的第1个元素    :last       匹配找到的最后一个元素    :eq     匹配一个给定索引值的元素    :even       匹配所有索引值为偶数的元素    :odd      匹配所有索引值为奇数的元素    :gt(index)  匹配所有大于给定索引值的元素    :lt(index)  匹配所有小于给定索引值的元素    :not        去除所有与给定选择器匹配的元素

    <script type="text/javascript" src="jquery-1.8.3.js"></script><script type="text/javascript">    $(function(){        $("#one").click(function(){            alert($("td:first")[0].innerHTML);        });        $("#last").click(function(){            alert($("td:last")[0].innerHTML);        });        $("#eq").click(function(){            alert($("td:eq(4)")[0].innerHTML);        });        $("#even").click(function(){            alert($("td:even")[2].innerHTML);            alert($("td:even")[0].innerHTML);        });        $("#odd").click(function(){            alert($("td:odd")[2].innerHTML);            alert($("td:odd")[0].innerHTML);        });        $("#gt").click(function(){            alert($("td:gt(1)")[5].innerHTML);            alert($("td:gt(3)")[1].innerHTML);        });        $("#lt").click(function(){            alert($("td:lt(4)")[3].innerHTML);            alert($("td:lt(5)")[1].innerHTML);        });        $("#not").click(function(){            alert($("td:not(3)")[0].innerHTML);            alert($("td:not(3)")[2].innerHTML);        });    });</script></head><body>    <h2>伪类选择器</h2>    <hr/>    <table>        <tr><td>孙悟空</td></tr>        <tr><td>贝吉塔</td></tr>        <tr><td>比鲁斯</td></tr>        <tr><td>天津饭</td></tr>        <tr><td>短笛</td></tr>        <tr><td>弗利萨</td></tr>        <tr><td>吉连</td></tr>        <tr><td>龟仙人</td></tr>    </table>    <button id="one">取第一个</button>    <button id="last">取最后一个</button>    <button id="eq">取给定索引值</button>    <button id="even">取索引值为偶数的值</button>    <button id="odd">取索引值为奇数 的值</button>    <button id="gt">取大于给定索引值的值</button>    <button id="lt">取小于给定索引值的某位置的值</button>    <button id="not">取not3</button></body>

使用选择器注意事项

    class或都id中含有“.”,“#”等特殊字符    在我们的程序中可能会遇到id中还有“.”和“#”等特殊字符，如果按照普通方式处理就会出错，解决方法是用转义符转义。    在下面程序中：    <div id="id.a">aaaaa</div>    <div id="id#b">bbbb</div>    <div id="id[1]">cccc</div>    按照我们习惯的普通方式jQuery选择器获取:    $("#id.a"),$("#id#b")               这样来获取是错误的，根本不能正确的获取    正确的方法如下：对特殊字符，转义一下    jQuery代码：    $("#id\\.a");    $("#id\\#b");    $("#id\\[1\\]");

属性选择器的引号问题

    属性选择器中，值的引号是可有可无的，但有些特殊情况却必须有。比如：属性中含有“]”特殊字符。    <div title="name[1]a">aaaa</div>    如果属性值不加引号，jQuery代码：    $("div[title=name[1]a]");    会获取不到。解决方法是加上引号，正确的做法是：    $("div[title='name[1]a']");

阅读全文

0 0