jquery记录

2022-08-17 09:08:50

1、jQuery介绍
2、jQuery的基本语法
3、jQuery 对象和 dom 对象转换
4、选择器(9种之1--基本)
5、选择器(9种之2--层级选择器) [类似css复合选择器的概念]
6、选择器(9种之3--基本过滤)
7、选择器(9种之4--内容过滤)
8、选择器(9种之5--可见性过滤)
9、选择器(9种之6--属性)
10、选择器(9种之7--子元素过滤)
11、选择器(9种之8--表单过滤)
12、选择器(9种之9--表单对象属性过滤)
13、属性
14、CSS类:添加、移除、切换样式
15、获取或设置html代码/文本/value值
16、CSS---jQuery的css()方法
17、位置
18、文档处理
19、案例：下拉选择标签(选中添加)
20、案例：手动显示或隐藏
21、筛选
22、筛选案例--QQ用户分组
23、事件
24、页面加载
25、事件绑定
26、事件案例：文字提示
27、事件案例：图片提示(扩展)
28、效果(动画)
29、事件冒泡
30、浏览器默认动作

1、jQuery介绍    <--返回目录
   * JS类库：JavaScript库封装了很多预定义的对象和实用函数；能帮助使用者建立有高难度交互客户端页面，并且兼容各大浏览器。
   * 当前流行的JavaScript库
       - jQuery，最流行
       - 淘宝UI：http://docs.kissyui.com/
       - Bootstrap，来自Twitter，是目前很受欢迎的前端框架。
          Bootstrap是基于HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得Web开发更加快捷。基于jQuery一个UI工具

   * jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
   * 由美国人John Resig在2006年1月发布
   * jQuery是免费、开源的

   * jQuery版本介绍：jquery-1.8.3.js 源码js，开发中使用，可以方便查看源码
      jquery-1.8.3.min.js 压缩版，回车换行删掉，变量简化，生产环境下使用，小

   * 优点：
       - 核心理念是write less,do more(写得更少,做得更多)
       - 轻量级：源码1.11.js大小是286kb，压缩班1.11.min.js大小是94.1k。如果使用GZIP压缩更小。
       - 兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）
       - jQuery的语法设计可以使开发者更加便捷
       - 例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能
       - jQuery能够使用户的html页面保持代码和html内容分离
       - 不用再在html里面插入一堆js来调用命令了，只需要定义id即可
       - jQuery提供API让开发者编写插件，有许多成熟的插件可供选择
       - 文档说明很全

2、jQuery的基本语法 <--返回目录

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
    <script src="../js/jquery-1.8.3.js"></script>
<body>
    <input type="text" id="username" value="jack"/>
    <script type="text/javascript">
        var ele = document.getElementById("username"); // js 获取 dom 元素
        alert(ele.value); // js 对象属性 value
        
        var $ele = $(ele); // js 对象转为 jquery 对象
        alert($ele.val()); // jquery 对象方法 val()
        
        // jQuery获取数据，语法：$("选择器")  <==> jQuery("选择器")
        var a = $("#username"); // jquery 获取 dom 元素
        alert(a.val());
    </script>
</body>
</html>

js 执行时，有加载顺序，以前将js代码写在html代码后。但是，通常把<script>放到<head>下面。解决方法为：

　　js 代码

<input type="button" id="btn1" value="按钮1" name="abc"/>
<input type="text" id="username" value="jack">
<input type="text" id="password" value="123"/>

<script type="text/javascript">
    window.onload = function(){     //页面加载后执行
        var ele = document.getElementById("btn1");  //获取button元素
        ele.onclick = function(){   //给button元素绑定鼠标点击事件
            alert(ele.value);       //输出button元素的value属性的值
            alert(ele.id);          //输出button元素的id属性的值
            alert(ele.name);        //输出button元素的name属性的值
        };
    };
</script>

　　jquery 代码

<input type="button" id="btn1" value="按钮1"/>
<input type="text" id="username" value="jack"/>
<input type="text" id="password" value="123"/>      
<script type="text/javascript">
    $(document).ready(function(){  //jQuery页面加载
        $("#btn1").click(function(){  //给button元素绑定鼠标点击事件
            $("#username,#password").css("background-color","pink"); //基本选择器(id选择器)的使用，设置背景色为pink
        });
    });
</script>

　　js 注意：不可以输出div元素的name属性的值

<div id="divid" name="divname">div的文本</div>
var ele = document.getElementById("divid");
alert(ele.id);//可以输出div元素的id属性的值
alert(ele.name);//undefined,不可以输出div元素的name属性的值

