jQuery常见操作&ajax&源码解析

jQuery 中, $(document).ready()是什么意思?

(jQuery的load事件对应JS的onload事件,jQuery的ready事件对应JS的DOMContentLoaded事件,分别表示页面所有资源加载完成和页面DOM结构解析完成)

当DOM准备就绪时会发生ready事件,并执行ready內的函数。
由于该事件在文档就绪后就发生,所以正确做法是将所有其他jQuery事件和函数置于该事件中。
ready() 函数规定当 ready 事件发生时执行的代码,ready() 函数仅能用于当前文档,因此无需选择器。
所以以下三种语法是等价的

$(document).ready(function)
$().ready(function)
$(function)

看一个例子

<body>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4 ![](http://upload-images.jianshu.io/upload_images/6851923-b0bda9c05c051541.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li>
    </ul>
    <script>
        $('ul').ready(function () {
            console.log('ul ready', Date.now())
            console.log($('img').width())
        })

        $('ul').load(function () {
            //这个没有打印值,因为load事件适用于任何可使用URL关联的任何元素:images,scripts,frames,iframes,window对象
            console.log('ul loaded', Date.now())
        })

        $('img').load(function () {
            console.log('img loaded', Date.now())
            console.log($('img').width())
        })

        $('img').ready(function () {
            console.log('img ready', Date.now())
            console.log($('img').width())
        })
    </script>
</body>

控制台打印结果为

上例说明了两点:

  • load事件适用于任何可使用URL关联的任何元素:images,scripts,frames,iframes,window对象等
  • ready事件会在load事件前触发

$node.html()和$node.text()的区别?

还是举个例子

<body>
    <ul>
        <li>item1 </li>
        <li>item2 </li>
        <li>item3 </li>

    </ul>
    <script>
        console.log($('li').html())//item1
        console.log($('li').text())//item1 item2 item3

        //无论如何外层的<li></li>不会发生改变
        console.log($('li').html('<span>insert span</span>'))//
        console.log($('li').text('insert text'))//
    </script>
</body>
  • 相同点
    html()和text()都是读写两用方法。
  • 区别
    • html()对jQuery对象的html进行操作,相当于原生js的innerHTML;text()对jQuery对象的text进行操作,相当于原生js的innerText
    • 没有传递参数时,html()获取的是第一个匹配元素的innerHTML;text()获取的是所有匹配元素的innerText
    • 传递了string参数时,html()修改所有匹配元素的innerHTML为参数值,text()修改所有匹配元素的innerText为参数值

$.extend 的作用和用法?

jQuery.extend([deep,] target [, object1 ] [, objectN ] )

  • 作用:将两个及以上的对象内容合并到目标对象,相同属性后面对象的值覆盖前面对象的值,target将被修改并通过$.extend()返回。参数 deep 为布尔值true/false,用来设置合并操作是否递归(深拷贝)。
    如果只有一个参数提供给$.extend(),jQuery对象本身被默认为目标对象,这样,我们可以在jQuery的命名空间下添加新的功能,这对于插件开发者向 jQuery 中添加新函数时很有用。
  • 用法:
    如果我们想保留原对象,可通过传递一个空对象作为目标对象:
    var object = $.extend({}, object1, object2); //将object1, object2合并到{}中
    默认$.extend()合并操作是浅复制,如果第一个对象的属性本身是一个对象或数组,那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。如果将 true作为该函数的第一个参数,那么会在对象上进行递归的合并。
<script>
    var object1 = {
        apple: 0,
        banana: {
            price: 200, user: {
                age: 20
            }
        },
        cherry: 97
    }
    var object2 = {
        durian: 100,
        banana: {
            weight: 52, name: ['dot', 'dolby', 'bob'], user: {
                age: 18
            }
        }
    }
    console.log($.extend(object1, object2))//浅复制,将object2合并到object1中
    console.log(object1)//object1为返回的最终结果
    console.log(object2)//object2值不变
    console.log($.extend(true, object1, object2))//深复制,将object2合并到object1中
</script>

jQuery 的链式调用是什么?

链式调用适用于异步编程,可避免线程阻塞,实现原理是在当前函数执行完后return this,即返回该函数的执行环境,下一个函数就可以继续在这个函数下运行了,结果就是多种方法在一个jQuery对象上一个接一个地调用
示例

<body>
    <p>hello world</p>
    <h2>hello dolby</h2>
    <script>
        $('p').on('mouseenter', function () {
            $(this).css('background-color', 'red')
        }).on('mouseleave', function () {
            $(this).css('background-color', 'blue')
        }).parents('body').find('h2').toggle()
    </script>
</body>

本例中,mouseenter和mouseleave是事件监听,只有事件触发后才会执行相应函数中的代码,属于异步执行,与以上所说的在同一jQuery上一个接一个地调用方法并不冲突。
结果就是无论如何js引擎都会先执行$('p').parents('body').find('h2').toggle()切换h2的显示状态为隐藏,再根据用户是否触发鼠标事件来计算结果。

jQuery 中 data 函数的作用

  • 在匹配元素上存储任意的数据:
.data( key, [value] )
.data( obj )
  • 返回匹配的元素集合中第一个元素给定名称的 数据上存储的数据:
.data()
.data( key )

作用:允许我们在DOM元素上绑定任意类型的数据,避免了循环引用可能产生的内存泄漏。

$('body').data('name', 'dot')
$('body').data('hobby', { fav: 'eat', love: 'food' })
$('body').data({ arr: [1, 2, 3, 4, 5] })

$('body').data('name')//dot
$('body').data()//{ name: "dot",hooby: { fav: "eat", love: "food" },arr: [1,2,3,4,5] }

写出以下功能对应的 jQuery 方法

  • 给元素 $node 添加 class active,给元素 $node 删除 class active
$node.addClass('active')
$node.removeClass('active')
  • 展示元素$node, 隐藏元素$node
$node.show()
$node.hide()
  • 获取元素$node 的 属性: id、src、title, 修改以上属性
//获取属性
$node.attr('id')
$node.attr('src')
$node.attr('title')
//修改属性
$node.attr('id','newId')
$node.attr('src','newSrc')
$node.attr('title','newTitle')
  • 给$node 添加自定义属性data-src
$node.prop('data-src')
  • 在$ct 内部最开头添加元素$node
$ct.prepend($node)
$node.prependTo($ct)
  • 在$ct 内部最末尾添加元素$node
$ct.append($node)
$node.appendTo($ct)
  • 删除$node
$node.remove()
$ct.detach($node)
  • 把$ct里内容清空
$ct.empty()
$ct.text('')
  • 在$ct 里设置 html <div class="btn"></div>
$ct.html('<div class="btn"></div>')
  • 获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)

