jquery记录

录:

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>

 

  效果:

jquery记录

 

 

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>

 

  效果:

jquery记录

 

jquery记录

 

 

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>

jquery记录

 

 

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>

jquery记录

 

 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记录

上一篇:.NET Core微服务一:Consul服务中心


下一篇:20200804