3、jQuery 对象和 dom 对象转换 <--返回目录

<script type="text/javascript">
    //1 使用javascript获得DOM对象
    var username = document.getElementById("username");
    alert(username.value);
    
    //2 将 dom对象 转换成 jQuery对象
    // * 语法：$(dom对象)
    // * 建议：jQuery对象变量名，建议为$开头
    var $username = $(username);
    alert($username.val());                //获取value属性
    
    //3 将 jQuery对象 转换成 dom对象
    //3.1 jQuery对象内部使用【数组】存放所有的数据，可以使用数组的下标（索引）
    var username2 = $username[0];
    alert(username2.value);
    //3.2 jQuery提供函数 get() 转换成dom对象
    var username3 = $username.get(0);
    alert(username3.value);
</script>

4、选择器(9种之1--基本) <--返回目录

　　基本选择器

#id ，   【id选择器】，<xxx id=""> 通过id值获得元素
element，【标签选择器】，<xxx> 通过标签名获得元素
.class ，【类别选择器】，<xxx class=""> 通过class值获得元素。注意：使用点开头
s1,s2,... 多选择器，将多个选择器的结果添加一个数组中。[类似css的并联选择器]
* 所有   [类似css的通配符选择器]

5、选择器(9种之2--层级选择器) [类似css复合选择器的概念] <--返回目录

　　层级选择器

A  B ，获得A元素内部所有的B后代元素。（爷孙） [与css后代选择器类似]
A > B ，获得A元素内部所有的B子元素。（父子,再往里面的不管） [与css子代选择器类似]
A + B ，获得A元素后面的第一个兄弟B。（兄弟）
A ~ B ，获得A元素后面的所有的兄弟B。（兄弟）

6、选择器(9种之3--基本过滤) <--返回目录

　　基本过滤选择器

:first        , 第一个
:last        ,最后一个
:eq(index) ，获得指定索引(注意索引从0开始)  eq是equal的简写
:gt(index) 索引大于 
:lt(index) 索引小于
:even 偶数，从 0 开始计数。例如：查找表格的1、3、5...行（即索引值0、2、4...）
:odd 奇数
:not(selector)   去除与给定选择器匹配的元素，选择余下的所有元素
------------------------------
:header  获得所有标题元素。例如：<h1>...<h6>
:animated  获得所有动画
:focus    获得焦点

　　用法举例

$("div:first").css("background-color","red");//给第一个div，设置背景色
$("div:not(.one)")   //选择class不为one的所有div（选择所有div，去除class="one"的div）
$("div:even")  //选择索引为偶数的div元素
$("div:eq(3)") //选择索引为3的
$(":header")  //选择所有标题元素

　　案例：案例2：文本框内有默认文本；获到焦点，若文本内容为默认值，文本内容清空；失去焦点，若文本内容为空，设置为默认值

<input type="text" value="请输入用户名" default="请输入用户名"/>
<input type="text" value="请输入密码" default="请输入密码"/>
<script type="text/javascript">
    $(document).ready(function(){  //jQuery页面加载
        $("input[type=‘text‘]").on("blur focus",function(){     //绑定(注册)blur focus事件
            //1 获得默认值，即获取default属性的值
            var ds = $(this).attr("default");       //$(this)表示表示当前对象
        
            //2 判断是否获得焦点
            if($(this).is(":focus")){  //":focus"表示是一个焦点对象
                //2.1 获到焦点，若文本内容为默认值，文本内容清空
                if($(this).val() == ds){    //$(this).val()表示获取value值
                    $(this).val("");    //$(this).val("")表示设置value值
                }
            }else{
                //2.2 失去焦点，若文本内容为空，设置为默认值
                if($(this).val() == ""){
                    $(this).val(ds);
                }
            }
        });
    });
</script>

　　绑定(注册)事件的两种方法：

$("input[type=‘text‘]").blur(function(){...});
或 $("input[type=‘text‘]").on("事件1 事件2",fn);//可以注册多个事件

7、选择器(9种之4--内容过滤) <--返回目录

　　内容过滤选择器

:empty  当前元素是否为空（是否有标签体--子元素、文本）
:has(...)  当前元素，是否含有指定的子元素
:parent    当前元素是否是父元素
:contains( text ) 标签体是否含有指定的文本

　　用法举例

$("div:empty")   //选取没有文本，也没有子元素的div元素
$("div:parent")  //选取含有子元素或文本的div元素
$("div.has(‘.mini‘)")  //选取含有class="mini"子元素的div元素
$("div:contains(‘di‘)")  //选取含有文本"di"的div元素

8、选择器(9种之5--可见性过滤) <--返回目录

