【LemonCK】jQuery的基本使用

1、jQuery介绍和引用

jQuery是目前使用最广泛的JavaScript函数库。

jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器（这里我推荐1.12.4版本），2.x和3.x版本放弃支持低版本浏览器，目前使用最多的是1.x系列的。

jQuery的口号和愿望：Write Less，Do More（写得少，做得多）

官方网站：http://jquery.com

jQuery在线手册：https://www.runoob.com/manual/jquery/

版本下载：https://code.jquery.com/

引入页面：jQuery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

2、jQuery选择器

jQuery用法思想

选择某个网页元素，然后对他进行某种操作。

jQuery基本的选择器

jQuery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。

// id选择器（查找 ID 为"myDiv"的元素）

<!--HTML 代码-->
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>

// jQuery 代码:
$("#myDiv");

// 结果:
[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]

// 类选择器（查找所有类是 "myClass" 的元素）

<!--HTML 代码-->
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>

// jQuery 代码:
$(".myClass");

// 结果:
[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]

// 标签选择器（查找一个 DIV 元素）

<!--HTML 代码-->
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>

// jQuery 代码:
$("div");

// 结果:
[ <div>DIV1</div>, <div>DIV2</div> ]

 // 层级选择器

<!--HTML 代码-->
<div class="btn1" id="btn1">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>

// jQuery 代码：
$('#btn1 ul li');

// 结果：
[ <li>1</li>, <li>2</li>, <li>3</li>, <li>4</li>, <li>5</li> ]

// 属性选择器

<!--HTML 代码-->
<div id="div1">
    <div id="box1">box1</div>
    <label for="input">input输入框:
        <input type="text" name="input" id="input">
    </label>
</div>

// jQuery 代码：
$("input[name=user]");

// 结果：
[ <input type="text" name="input" id="input"> ]

 选择同胞和父辈元素

<!--HTML 代码-->
<div class="btn2" id="btn2">
    <ul>
        <li id="li111">111</li>
        <li id="li222">222</li>
        <li id="li333">333</li>
        <li id="li444">444</li>
        <li id="li555">555</li>
        <li id="li666">666</li>
        <li id="li777">777</li>
        <li id="li888">888</li>
        <li id="li999">999</li>
        <li id="li0000">0000</li>
        <li id="li1111">1111</li>
        <li id="li2222">2222</li>
    </ul>
    <ul>
        <li id="li11111">11111</li>
        <li id="li22222">22222</li>
        <li id="li33333">33333</li>
        <li id="li44444">44444</li>
        <li id="li55555">55555</li>
        <li id="li66666">66666</li>
        <li id="li77777">77777</li>
        <li id="li88888">88888</li>
        <li id="li99999">99999</li>
    </ul>
</div>

var li333 = $('#li333').css({backgroundColor: "pink"});
li333.prev().css({backgroundColor: "yellow"});
// jQuery链式调用，可以把上面两行代码合并成一行。
// prev：选择该节点前面紧挨着它的兄弟节点
$('#li777').css({backgroundColor: "pink"}).prev().css({backgroundColor: "yellow"});
// prevAll：选择该节点前面所有它的兄弟节点
$('#li444').css({backgroundColor: "green"}).prevAll().css({backgroundColor: "gray"});
// next：选择该节点后面紧挨着它的兄弟节点
$('#li888').css({backgroundColor: "Chartreuse"}).next().css({backgroundColor: "BlueViolet"});
// nextAll：选择该节点后面所有它的兄弟节点
$('#li0000').css({backgroundColor: "DodgerBlue"}).nextAll().css({backgroundColor: "Gold"});
// siblings：选择除自身外的所有兄弟节点
$('#li55555').css({backgroundColor: "DodgerBlue"}).siblings().css({backgroundColor: "pink"});

// 同理
// 选择div的父元素
$('div').parent();
// 选择div的所有子元素
$('div').children();
// 选择div的同级元素
$('div').siblings();
// 选择div内的class等于cs的元素
$('div').find('.cs');

选择过滤

// 选择包含p元素的div元素
$('div').has('p');
// 选择class不等于cs的div元素
$('div').not('p');
// 选择class等于cs的div元素
$('div').filer('.cs');
// 选择第6个div元素
$('div').eq(5);

补充说明：

看起来jQuery的find()和filter()方法很像，其实截然不同，刚开始学习的我也被误导了（o(╥﹏╥)o）。

<!--HTML 代码-->
<div class="css">
     <p class="rain">测试1</p>
</div>
<div class="rain">
     <p>测试2</p>
</div>

假设我们使用find()方法：

var $find = $("div").find(".rain");
alert( $find.html() ) ;

结果：

 

 假设我们使用filter()方法：

var $filter = $("div").filter(".rain");
alert( $filter.html() );

结果：

 结论：

find()会在div元素内 寻找 class为rain 的元素。
而filter()则是筛选div的class为rain的元素。
一个是对它的子集操作（find），一个是对自身集合元素筛选（filter）。

获取元素的索引值 

有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以用index()方法获取。

<!--HTML 代码-->
<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

// jQuery 代码：
var $li = $('.list li').eq(1);
alert($li.index());  // 弹出索引值1

 3、jQuery操作样式

获取元素样式

// 获取div的样式
$('div').css('width');
$('div').css('color');

修改元素样式

// 设置div的样式
$('div').css('width','30px');
$('div').css('height','30px');
$('div').css({fontSize:'30px',color:'red'});

添加或者移除class属性

// 添加class属性
$('#div1').addClass('show');
// 移除class属性
$('#div1').removeClass('show');
// 重复切换样式
$('#div1').toggleClass('show');

4、绑定click事件

给元素绑定click事件，可以用如下方法：

$('#btn1').click(function(){
    // 内部的this指的是原生对象
    //使用jQuery对象用$(this)
});

 持续更新中，未完待续ing......

最近有点事情，拖更，下次一并补全~

7、jQuery效果函数

方法	描述
animate()	对被选元素应用“自定义”的动画
clearQueue()	对被选元素移除所有排队的函数（仍未运行的）
delay()	对被选元素的所有排队函数（仍未运行）设置延迟
dequeue()	运行被选元素的下一个排队函数
fadeIn()	逐渐改变被选元素的不透明度，从隐藏到可见
fadeOut()	逐渐改变被选元素的不透明度，从可见到隐藏
fadeTo()	把被选元素逐渐改变至给定的不透明度
hide()	隐藏被选的元素
queue()	显示被选元素的排队函数
show()	显示被选的元素
slideDown()	通过调整高度来滑动显示被选元素
slideToggle()	对被选元素进行滑动隐藏和滑动显示的切换
slideUp()	通过调整高度来滑动隐藏被选元素
stop()	停止在被选元素上运行动画
toggle()	对被选元素进行隐藏和显示的切换