jQuery 初体验

什么是JQ？

一个优秀的JS库 写越少的代码，做越多的事情

JQ的好处？

  • 简化JS的复杂操作
  • 不再需要关心兼容性
  • 提供大量实用方法

JQ官网

jquery的版本

jQuery 分 2 个系列版本 1.x 与 2.x，主要的区别 在于 2.x 不再兼容 IE6、7、8 为移动端而优化，由于减少了一些代码，使得该版本比 jQuery 1.x 更小且更快。

压缩版(compressed) 与 开发版(development)，我们在开发过程中使用开发版（开发版本便于代码修改及调试），项目上线发布使用压缩版（因为压缩版本体积更小，效率更快）。

如何使用JQ

  1. 官网下载jquery.js文件
  2. 导入jquery文件<script src="jquery.js"></script>

选择元素

  • $()
  • css()
<div id="div1" class="div1"></div>
<script>
document.getElementById('div1').style.background = 'red';
document.getElementsByClass('div1')[0].style.background = 'red';
document.getElementsByTagName('div')[0].style.background = 'red';

//jq选择元素的风格是跟CSS风格特别类似

$('#div1').css('background','red');
$('div').css('background','red');
$('.box').css('background','red');

</script>
  • 省略原生的循环操作
<ul>
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>
</ul>
<script>
var aLi = document.getElementsByTagName('li');
for(){
    aLi[i].style
}

$('li').css('background','red');//当选中的是个集合，那么css内部执行的一个循环操作，来修改里面集合的css样式。jquery内部旧执行了个循环操作
</script>

  • $ 和 jQuery

    • $ === jQuery
    • $是jQuery的别名
    • 为了简便, 我们通常使用$
jQuery('#div1').css('background', 'red');

绑定事件

通过调用的jquery对象上的click方法来

$("div").click(function(){});
  • this指向

指向触发事件的原生dom对象

$("div").click(function(){
    alert(this.innerHTML)
})

html()

作用和innerHTML类似，只是该方法可以给多个元素进行操作。

传递字符串参数表示赋值，返回jquery对象。

不传参数，就表示取值。

var $div = $('#div1');

$div.click(function(){
    alert(  $div.html()  );
});

JS与JQ关系

  • jq也是js
  • js原生dom对象与jq对象不能混用
alert(  $div.html()  );  //纯JQ写法

alert( document.getElementById('div1').innerHTML );  //纯JS写法

alert( $div.innerHTML );   //错误的
alert( document.getElementById('div1').html() );  //错误的
  • 例子 : 选择颜色填充方块

取值与赋值的关系

我们知道原生js中取值与赋值是通过直接操作对象属性来实现的

比如说innerHTML 属性

oDiv.innerHTML;//取值
oDiv.innerHTML = 'text';//赋值

在jquery中,实现相同的操作

$div.html();//取值
$div.html('text');//赋值

可以看到是否取值或赋值是通过传入参数的个数决定的

具有相同特征的还有

  • css()
  • attr() 属性
  • val() 值

等方法

<div id="div1" class="div1" data-index="1"></div>
<input type="text" value="123">

$('#div1').css('color','red');
alert( $('#div1').css('color') );  //red


$('#div1').attr('title','hello');

alert( $('#div1').attr('title') );//获取title属性
alert( $('#div1').attr('class') );//获取class
alert( $('#div1').attr('data-index') ); //获取自定义属性

$('input').val('456');//设置value值
alert( $('input').val() );//获取value值

多元素取值

jq中查找到多个元素, 取值取第一个元素的值

<ul>
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
</ul>

<script>
alert($('ul li').html() );//001
</script>

属性选择器

css选择器中大多的语法都可以在jquery中使用

包括属性选择器

<input type="text" value="123">
<input type="text" value="456">
<input type="text" >

<script>
$('input[value]').css('background', 'red');//有value属性的会被选中
$('input[value=123]').css('background', 'red');//value值等于123的会被选中

</script>

<input type="text" value="123_555">
<input type="text" value="123_666">
<input type="text" value="333_888">

<script>
$('input[value^=123]').css('background', 'red');//选中以123开头的
$('input[value$=555]').css('background', 'red');//选中以555结尾的
$('input[value*=3]').css('background', 'red');//选中包含3的

</script>

引号的问题

$('input[value=123]').css('background', 'red');
$('input[value="123"]').css('background', 'red');

上面的代码加不加引号都是正确的

什么时候必须加引号呢？

<div class="box box1"></div>
<script>
$('div[class=box box1]').css('background', 'red');
//当属性的值有空格的 会报错
</script>

这个时候我们就必须加上引号

$('div[class="box box1"]').css('background', 'red');

JQ的链式操作

一步一步的操作：

var $div = $('div');
$div.html('bbbb');
$div.css('background', 'red');
$div.click(function(){
    alert('111');
})

链式操作 :

$('div').html('bbbb').css('background', 'red').click(function(){ alert('111' )});

注意: JQ中的可以链式操作的是针对设置的操作， 取值的操作不能进行链式操作

JQ实战小技巧

命名的规范

divspan

JQ的容错性

<div id="div1"></div>