　　可见性过滤选择器

:hidden    隐藏。特指 <xxx style="display:none;">  ，获得 <input type="hidden">
:visible    可见（默认）

　　案例

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <input type="button" id="btn1" value="按钮1"/></br></br>
    
    <div class="one" id="one" border="1" style="display:none;">
        id为one,class为one的div
    </div>

    <input type="hidden" value="隐藏表单1"/>
    <input type="hidden" value="隐藏表单2"/>
</body>
<script src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$("#btn1").click(function(){
    //选取隐藏的div元素，并利用jQuery的show()方法显示
    $("div:hidden").css("background-color","pink").show(1000);
    //打印<input type="hidden" value="">的value属性值，只打印第一个
    alert($("input:hidden").val());
    
    //遍历打印所有隐藏表单的value值
    $("input:hidden").each(function(){
        alert($(this).val());
    });
        
    //遍历打印所有隐藏表单的value值,index索引（从0开始），domEle就是this
    $.each($("input:hidden"),function(index, domEle){  
        alert(index + "@" + $(this).val());
    });
});
</script>
</html>

9、选择器(9种之6--属性) <--返回目录

　　属性选择器

[属性名]                获得指定的属性名的元素
[属性名=值]                获得属性名 等于 指定值的 的元素【1】
[属性名!=值]            获得属性名 不等于 指定值的 的元素
[as1][as2][as3]....        复合选择器，多个条件同时成立。类似 where ...and...and【2】
---------------------------------------
[属性名^=值]            获得以属性值 开头 的元素
[属性名$=值]            获得以属性值 结尾 的元素
[属性名*=值]            获得 含有属性值  的元素

　　用法举例

<input type="text" value="abc" title="标题名称"/>

alert($("input[title]").val());  //选取含有属性title的input元素
$("input[title]").val("123");  //设置该元素的value属性的值为"123"
 
alert($("input[title]").attr("title"));  //获取该元素的title属性的值，并打印
$("input[title]").attr("title","这是标题吗")  //给该元素的title属性赋值
alert($("input[title]").attr("title"));  //再次打印该元素的title属性的值
  
$("input[title=‘test‘]")  //选取属性title的值等于"text"的input元素
$("input[title !=‘text‘]")//选取属性title值不等于"test"的input元素，【没有属性title的也将被选中】

组合选择器 $("div[id][title]")  //首先选取有属性id的div元素，然后在结果中选取有属性title的
$("input[title][title!=‘text‘]")//首先要有title属性，然后，title!="text"

10、选择器(9种之7--子元素过滤) <--返回目录

　　子元素过滤

:nth-child(index)  ，获得第几个孩子，从1开始。
:first-child ， 获得第一个孩子
:last-child ， 获得最后孩子
:only-child ， 获得独生子

　　用法举例

//子元素使用前提，表达式前面必须是元素，比如$("div:nth-child(2)")
//如果元素上添加了条件，必须使用空格，比如$(div[class=‘one‘] :nth-child(2))
$(div[class=‘one‘] :nth-child(2)).css("background-color","red");//选取每个class为one的div父元素下的第2个子元素
$(div.one :nth-child(2)).css("background-color","red");//效果同上

对比
$("div.one")  所有的div，自己的样式为one
$("div .one")  所有的div中后代元素，样式为one(class="one")，参见层级选择器第一种

11、选择器(9种之8--表单过滤) <--返回目录

　　表单过滤选择器

:input  所有的表单元素。（<input> / <select> / <textarea> / <button>）
:text                文本框<input type="text">
:password        密码框<input type=" password ">
:radio            单选<input type="radio">
:checkbox        复选框<input type="checkbox">
:submit            提交按钮<input type="submit">
:image            图片按钮<input type="image" src="">
:reset            重置按钮<input type="reset">
:file                文件上传<input type="file">
:hidden            隐藏域<input type="hidden">  ,还可以获得<xxx style="display:none"> 
                    其他值：<br> <option>  ,存在浏览器兼容问题
:button            所有普通按钮。 <button >  或 <input type="button">

12、选择器(9种之9--表单对象属性过滤) <--返回目录

　　表单对象属性过滤

:enabled        可用
:disabled        不可用。<xxx disabled="disabled"> 或<xxx disabled="">  或  <xxx disabled>
:checked        选中（单选框radio、复选框 checkbox）
:selected        选择（下拉列表 select option）

　　用法举例

$("input[name=‘s1‘]:checked").length;//获取name=s1的多选框选中的个数
$("input[name=‘s1‘]:checked").size();//获取name=s1的多选框选中的个数

