jquery基础

Posted 2020-07-28 Cutelady0927

什么是JQ？
一个优秀的JS库，大型开发必备

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

如何学习JQ？
www.jquery.com JQ只是辅助工具，要正确面对 需要分阶段学习

JQ设计思想？

选择网页元素
模拟CSS选择元素
独有表达式选择
多种筛选方法

JQ写法
方法函数化
链式操作
取值赋值合体

JQ与JS关系
可以共存，不能混用

JQ库的引用

jQuery 1.X版本支持IE6-8

jQuery 2.X以上版本不支持IE6-8(移动端可以选择2.0版本以上)

选择网页元素 

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

原生js：

document.getElementById(‘div1‘);                选择id
document.getElementsByTagName(‘div‘);     选择标签元素
getByClass(document,‘box‘);                        选择class

JQ选择元素

$(‘#div1‘)    选择id
$(‘div‘)         选择标签元素
$(‘.box‘)      选择class

 

<div id="div1" class="box">div</div>
<span class="box">span</span>

加样式
$(‘.box‘).css(‘background‘,‘red‘);

获取的是一组元素，比原生的JS省略了循环步骤

筛选方法

<ul>
<li></li>
<li title="hello"></li>
<li class="box"></li>
<li class="box"></li>
<li title="hello"></li>
</ul>

$(‘li).css(‘background‘,‘red‘);
$(‘li:first‘).css(‘background‘,‘red‘);
$(‘li:last‘).css(‘background‘,‘red‘);
$(‘li:eq(2)‘).css(‘background‘,‘red‘);
$(‘li:odd‘).css(‘background‘,‘red‘);
$(‘li:odd‘).css(‘background‘,‘red‘);

$(‘li‘).filter(‘.box‘).css(‘background‘,‘red‘);

$(‘li‘).filter(‘[title=hello]‘).css(‘background‘,‘red‘);