获取宽高

//不包括内边距
$node.width()
$node.height()
$node.css('width')
$node.css('height')

//包括内边距
$node.innerWidth()
$node.innerHeight()

//包括内边距,包括边框
$node.outerWidth()//不传参数或参数为false
$node.outerHeight()//不传参数或参数为false

//包括内边距,包括边框,包括外边距
$node.outerWidth(true)
$node.outerHeight(true)

设置宽高

//不包括内边距
$node.width(100)
$node.height('100px')
$node.css({width:'200px',height:'300px'})//设置元素的宽度和高度,也可以不要引号和单位

//包括内边距
$node.innerWidth(30)
$node.innerHeight('30px')

//包括内边距,包括边框
$node.outerWidth(60)
$node.outerHeight('60px')

//包括内边距,包括边框,包括外边距
$node.outerWidth(70,true)
$node.outerHeight('70px',true)
  • 获取窗口滚动条垂直滚动距离
$(window).scrollTop()
  • 获取$node 到根节点水平、垂直偏移距离
$node.offset().left
$node.offset().top
  • 修改$node 的样式,字体颜色设置红色,字体大小设置14px
$node.css({
    'color': 'red',
    'font-size': '14px'
})
  • 遍历节点,把每个节点里面的文本内容重复一遍
$node.each(function () {
    $(this).text($(this).text() + $(this).text())
})
  • 从$ct 里查找 class 为 .item的子元素
$ct.find('.item')
$ct.children('.item')
  • 获取$ct 里面的所有孩子
$ct.children()
  • 对于$node,向上找到 class 为'.ct'的父亲,在从该父亲找到'.panel'的孩子
$node.parents('.ct').find('.panel')
  • 获取选择元素的数量
$node.length
  • 获取当前元素在兄弟中的排行
$node.index()

用jQuery实现以下操作

  • 当点击$btn 时,让 $btn 的背景色变为红色再变为蓝色
var $btn = $('.btn')
$btn.on('click', function () {
    $(this).css('background-color', 'red')
    setTimeout(function () {
        $btn.css('background-color', 'blue')
    }, 500)
})
  • 当窗口滚动时,获取垂直滚动距离
$(window).scroll(function () {
    $node.text($(this).scrollTop())//用html替换text也可
})
  • 当鼠标放置到$div 上,把$div 背景色改为红色,移出鼠标背景色变为白色
var $div = $('div')
$div.on('mouseenter', function () {
    $(this).css('background', 'red')
}).on('mouseleave', function () {
    $(this).css('background', 'white')
})
  • 当鼠标激活 input 输入框时让输入框边框变为蓝色,当输入框内容改变时把输入框里的文字小写变为大写,当输入框失去焦点时去掉边框蓝色,控制台展示输入框里的文字
var $input = $('input')
$input.focus(function () {
    $(this).css('border-color', 'blue')
        .on('keyup', function () {
            $(this).val($(this).val().toUpperCase())
        })
})

$input.blur(function () {
    $(this).css('border-color', 'black')
    console.log($(this).val())
})
  • 当选择 select 后,获取用户选择的内容
//html
<select>
    <option value="1">item 1</option>
    <option value="2">item 2</option>
    <option value="3">item 3</option>
    <option value="4">item 4</option>
    <option value="5">item 5</option>
</select>
<p>用户选取的内容是:<span></span></p>

//js
$('select').on('change', function () {
    $('span').text($('select>option:selected').text())
})

用 jQuery ajax 实现如下效果。

当点击加载更多会加载数据展示到页面效果预览393
我的代码

(可选)实现一个天气预报页面,UI 如下图所示(仅供参考,可自由发挥)。

参考资料

PS:关于jQuery获取和设置元素innerWidth和outerHeight等、网上有很多文章代码或者方法总结得有问题,一定要以自己试过的结论为准。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容