$(select[name=‘s1‘]:selected).each(function(){
    $("#divId").append($(this).val());//将select选中的<option>元素的value值添加到<div id="divId">中
});
注意：$(this).val()获取option时，如果没有value值，将获取text的值；如果有就获取value值
如果就想获取text的值，使用$(this).html()或$(this).text()

13、属性 <--返回目录

    操作jquery对象属性：
       attr(name)   获得指定属性名的值
       attr(key ,val ) 给一个指定属性名设置值
       attr(prop ) 给多个属性名设置值。参数：prop json数据
           {k : v , k : v , .....}
       removeAttr(name) 移除指定属性

   用法举例

$("[name=‘username‘]").attr("disabled","disabled");//设置文本框不可用
$("[name=‘username‘]").attr("disabled","");//设置文本框不可用
$("[name=‘username‘]").removeAttr("disabled");//设置文本框为可用，必须移除属性disabled

14、CSS类:添加、移除、切换样式 <--返回目录

　　<xxx class="a b c d my ">
        addClass("my") 追加一个类--就是:添加一个样式
        removeClass("my") 将指定类移除--就是：移除一个样式
       toggleClass("my") 如果有my将移除，如果没有将添加----就是：切换样式

　　案例：添加、移除、切换样式

<style type="text/css">
    .textStyle{
        background-color:red;
    }
</style>

<script type="text/javascript">
    $(document).ready(function(){
        $("#btn1").click(function(){
            $("input[value=‘jack‘]").addClass("textStyle");//添加样式
        });
        $("#btn2").click(function(){
            $("input[value=‘jack‘]").removeClass("textStyle");//移除样式
        });
        $("#btn3").click(function(){
            $("input[value=‘jack‘]").toggleClass("textStyle");//切换样式
        });
    });    
</script>

<body>
    <input type="button" id="btn1" value="添加样式"/>
    <input type="button" id="btn2" value="移除样式"/>
    <input type="button" id="btn3" value="切换样式"/>
    </br></br>    

    <input type="text" value="jack"/>
</body>

15、获取或设置html代码/文本/value值 <--返回目录

val()        获得value的值
val(text) 设置value的值

html()  获得html代码，含有标签
html(...) 设置html代码，如果有标签，将进行解析。

text() 获得文本值，将标签进行过滤
text(...) 设置文本值，如果有标签，将被转义  -->   <  &lt;   &  &amp;  >  &lt;    &nbsp;

　　用法举例

获取标签div文本内容的值：$("div").text()或$(div).html()---------效果一样

<bb>div的文本内容：我爱你</bb>
var v = $("bb").html("<a href=‘#‘>改了</a>");  //设置(或叫修改)div标签的文本内容

16、CSS---jQuery的css()方法 <--返回目录

<xxx style="key:value; key:value; ">
css(name)  获得指定名称的css值
css(name ,value) 设置一对值
css(prop) 设置一组值 json

　　用法举例

$("div").css("border","1px solid red");
$("div").css({
    "width","200px",
    "heigth","200px"    //最后没逗号
});

17、位置 <--返回目录

offset()  获得左上角坐标 ， 返回JSON对象，{"top":200, "left" : 100} 
offset(...) 设置坐标。例如：$(this).offset({"top":0 , "left" : 0})
scrollTop()  垂直滚动条 滚过的距离
scrollLeft()  水平滚动条 滚过的距离
height([...]) 获得 或 设置 高度
width([...])获得 或 设置 宽度

18、文档处理 <--返回目录

　　内部插入

A.append(B)  将B插入到A的内部后面（之后的串联操作，操作A）   ----------操作A，在A的内部追加B
    <A>
        ....
        <B></B>
    <A>
A.prepend(B) 将B插入到A的内部前面       -----操作A，在A的内部最前面添加B
    <A>
        <B></B>
        ....
    <A>
--------------------------------------------
A.appendTo(B) 将A插入到B的内部后面 （之后的串联操作，操作A）
A.prependTo(B)

　　外部插入

A.after(B)  , 将B插入到A后面（同级）------操作A，在A的后面添加B
    <A></A>
    <B></B>
A.before(B) ，将B插入到A前面  --------操作A，在A的前面添加B 
    <B></B>
    <A></A>
-----------------------------------
A.insertAfter(B) , 将A插入到B后面（同级）
    <B></B>
    <A></A>
A.insertBefore(B) 将A插入到B前面
    <A></A>
    <B></B>

　　删除

empty()  清空标签体(清空文本，会删除绑定事件)
$ele.html("") 清空文本，但不会删除绑定事件，发生内存泄漏

