jQuery基础第三天（jQuery UI）

jQuery 第三天知识点大纲

一、复习

第一天jQuery优点
jQuery入口函数
jQuery 选择器

第二天jQuery CSS操作
jQuery 动画
jQuery Dom操作

二、jQuery的元素操作

2.1 jQuery获取元素的高和宽

$(“div”).height(); // 高度
$(“div”).width(); // 宽度

.height()方法和.css(“height”)的区别：

返回值不同，.height()方法返回的是数字类型(20)，.css(“height”)返回的是字符串类型(20px)，因此.height()方法常用在参与数学计算的时候

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <script src="../jquery-1.11.1.min.js"></script>
    <script>
        jQuery(document).ready(function () {
            // 设置div的背景色
            $("div").css("background-color","green");
            // 设置高度
            $("button").eq(0).click(function () {
                // css方式设置高度
                //$("div").css("height","300px");
                //$("div").height(300);
                $("div").height("300px");
            });

            // 获取高度
            $("button").eq(1).click(function () {
                // 给div设置thml内容
                $("div").html("div的高度是：" + $("div").height());
            });

            // 设置宽度
            $("button").eq(2).click(function () {
                $("div").width(600);
            });

            // 获取宽度
            $("button").eq(3).click(function () {
                $("div").html("div的宽度是：" + $("div").width());
            });

            // 对比.css("height")和.height()
            $("button").eq(4).click(function () {
                console.log("height()方式获取的结果是：" + $("div").height());
                console.log("height()方式获取的结果类型：" + typeof $("div").height());
                console.log("css()方式获取的结果是：" + $("div").css("height"));
                console.log("css()方式获取的结果类型：" + typeof $("div").css("height"));
                /*$("div").html();
                $("div").html();*/
            });
        });
    </script>
</head>
<body>
    <button>设置高度</button>
    <button>获取高度</button>
    <button>设置宽度</button>
    <button>获取宽度</button>
    <button>对比CSS和height宽度</button>
    <div></div>
</body>
</html>

innerHeight //只能获取：内边距+内容的高度

innerWidth //同上.........宽度

outerHeight

outerWidth //获取：左右内边距+内容+左右边框

2.2 jQuery元素坐标操作

$(“div”).offset(); // 获取或设置坐标值** 设置值后变成相对定位**
$(“div”).position(); // 获取坐标值子绝父相 只能读取不能设置

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            /*position: absolute;*/
            top: 100px;
            left: 200px;
            width: 400px;
            height: 300px;
            background-color: #000000;
        }

        p {
            background: #666;
            position: absolute;
            top: 80px;
            left: 90px;
        }
    </style>
    <script src="../jquery-1.11.1.min.js"></script>
    <script>
        $(function () {
            // 获取offset坐标值
            $("#btn1").click(function () {
                console.log("距离页面上部的距离：" + $("div").offset().top);
                console.log("距离页面左边的距离：" + $("div").offset().left);
            });

            // 获取相对于父元素的位置
            $("#btn2").click(function () {
                console.log("相对与父元素上部的距离：" + $("p").position().top);
                console.log("相对与父元素左边的距离：" + $("p").position().left);
            });

            // 设置offset
            $("#btn3").click(function () {
                var txtTop = $("#txtTop").val();
                var txtLeft = $("#txtLeft").val();

                // 设置两个值：top和left
                /*$("div").offset({
                    top: txtTop,
                    left: txtLeft
                });*/

                $("div").offset({
                    left: txtLeft
                });
            });
        });
    </script>
</head>
<body>
<button id="btn1">获取offset坐标值</button>
<button id="btn2">获取position坐标值</button>
<button id="btn3">设置position坐标值</button>
<label for="txtTop">top：</label><input type="text" id="txtTop"/>
<label for="txtLeft">left：</label><input type="text" id="txtLeft"/>

<div>
    <p>我是div的子元素p</p>
</div>
</body>
</html>

offset() 获取或设置元素相对于文档位置的方法

返回一个object，包含left和top属性，值是相对于document的位置。
如果传入一个参数，则是对元素重新设置相对于document的位置。
传入参数必须包括：left和top属性。比如： {left：100，top：150}

例如：$(selector).offset({left:100, top: 150});

position() 获取相对于其最近的定位的父元素的位置。

只能获取，不能设置。
相对与其最近的定位元素
返回一个object，包含left和top属性

例如： $(selector).position();

2.3元素的滚动

$(“div”).scrollTop(); // 相对于滚动条顶部的偏移
$(“div”).scrolllLeft(); // 相对于滚动条左部的偏移

scrollLeft() 获取或者设置元素水平方向滚动的位置
scrollTop() 获取或者设置窗口垂直方向的滚动的位置
例如： $(selector).scrollLeft(100);