<script>
var oDiv = document.getElementById('div2');
oDiv.innerHTML = 'bbb';//会报错
</script>

在原生js种， 如果没有找到相应的DOM元素， 执行后续操作会报错

<div id="div1"></div>

<script>
$("#div2").html('bbbb');
</script>

在JQ中没有找到也不会报错， 最多是不执行任何的操作

这就是JQ的容错性

它是把双刃剑:

  • 优点： 不报错， 不影响后续代码的执行
  • 缺点： 不好调试

集合的长度

$()获取到的都是一个集合

集合中只有一个元素，它也是一个集合　$('#id');

它的结构很像数组，有下标， 有length

<ul>
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
</ul>
<script>
var $li = $('ul li');
alert($li[0].innerHTML);
alert($li.length);
</script>

JQ实战小技巧

利用length判断元素是否存在

var $span = $('#span1');
console.log( $span.length );
$span.html('bbbb');

class的操作

  • addClass()
  • removeClass()
  • toggleClass()
<div id="div1" class="box1 box2">aaaaa</div>

<script>
var $div = $('#div1');
$div.addClass('box3');//增加class
$div.addClass('box1');//增加class, 如果存在, 不执行任何操作
$div.addClass('box4 box5');//增加多个class, 用空格隔开

</script>

<div id="div1" class="box1 box2">aaaaa</div>

<script>
var $div = $('#div1');
$div.removeClass('box1');//删除class
$div.removeClass('box3');//删除class, 如果存在, 不执行任何操作
$div.removeClass('box4 box5');//删除多个class, 用空格隔开

</script>

<div id="div1" class="box1 box2">aaaaa</div>

<script>
$('#div1').toggleClass('box3');
</script>

显示隐藏

  • show()/hide()
<input type="button" value="点击">
<br>
<div>div</div>
<div>div</div>
<div>div</div>

<script>
var onOff = false;
$('input').click(function(){
    if(onOff){
        $('div').hide();
    }
    else{
        $('div').show();
    }
    onOff = !onOff;
})
</script>

我们用css()也可以达到相同的效果

<input type="button" value="点击">
<br>
<div>div</div>
<div>div</div>
<div>div</div>

<script>
var onOff = false;
$('input').click(function(){
    if(onOff){
        $('div').css('display', 'none');
    }
    else{
        $('div').css('display', 'block');
    }
    onOff = !onOff;
})
</script>

但是如果我们把div换成span, 隐藏之后再显示会出问题

因为span的display默认为inline

<input type="button" value="点击">
<br>
<span>span</span>
<span>span</span>
<span>span</span>

<script>
var onOff = false;
$('input').click(function(){
    if(onOff){
        $('span').css('display', 'none');
    }
    else{
        $('span').css('display', 'block');
    }
    onOff = !onOff;
})
</script>

使用show()/hide()就可以, show()和hide() 可以智能的判断display

节点的选择(兄弟节点)

next()

选择下一个兄弟节点

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="item">list item 3</li>
   <li>list item 4</li>
   <li class="item">list item 5</li>
   <li>list item 6</li>
</ul>

<script>
$('li.item').next().css('background-color', 'red');
</script>

prev()

选择上一个兄弟节点

```html
<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="item">list item 3</li>
   <li>list item 4</li>
   <li class="item">list item 5</li>
   <li>list item 6</li>
</ul>

<script>
$('li.item').prev().css('background-color', 'red');
</script>

nextAll()

选择下面所有的兄弟节点

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>
<script>
$('li.third-item').nextAll().css('background-color', 'red');
</script>

prevAll()

选择上面所有的兄弟节点

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>
<script>
$('li.third-item').prevAll().css('background-color', 'red');
</script>

siblings()

选择所有的兄弟节点

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>
<script>
$('li.third-item').siblings().css('background-color', 'red');
</script>

参数的筛选功能

上述方法都可以传入一个选择器字符串作为参数，用于对结果进行筛选

//在集合中选择class为selectd的元素
$('item').next('.selected').css('background-color', 'red');
$('item').prev('.selected').css('background-color', 'red');
$('item').nextAll('.selected').css('background-color', 'red');
$('item').prevAll('.selected').css('background-color', 'red');
$('item').siblings('.selected').css('background-color', 'red');

下标

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

推荐阅读更多精彩内容

  • 08-jQuery学习与使用
    为甚嚒要学习jQuery？ 因为JS中有很多痛点： window.onload事件只能出现一次，如果出现多次，后面...
    magic_pill阅读 814评论 0赞 13
  • jQuery基础(1)
    一、样式篇 第1章 初识jQuery （1）环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,358评论 0赞 44
  • jQuery(m)
    jQuery基础 什么是JQ？一个优秀的JS库，大型开发必备JQ的好处？一简化JS的复杂操作二不再需要关心兼容性三...
    幺七阅读 941评论 0赞 2
  • 前端基础面试题(JS部分)
    1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型：Undefined、Nul...
    极乐君阅读 5,502评论 0赞 106
  • [幸福人儿]20170520学习力6期践行记录Day5
    [幸福人儿]20170520学习力6期践行记录Day5 ✪连续几天播放Phonics Kids的CD，每天将近一个...
    金大地阅读 97评论 0赞 0