remove() 删除当前对象。如果之后再使用，元素本身保留，绑定事件 或 绑定数据 都会被移除
detach() 删除当前对象。如果之后再使用，元素本身保留，绑定事件 或 绑定数据 都保留

　　绑定数据

data(name) 获得
data(name,value) 设置

　　绑定数据用法举例

$(#city).data("","");//绑定数据
$(#city).data("");//获得数据

　　复制

clone(even) 克隆 even=true|false(默认)
even ：指示事件处理函数是否会被复制。V1.5以上版本默认值是：false

　　替换

A.replaceWith(B) ，使用A将B替换掉
A.replaceAll(B) ，使用B将A替换掉

　　包裹

A.wrap(B) ，使用B将每一个A进行包裹（多个B）
    <B><A></A></B>
    <B><A></A></B>
     
A.wrapAll(B) ，使用B将所有A进行包裹（一个B）
    <B>
        <A></A>
        <A></A>
    </B>

A.wrapInner(B) ,使用B将每一个A的标签体包裹。
    <A><B>。。。</B></A>
    <A><B>。。。</B></A>
     
A.unwrap() ，将A的父元素删除，自己留着

19、案例：下拉选择标签(选中添加) <--返回目录

<html>
<head>
<title>标题</title>
<!--样式-->
<style type="text/css">
    .text{
        background-color:red;
    }
</style>
        
<!--导入jQuery-->
<script type="text/javascript" src="./jquery/jquery-1.8.3.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $("#selectToRight").click(function(){
            $("#s2id").append($("#s1id option:selected"));    //"#s1id option"表示<select id="s1id">标签内所有的<option>
        });

        $("#selectAllToRight").click(function(){
            $("#s2id").append($("#s1id option"));    
        });
        
        $("#selectToLeft").click(function(){
            $("#s1id").append($("#s2id option:selected"));    
        });

        $("#selectAllToLeft").click(function(){
            $("#s1id").append($("#s2id option"));    
        });
    });
</script>  
</head>
    
<body>
    <div style="float:left;">
        <select id="s1id" style="height:200px;width:100px;" multiple="multiple" >
            <option>景甜</option>
            <option>刘诗诗</option>
            <option>刘亦菲</option>
            <option>林志玲</option>
            <option>宋佳</option>
        </select>
        
        <div>
            <input type="button" value="选中添加到右边" id="selectToRight"/><br/>
            <input type="button" value="全部添加到右边" id="selectAllToRight"/>
        </div>
    </div>
    
    <div>
        <select id="s2id" multiple="multiple" style="height:200px;width:100px;">
            <option>aaa</option>
            <option>bbb</option>
            <option>ccc</option>
        </select>
        
        <div>
            <input type="button" value="选中添加到左边" id="selectToLeft"/><br/>
            <input type="button" value="全部添加到左边" id="selectAllToLeft"/>
        </div>
    </div>
    
</body>
</html>

　　效果：

20、案例：手动显示或隐藏 <--返回目录

<html>
<head>
<title>动态列表效果.html</title>
<style type="text/css">
 *{ margin:0; padding:0;}
body {font-size:12px;text-align:center;}
a { color:#04D; text-decoration:none;}
a:hover { color:#F50; text-decoration:underline;}
.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
.showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;}
.promoted a { color:#F50;}
</style>

<!--导入jQuery-->
<script type="text/javascript" src="./jquery/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(document).ready(function(){    
        //从第5个开始，不要最后一个，控制显示或隐藏
        var $allLi = $("li:gt(4):not(:last)");
        
        $("span").click(function(){
            //判断是否隐藏
            if($allLi.is(":hidden")){
                $allLi.show();//显示
                $(this).html("隐藏部分");
            }else{
                $allLi.hide();
                $(this).html("显示全部");
            }
        });
    
    });
</script>
</head>
<body>
    <div class="SubCategoryBox">
        <ul>
            <li ><a href="#">佳能</a><i>(30440) </i></li>
            <li ><a href="#">索尼</a><i>(27220) </i></li>
            <li ><a href="#">三星</a><i>(20808) </i></li>
            <li ><a href="#">尼康</a><i>(17821) </i></li>
            <li ><a href="#">松下</a><i>(12289) </i></li>
            <li ><a href="#">卡西欧</a><i>(8242) </i></li>
            <li ><a href="#">富士</a><i>(14894) </i></li>
            <li ><a href="#">柯达</a><i>(9520) </i></li>
            <li ><a href="#">宾得</a><i>(2195) </i></li>
            <li ><a href="#">理光</a><i>(4114) </i></li>
            <li ><a href="#">奥林巴斯</a><i>(12205) </i></li>
            <li ><a href="#">明基</a><i>(1466) </i></li>
            <li ><a href="#">爱国者</a><i>(3091) </i></li>
            <li ><a href="#">其它品牌相机</a><i>(7275) </i></li>
        </ul>
        
        <div class="showmore">
            <a href="#"><span>显示全部品牌</span></a>
        </div>    
    </div>            