scroll() 事件触发或者绑定滚动事件
scroll(hander) 绑定滚动事件
scroll() 触发滚动事件 $(selector).scroll(function(){ //当选择的元素发生滚动的时候触发 });

案例：01 固定导航栏案例

链接：http://pan.baidu.com/s/1i4PbQKX 密码：hnxi

案例：02 两侧跟随的广告

链接：http://pan.baidu.com/s/1pLk4pbt 密码：za8t

三、jQuery事件绑定机制

3.1-3.5绑定
click/mouseenter/blur/keyup
// 绑定事件
bind：$node.bind(“click”,function(){});
// 触发一次
one : $node.one(“click”,function(){});
delegate : $node.delegate(“p”,”click”,function(){});
on： $node.on(“click”,”p”,function(){});

3.1 简单事件绑定方法

.click(hander) .click() //绑定事件或者触发 click事件
.blur() //失去焦点事件，同上
.hover(mousein, mouseleave) //鼠标移入，移出

mouseout：当鼠标离开元素及它的子元素的时都会触发。

mouseleave: 当鼠标离开自己时才会触发，子元素不触发。

.dbclick() 双击

change 改变,比如：文本框发送改变，下来列表发生改变等...
focus 获得焦点
keyup, keydown, keypress : 键盘键被按下。
mousedown, mouseover

其他参考：http://www.w3school.com.cn/jquery/jquery_ref_events.asp

3.2 绑定事件的方式 bind方式

（不推荐，1.7以后的jQuery版本被on取代）
语法格式：.bind( eventType [, eventData ], handler )
【参数说明】：
第一个参数：事件类型
第二个参数：传递给事件响应方法的数据对象，可以省略。
事件响应方法中获取数据方式： e.data
第三个参数：事件响应方法

第二个参数可以省略。

例如： $("p").bind("click", function(e){ //事件响应方法 });

3.3 delegate方式（推荐，性能高，支持动态创建的元素）

语法格式：$(selector).delegate( selector, eventType, handler )
语法说明：第一个参数:selector，子选择器
第二个参数：事件类型
第三个参数：事件响应方法

例如：

 $(".parentBox").delegate("p", "click", function(){ //为 .parentBox下面的所有的p标签绑定事件 });

优势：效率较高

3.4 on方式（最现代的方式，兼容zepto，强烈建议使用的方式）

jQuery1.7版本后，jQuery用on统一了所有的事件处理的方法
语法格式：$(selector).on( events [, selector ] [, data ], handler )
参数介绍：第一个参数：events，事件名
第二个参数：selector,类似delegate
第三个参数: 传递给事件响应方法的参数
第四个参数：handler，事件处理方法

例如：

//绑定一个方法
 $( "#dataTable tbody tr" ).on( "click", function() { 
console.log( $( this ).text() );
 }); 
//给子元素绑定事件
 $( "#dataTable tbody" ).on( "click", "tr", function() { 
console.log( $( this ).text() ); 
}); 
//绑定多个事件的方式 $( "div.test" ).on({ click: function() { 
$( this ).toggleClass( "active" ); }, mouseenter: function() {
 $( this ).addClass( "inside" ); }, mouseleave: function() { 
$( this ).removeClass( "inside" ); 
} 
});

3.5 one绑定一次事件的方式

.one( events [, data ], handler )

例如：

 $( "p" ).one( "click", function() { alert( $( this ).text() ); });

3.6 解绑事件

unbind、undelegate
off

unbind解绑 bind方式绑定的事件( 在jQuery1.7以上被 on和off代替)

$(selector).unbind(); //解绑所有的事件
$(selector).unbind("click"); //解绑指定的事件

undelegate解绑delegate事件

$( "p" ).undelegate(); //解绑所有的delegate事件
$( "p" ).undelegate( "click" ); //解绑所有的click事件

例如：

var foo = function () { 
// Code to handle some kind of event }; 
// ... Now foo will be called when paragraphs are clicked... $( "body" ).delegate( "p", "click", foo ); 
// ... foo will no longer be called. $( "body" ).undelegate( "p", "click", foo );

off解绑on方式绑定的事件$( "p" ).off();

$( "p" ).off( "click", "*" );
// 解绑所有的click事件，两个表示所有
$( "body" ).off( "click", "p", foo );

案例：

var foo = function() { 
// Code to handle some kind of event };
 // ... Now foo will be called when paragraphs are clicked ... $( "body" ).on( "click", "p", foo );
 // ... Foo will no longer be called. $( "body" ).off( "click", "p", foo );

3.7 触发事件

click : $(“div”).click();
trigger：触发事件，并且触发浏览器默认行为
triggerHandler：不触发浏览器默认行为

简单事件触发$(selector).click(); //触发 click事件

trigger方法触发事件$( "#foo" ).trigger( "click" );

triggerHandler触发事件响应方法，不触发浏览器行为$( "input" ).triggerHandler( "focus" );

3.8 jQuery事件对象的简介

event.stopPropagation() //阻止事件冒泡
event.preventDefault(); //阻止默认行为

event.data //传递的额外事件响应方法的额外参数

event.currentTarget //在事件响应方法中等同于this，当前Dom对象

**event.target **//事件触发源，不一定===this

event.pageX //The mouse position relative to the left edge of the document

event.pageY

event.stopPropagation()//阻止事件冒泡

e.preventDefault(); //阻止默认行为

event.type //事件类型：click，dbclick...

event.which //鼠标的按键类型：左1 中2 右3

jQuery其他补充

链式编程： end()补充

五角星评论案例

五角星案例.gif

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五角星案例</title>
    <style>
        * { margin: 0; padding: 0; }
        ul { list-style: none; }
        .comment {
            color: red;
            /*font-size: 0;*/

            /*设置字符间距*/
            /*letter-spacing: -13px;*/

            /*设置单 词间距 I am a teacher */
            /*word-spacing: -13px;*/
        }

        .comment li {
            float: left;
            /*display: inline-block;*/
            font-size: 40px;

        }
    </style>
    <script src="jquery-1.11.3.min.js"></script>
    <script>
        jQuery(document).ready(function($) {
            var wjx_sel = "★",
                wjx_none = "☆";

            $(".comment").on("mouseenter", "li", function(){
                //prevAll前面所有的兄弟节点
                // $(this).text(wjx_sel).prevAll().text(wjx_sel);

                // $(this).nextAll().text(wjx_none);
                //当执行的jQuery 链式编程断掉的时候，如果能把链再链上就好了。

                //end()可以结束当前调用的链。 恢复上一级的调用链。
                $(this).text(wjx_sel)
                    .prevAll()
                    .text(wjx_sel)
                    .end()  //结束prevAll，回到 $(this)链
                    .nextAll()
                    .text(wjx_none);

                //第二步： 记录一下用户点击的那个五角星
                //给点击的li标签添加一个样式类               
            }).on("click","li", function(){
                $(this).addClass('clicked').siblings().removeClass('clicked');
            }).on("mouseleave",function(){
                //鼠标移开的时候，先给所有的li标签添加一个空心的 五角星

                //隐式迭代
                $(".comment li").text(wjx_none);

                var t = $(".comment li").text();


                $(".clicked").text(wjx_sel).prevAll().text(wjx_sel).end()
                .nextAll().text(wjx_none);
                //第三步： 当鼠标移开评分控件的时候，把click（包括自己）之前的五角星全部变成实心的，后面的变成空心。
            });         

        });
    </script>
</head>
<body>
    <ul class="comment">
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
    </ul>
</body>
</html>

第一步：鼠标移入，当前五角星和前面的五角星变实体。后面的变空心五角星
第二步：鼠标点击的时候，为当前元素添加clicked类，其他的移除clicked类
第三步：当鼠标移开整个评分控件的时候，把clicked的之前的五角星显示实心

隐式迭代

默认情况下，会自动迭代执行jQuery选择出来所有dom元素的操作。
如果获取的是多元素的值，默认返回的是第一个元素的值

map函数

$.map(arry,function(object,index){}) 返回一个新的数组
$("li").map(function(index, element){}) 注意参数的顺序是反的

each函数

$.each(array, function(index, object){})
$("li").each(index, element )
参数的顺序是一致的

each和 map函数的使用案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>each和 map函数的使用案例</title>
    <script src="jquery-1.11.3.min.js"></script>
    <script>
    
        jQuery(document).ready(function($) {
            // $("li").each(function(index, el) {

            //  var originTxt = $(el).text();

            //  $(el).text(originTxt + index);
            // });

            $.each($("li"), function(i, e) {
                var originTxt = $(e).text();

                $(e).text(originTxt + i+1);

            });

            //map函数： 会把所有的
            // 全局的map 函数 参数 跟 jQuery对象的参数是反的。
            var temp = $.map($("li"), function(elme, index) {
                return index;
            });

            var temp2 = $("li").map(function(i, e){
                console.log(i);
                return i;
            });

        });

    </script>

</head>
<body>
    <ul>
        <li>圣诞快乐</li>
        <li>圣诞快乐</li>
        <li>圣诞快乐</li>
        <li>圣诞快乐</li>
    </ul>
</body>
</html>

noConflict 全局对象污染冲突

$ jQuery

var $ = {name : "it"};
<script src="jQueryDemos/jquery-1.11.3.min.js"></script>

var laoma_jQ - $.noConflict();//让jQuery释放$,让$回归到jQuery之前的对象定义上去。
$.name

jQuery

jQuery.data() jQuery对象的数据缓存。(了解)

* $(".nav").data("name", 123);//设置值。
  var t  = $(".nav").data("name"); //获取值
  t.name = "18";//对象的更改，会直接同步到 元素的jQuery对象上去。

今日笔记感谢某位网友提供，我也在研究中，有疑问欢迎在评论区留言，共同讨论。

最后编辑于：2017.12.05 00:52:00

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 215,245评论 6赞 497
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,749评论 3赞 391
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 160,960评论 0赞 350
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,575评论 1赞 288
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,668评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,670评论 1赞 294
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,664评论 3赞 415
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,422评论 0赞 270
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,864评论 1赞 307
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,178评论 2赞 331
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,340评论 1赞 344
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,015评论 5赞 340
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,646评论 3赞 323
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,265评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,494评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,261评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,206评论 2赞 352