</body>
</html>

　　效果：

21、筛选    <--返回目录
   * 之前选择器能完成的功能，筛选也提供了相同的函数，例如
        选择器:first        筛选 first()
   * 对比
       $("div:first")   直接获得第一个div （永远只能操作第一个）
       $("div").first()   先获得所有的div，从所有的中筛选出第一个。（可以操作第一个，也可以操作所有）

   * 过滤
       eq(index | -index) 类似 :eq()
           index：正数，从头开始获得指定索引的元素。这个元素的位置是从0算起。0表示第一个
           -index：负数，从尾开始获得指定索引的元素。1算起。 -1表示最后一个
       first()   第一个 :first
       last()   最后一个 :last
       is()       判断
       hasClass()   判断是否是指定class 。<xxx class="my">
           这其实就是 is("." + class)。
       filter() 筛选出与指定表达式匹配的元素集合
       not()   将指定内容删除
       --------------------------------
       has() 子元素是否有
       slice(start , end) 截取元素，[2,4) --> 2,3
       map() jQuery对象拆分成 jQuery对象数组

   * 查找
       <A>
           <B>
               <C></C>
               <D></D>
               <E></E>
               <F></F>
           </B>
       </A>
       B.children([...])   获得所有的子元素。CDEF       类似子代选择器
       A.find(D) 从指定的区域查询指定元素。D           类似后代选择器
       D.next()   下一个兄弟。E
       D.nextAll() 后面的所有兄弟。EF
       E.prev()   上一个兄弟。D （previous）
       E.prevAll() 前面的所有兄弟。CD
       E.siblings()   所有兄弟。CDF
       E.parent() 父元素。B
       E.closest(A) 向上获得指定的父元素（含自己），如果获得返回一个对象，如果没有没有对象。
       ------------------------------

       C.nextUntil(E) 获得后面所有兄弟，直到指定条件位置。DE
       F.prevUntil(D) 获得前面所有兄弟，直到指定条件位置。DE

       E.parents()   获得所有的父元素。AB

       closest和parents的主要区别是：
           1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；
           2，前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；
           3，前者返回0或1个元素，后者可能包含0个，1个，或者多个元素。

   * 串联
       A.add(B) 将A和B组合一个对象。类型 $("A,B")
       andSelf() ：将之前对象添加到操作集合中
           A.children().andSelf()
           A   孩子    孩子和A
       end() ：回到最近的一个"破坏性"操作之前
           A.children().children().end() .end()
           A   孩子   孙子       孩子 A
       --------------------
       contents() 获得所有的子节点（子元素和文本）

22、筛选案例--QQ用户分组 <--返回目录

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./jquery/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        //1所有分组列表项默认都是隐藏的。
        //2 分组（span）可以点击，控制下面的列表项显示或隐藏
        //3 当前分组列表项显示，其他分页隐藏（同时只有一个显示）
        $("div").children("a").hide().prev("span").click(function(){
            $(this).nextAll("a").toggle().parent().siblings("div").find("a").hide();
        });
    });
</script>

<style type="text/css">
    div *{
        display:block;
        width:200px;
    }
    div span{
        background-color : pink;
    }
</style>
</head>
<body>
    <div>
        <span>追求中</span>
        <a>aa</a>
        <a>bb</a>
        <a>cc</a>
    </div>
    <div>
        <span>已交往</span>
        <a>aaa</a>
        <a>bbb</a>
        <a>ccc</a>
    </div>
    <div>
        <span>已分手</span>
        <a>a</a>
        <a>b</a>
        <a>c</a>
        <a>d</a>
    </div>    
</body>
</html>

23、事件 <--返回目录

jQuery 提供额外的事件，用于完善javascript缺失的
   - focusin 和 focusout
       ** focusin 获得焦点。类似js的focus。
           focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。
       ** focusout 失去焦点。类似js的blur。
           focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。

   - mouseenter 和 mouseleave
       ** mouseenter 鼠标移入。类似js的mouseover
           与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
           如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。

       ** mouseleave 鼠标移出。类似js的mouseout
           与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
           如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。

　　案例：常见事件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
    #e02{
        border: 1px solid #000000;
        height: 200px;
        width: 200px;
    }    
</style>
<script type="text/javascript" src="./jquery/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#e01").blur(function(){
            $("#textMsg").html("文本框失去焦点：blur");
        }).focus(function(){
            $("#textMsg").html("文本框获得焦点：focus");
        }).keydown(function(){
            $("#textMsg").append("键盘按下：keydown");
        }).keypress(function(event){
            $("#textMsg").append("键盘按：keypress");
        }).keyup(function(){
            $("#textMsg").append("键盘弹起：keyup");
        }).select(function(event){
            //支持谷歌
            var sub = $(this).val().substring(event.target.selectionStart,event.target.selectionEnd);
            $("#textMsg").html("文本内容被选中：select ， " + sub);
        });
        
        var i = 0;
        $("#e02").mouseover(function(){
            $("#divMsg").html("鼠标移入：mouseover");
        }).mousemove(function(){
            $("#divMsg").html("鼠标移动：mousemove , " + i++ );
        }).mouseout(function(){
            $("#divMsg").html("鼠标移出：mouseout");
        }).mousedown(function(){
            $("#divMsg").html("鼠标按下：mousedown");
        }).mouseup(function(){
            $("#divMsg").html("鼠标弹起：mouseup");
        });
        
        $("#e03").click(function(){
            $("#buttonMsg").html("单击：click");
        }).dblclick(function(){
            $("#buttonMsg").html("双击：dblclick");
        });
        
    });
</script>
</head>
<body>
    <input id="e01" type="text" /><span id="textMsg"></span> <br/>
    <hr/>
    <div id="e02" ></div><span id="divMsg"></span> <br/>
    <hr/>
    <input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> <br/>
</body>
</html>

24、页面加载    <--返回目录
   * 标准API
       $(document).ready(function(){...});
        等价于 jQuery(document).ready(fn);
   * 简化版
       $(function(){...}) 等价于 jQuery(function(){...})

25、事件绑定    <--返回目录
   * 处理    (下面方法内的参数type 和 events都是指事件)
       bind(type ,fn) 给当前对象绑定一个事件。例如：A.bind("click", fn ); 类似：A.click( fn );
       unbind(type ) 解绑bind绑定事件

       one(type ,fn ) 给当前对象绑定一次事件。
       -----------------------------------------
       on(events , fn) 提供绑定事件处理程序所需的所有功能。完成3个方法功能.bind(), .delegate(), 和 .live().
       off(events) 解绑

       trigger(type) 在每一个匹配的元素上触发某类事件。例如：A.trigger("submit") ,类似 A.submit();
       triggerHandler(type) 在每一个匹配的元素上触发某类事件。但不会执行浏览器默认动作，也不会产生事件冒泡。

   * 委派
       live(type , fn) 绑定事件，之后动态添加同样的成员，也具有相同的事件。
       die(type) 解绑事件

       -例子
           $(".myClass").live("click",function(){
               $("body").append("<input type=‘button‘ value=‘新生的按钮‘ class=‘myClass‘/>"); //动态添加同样的成员，也具有相同的事件
                                                                                               //live换成on后，新添加的成员，不再有click事件
           });

           <body>
           <input id="btn1" type="button" value="按钮1" class="myClass"/>
           </body>

   * 切换
       hover(over , out)
           简化版，鼠标移入和移出，A.mouseover( fn ).mouseout( fn) 简化 A.hover( fn , fn )
       toggle( fn , fn , fn ,...) 执行click事件，每点击一次执行一个fn，然后循环

   * jQuery可以给事件加别名 click.a   click.b

26、事件案例：文字提示 <--返回目录

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文字提示</title>
 <!--   引入jQuery -->
 <script src="./jquery/jquery-1.8.3.js" type="text/javascript"></script>
<style type="text/css">
body{
    margin:0;
    padding:40px;
    background:#fff;
    font:80% Arial, Helvetica, sans-serif;
    color:#555;
    line-height:180%;
}
p{
    clear:both;
    margin:0;
    padding:.5em 0;
}
/* tooltip */
#tooltip{
    position:absolute;
    border:1px solid #333;
    background:#f7f5d1;
    padding:1px;
    color:#333;
    width:300px;
    display:none;
}
</style>
<script type="text/javascript">
    $(function(){
        //将自带的提示，替换成 自定义提示
        
        $(".mytooltip").mouseover(function(event){
            
            //1 获得绑定的数据
            var title = $(this).data("mytitle");
            if(! title){  //没有
                //获得自带提示
                title = $(this).attr("title");
                //将自带提示删除
                $(this).removeAttr("title");
                //绑定数据
                $(this).data("mytitle",title)
            }
            
            //2 创建div
            var $new = $("<div id=‘tooltip‘></div>");
            //3设置提示
            $new.html(title);
            
            //4定位
            $new.offset({"left":event.pageX + 5,"top":event.pageY - 20});
            
            //5追加到body，并显示
            $new.appendTo("body").show();
        }).mouseout(function(){
            //删除
            $("#tooltip").remove();
        }).mousemove(function(event){
            // 重写定位
            $("#tooltip").offset({"left":event.pageX + 5,"top":event.pageY - 20});
        });
        
    });

</script>
</head>
<body>
<p><a href="#" class="mytooltip" title="这是我的超链接提示1.">提示1.</a></p>
<p><a href="#" class="mytooltip" title="这是我的超链接提示2.">提示2.</a></p>
<p><a href="#" title="这是自带提示1.">自带提示1.</a></p>
<p><a href="#" title="这是自带提示2.">自带提示2.</a> </p>
    
</body>
</html>

27、事件案例：图片提示(扩展) <--返回目录

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片提示</title>
 <!--   引入jQuery -->
 <script src="./jquery/jquery-1.8.3.js" type="text/javascript"></script>
<style type="text/css">
body{
    margin:0;
    padding:40px;
    background:#fff;
    font:80% Arial, Helvetica, sans-serif;
    color:#555;
    line-height:180%;
}
img{border:none;}
ul,li{
    margin:0;
    padding:0;
}
li{
    list-style:none;
    float:left;
    display:inline;
    margin-right:10px;
    border:1px solid #AAAAAA;
}

/* tooltip */
#tooltip{
    position:absolute;
    border:1px solid #ccc;
    background:#333;
    padding:2px;
    display:none;
    color:#fff;
}
</style>
<script type="text/javascript">
    $(function(){
        var x = 10;
        var y = 20;
        var href;
        
        $("a[class=tooltip]").mouseover(function(e){
            //1 获取对应标签的自带提示
            //var title = $("a[class=tooltip]").attr("title");
            //this代表的是DOM对象(页面中的元素)
            href = this.href;
            
            //删除自带提示
            this.href = "";
            
            //2 创建标签用于自定义提示
            var $div = $("<div id=‘tooltip‘><img src=‘"+href+"‘></img></div>");
            
            //3 将自定义提示的标签，添加到body标签下
            $("body").append($div);
            
            //4 如何调整显示位置(相对鼠标的坐标值:e.pageX和e.pageY)
            $("#tooltip").css({
                "top" : e.pageY + y + "px",
                "left" : e.pageX + x + "px"
            }).show(1000);
            
        }).mouseout(function(){
            this.href = href;
            $("#tooltip").remove();
        }).mousemove(function(e){
            $("#tooltip").css({
                "top" : e.pageY + y + "px",
                "left" : e.pageX + x + "px"
            });
        });
    });
</script>

</head>
<body>
<h3>有效果：</h3>
    <ul>
        <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
        <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
        <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
        <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
    </ul>


<br/><br/><br/><br/>
<br/><br/><br/><br/>


<h3>无效果：</h3>
<ul>
        <li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
        <li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
        <li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
        <li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
    </ul>
</body>
</html>

28、效果(动画) <--返回目录

* 基本：通过改变元素高度和宽度进行显示或隐藏
       show(speed,fn) 显示
           参数1：speed速度。显示的时间，单位：毫秒。固定字符串：("slow","normal", or "fast")
           参数2：fn 回调函数。动画效果完成之后回调函数。
       hide(speed,fn) 隐藏
       toggle(speed,fn) 切换

   * 滑动：通过改变元素高度进行显示或隐藏
       slideDown(speed,fn) 显示
       slideUp(speed,fn) 隐藏
       slideToggle(speed,fn) 切换


   * 淡入淡出：通过改变元素透明度进行显示或隐藏
       fadeIn() 显示
       fadeOut() 隐藏
       fadeToggle() 切换
       fadeTo(speed,opacity,fn) 指定透明度
           参数2：opacity 透明度，一个0至1之间表示透明度的数字

29、事件冒泡    <--返回目录
   * 解释:子元素事件执行时，一并触发父元素相同的事件
   * 如何防止事件冒泡
       - 方式1；return false；
       - 方式2：使用event对象提供的函数
           1)事件回调函数function(event)
           2)event.stopPropagation();

30、浏览器默认动作    <--返回目录
   * <a href="www.baidu.com">链接</a>
      href就是<a>标签的默认动作
   * 如何阻止
       方式1：
           return false;
       方式2：
           event.preventDefault();

---

jquery记录

码农公寓

相关文章