震惊 一文入门jQuery！！！

李恩泽的博客
73 阅读9分钟

jQuery

jQuery是一个轻量级的JavaScript库，主要为了方便我们进行DOM操作

包含以下功能

- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX 异步加载

jQuery介绍

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

据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库，微软公司甚至把jQuery作为他们的官方库

jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器；2.x、3.x系列放弃支持低版本浏览器

目前使用最多的是1.x系列的

js的使用可以通过下载，或者直接使用cdn

<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

jQuery语法

$(document).ready( function(){
    $("p").click(function(){ // p标签点击时，样式会切换
        $(this).css("color","red");
    });
})

jQuery语法是通过选取HTML元素，并对选取的元素执行某些操作

获取元素语法通过选择器

$(selector).action()
// 选择器

美元符号定义jQuery对象

选择符（selector）查询和查找HTML元素

jQuery的action()执行对元素的操作

为了防止文档在完全加载（就绪）之前运行jQuery代码，jQuery的代码经常会位于一个document ready函数中

$(document).ready(function(){
   // 开始写 jQuery 代码...
});

document ready是在html所有标签(DOM)都加载之后，就会去执行

window.onload事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行

jQuery选择器

jQuery的选择器可以更加方便我们对页面的DOM元素进行操作

不需要再像之前一样使用document.getElementById诸如此类的方法

元素选择器

jQuery选择器允许对HTML元素组或单个元素进行操作

$("p").click(function(){
    ...
}
<!-- 当某个p被点击时，都会触发该js函数 -->

ID选择器

ID选择器通过HTML元素的ID属性选取指定的元素

页面中的元素的id应该是唯一的，在页面中选取唯一的元素需要#id选择器

$("#change").click(function(){
    ...
});

类选择器

通过元素的class属性进行查找，选择器语法为.class语法

$("button").click(function(){
	$(".pClass").hide();
});

其他选择器

语法描述
$(this)选取当前HTML元素
$("*")选取所有元素
$("p.intro")选取class为intro的p元素
$("p:first")选取第一个p 元素
$("ul li:first")选取第一个ul元素的第一个li元素
$("ul li:first-child")选取每个ul元素的第一个li元素
$("[href]")选取带有href属性的元素
$("a[target='_blank']")选取所有target属性值等于_blank的a元素
$(":button")选取所有type="button"的 input元素 和button元素
$("tr:odd")选取奇数位置的tr元素

选择判断

jquery有容错机制，即使没有找到元素，也不会出错

可以用length属性来判断是否找到了元素，length等于0，就是没选择到元素；length大于0，就是选择到了元素

var oh = $("h1");
oh.length // > 1 | 0

jQuery遍历

在查找时，还可以通过遍历，相对于某些元素进行位置查找，从而获取到想要的元素位置

首先先要分清楚在HTML中元素的级别关系，比如下面的示例

<div>
    <ul>
        <li> 
            <span>a</span>
        </li>
        <li>
            <a>b</a>
        </li>
    </ul>
</div>

- <div> 元素是 <ul> 的父元素，同时是其中所有内容的祖先。
- <ul> 元素是 <li> 元素的父元素，同时是 <div> 的子元素
- 左边的 <li> 元素是 <span> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
- <span> 元素是 <li> 的子元素，同时是 <ul> 和 <div> 的后代。
- 两个 <li> 元素是同胞（拥有相同的父元素）。
- 右边的 <li> 元素是 <a> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
- <a> 元素是右边的 <li> 的子元素，同时是 <ul> 和 <div> 的后代。

祖先遍历

直接父元素

parent(): 返回被选择元素的直接父元素

<div>
    <ul>
        <li> 
            <span>普通内容1</span>
        </li>
        <li> 
            <span>普通内容2</span>
            <a href="https://www.baidu.com">百度</a> 
        </li>
    </ul>
</div>

获取全部span标签的父标签，并设置红色像素边框

$(document).ready(function(){
    $("span").parent().css("border","1px solid red");
});
全部父元素

parents(): 返回被选择元素的祖先们，包含父元素

<div>
    <ul>
        <li> 
            <span>普通内容1</span>
        </li>
        <li> 
            <a href="https://www.baidu.com">百度</a> 
        </li>
    </ul>
</div>

将span标签全部父元素加上红色像素边框

$(document).ready(function(){
    $("span").parents().css("border","1px solid red");
});
父元素过滤

该方法也可以指定父元素中的某些元素进行二次过滤，比如选择所有父元素中类为father的元素

<div class="father">
    <ul class="father">
        <li> 
            <span>普通内容1</span>
        </li>
        <br>
        <li> 
            <a href="https://www.baidu.com">百度</a> 
        </li>
    </ul>
</div>

找到了class属性位father的[div, ul]

$(document).ready(function(){
    $("span").parents(".father").css("border","1px solid red");
});
界限父元素

parentsUntil("limit"): 向上查找,直到找到元素界限为止之前的所有父元素

<div>
    <ul>
        <li> 
            <span>普通内容1</span>
        </li>
        <br>
        <li> 
            <a href="https://www.baidu.com">百度</a> 
        </li>
    </ul>
</div>

找到span截止div标签之前的父元素，[ul, li]

$(document).ready(function(){
    $("span").parentsUntil("div").css("border","1px solid red");
});

后代遍历

直接子元素

children(): 返回被选元素的直接子元素，不会继续向深层次遍历

<div class="father">
    <ul class="father">
        <li> 
            <span>普通内容1</span>
        </li>
        <br>
        <li> 
            <a href="https://www.baidu.com">百度</a> 
        </li>
    </ul>
</div>

找到li标签的直接子元素，[span, a]

$(document).ready(function(){
    $("li").children().css("border","1px solid red");
});
全部子元素

find("*"): 返回被选元素的所有符合条件的直接子元素，并且会继续向深层次遍历

<div class="father">
    <ul class="father">
        <li> 
            <span>普通内容1</span>
        </li>
        <br>
        <li> 
            <a href="https://www.baidu.com">百度</a> 
        </li>
    </ul>
</div>

找到了ul的全部子元素，[li, span, a]

$(document).ready(function(){
    $("ul").find("*").css("border","1px solid red");
});

同胞遍历

全部同胞

siblings(): 返回被选元素的所有同胞元素

<p>一个p标签</p>
<span>一个span标签</span>
<h3>一个h标签</h3>
<strong>一个strong标签</strong>

找到span的同胞标签们，[p, h3, strong]

$(document).ready(function(){
    $("span").siblings().css("border","1px solid red");
});
下个单独同胞

next(): 返回被选元素的下一个同胞元素，只返回一个元素

<p>一个p标签</p>
<span>一个span标签</span>
<h3>一个h标签</h3>
<strong>一个strong标签</strong>

找到了span标签的下一个同胞标签，[h3]

$(document).ready(function(){
    $("span").next().css("border","1px solid red");
});
之后全部同胞

nextAll(): 返回被选元素的所有下面的同胞元素，返回所有跟随同胞

<p>一个p标签</p>
<span>一个span标签</span>
<h3>一个h标签</h3>
<strong>一个strong标签</strong>

找到了span标签之后所有的同胞标签，不包含前面的，[h3, strong]

$(document).ready(function(){
    $("span").nextAll().css("border","1px solid red");
});
之后界限同胞

nextUntil("limit"): 返回直到limit界限的所有跟随同胞，不包含limit

<p>一个p标签</p>
<span>一个span标签</span>
<h3>一个h标签</h3>
<strong>一个strong标签</strong>

找到了截止strong标签的所有span标签的同胞标签，[h3]

$(document).ready(function(){
    $("span").nextUntil("strong").css("border","1px solid red");
});

数量过滤方法

语法描述
first()返回被选元素的首个元素
last()返回被选元素的最后个元素
eq()返回被选元素中带有指定索引号的元素，索引从0开始
filter()规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
not()返回不匹配标准的所有元素，与filter相反
$("h3").filter(".suit");
// 选择所有类名为suit的h3标签

$("p").not(".green");
// 过滤所有类名为green的p标签

jQuery属性获取

文本获取

text(): 设置或返回所选元素的文本内容，不会获取到文本内容里的标签结构

html(): 设置或返回所选元素的内容（包括HTML标记）

<p>这是个<b>p</b>标签</p>

$("p").text()); // 这是个p标签
$("p").html()); // 这是个<b>p</b>标签

表单获取

val(): 设置或返回表单字段的值

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

$("input").val());

属性获取

attr("src"): 获取属性

<a href="https://www.baidu.com">百度</a>

$("a").attr("href")); // https://www.baidu.com
// 获取a标签的href属性

jQuery属性修改

文本修改

dom.text("str")

dom.html("str")

$("#test1").text("Hello world!");
$("#test2").html("<b>Hello world!</b>");

表单修改

dom.val("str")

$("#test3").val("修改后的值");

属性修改

attr()

以下是一个将a标签的跳转地址变为搜狗的示例

<a href="https://www.baidu.com">百度</a>

$("a").attr("href","https://www.sougou.com");

// 同时设置多个属性
$("a").attr({
    "href" : "https://www.sougou.com",
    "class" : "sougou"
});

jQuery样式操作

获取样式

$("selector").css("attr")

修改样式，可以直接通过css属性修改

$("div").css("color"); // rgb(255, 0, 0)
$("div").css("border"); // 1px solid rgb(128, 128, 128)

设置样式

单个设置

$("selector").css("attr","xxx")

多个设置

$("selector").css({"attr1": "xxx", "attr2": "yyy"})

demo

$("div").css("color","blue");
$("div").css({"color":"blue", "border":"1px dashed yellow"});
  • 注意: 如果选择器div选择到了多个,在获取信息时,只取第一个

添加样式

addClass(): 向被选元素添加一个或多个属性

.redFont{
    color: red;
}
.blueBoder{
    border: 1px solid blue;
}

$(".father").addClass("redFont blueBoder");

<div class="father">
    这是个div
</div>

删除样式

removeClass(): 删除指定的class属性

.redFont{
    color: red;
}
.blueBoder{
    border: 1px solid blue;
}

$(".redFont").removeClass("blueBoder");

<div class="blueBoder redFont">
    这是个div
</div>

样式切换

toggleClass(): 设置或移除被选元素的一个或多个类进行切换

该方法检查每个元素中指定的类

如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果

<div class="blueBoder redFont">
    这是个div
</div>

$("p").toggleClass("redFont");

<p class="redFont">第一段文字</p>
<p class="redFont">第二段文字</p>
<p>第三段文字</p>
<p>第四段文字</p>
<h3>这是h3标题</h3>
<button>按钮</button>

jQuery事件

鼠标事件

click: 点击

$(selector).click(function(){
	...    
});

dbclick: 双击

$(selector).dbclick(function(){
	...    
});

mouseenter: 穿过某元素

$(selector).mouseenter(function(){
	...    
});

moseleave: 鼠标离开

$(selector).mouseleave(function(){
   ... 
});

hover: 鼠标悬停

$(selector).hover(function(){
	...
});
// onmouseover
// onmouseleave

键盘事件

keydown: 键按下的过程

$(selector).keydown(function(){
    //
});

keypress: 键被按下

i = 0
$(document).ready(function(){
    $("input").keypress(function(event){
        $("span").text(i+=1);
    });
});
// 在input表单中按了多少次

<input type="text">
<p>按键的次数: <span>0</span></p>

keyup: 键被松开

$(selector).keyup(function(){
   //
});

表单事件

submit: 表单提交

$("form").submit(function(){
	...
});

change: 表单修改

$("input").change(function(){
	...
});

**注意：**当用于select元素时，change事件会在选择某个选项时发生；当用于text field或text area时，change事件会在元素失去焦点时发生

focus: 光标选中

$("input").focus(function(){
    $("label").fadeOut(2000);
});
// 当输入框被选中时，label标签淡出 fadeOut

<label>看看这个文字</label>
<input type="text">

blur: 光标离开

$("input").blur(function(){
	...
});

文档/窗口事件

load: 指定元素已加载

load()方法在jQuery版本1.8中已废弃

$("img").load(function(){
    alert("图片已载入");
});

resize: 当调整浏览器窗口大小时，发生resize事件

$(window).resize(function(){
   $("span").text(i+=1);
});

<span>0</span>次

scroll: 当用户滚动指定的元素时，会发生scroll事件

scroll事件适用于所有可滚动的元素和window对象（浏览器窗口）

$("div").scroll(function(){
    $("span").text(x+=1);
});

unload: 当用户离开页面时，会发生unload事件

unload()方法在jQuery版本1.8中已废弃，在3.0版本被移除

$(window).unload(function(){
    alert("Goodbye!");
});
// unload() 方法只应用于 window 对象

jQuery正则

正则规则

- \d：匹配一个数字
- \D：匹配一个非数字，即除了0-9
- \w：匹配字母、数字、下划线
- \W：匹配非单词字符，等价于\[^A-Za-z0-9_\]
- \s：匹配一个空白符
- \S：匹配一个非空白符
- \b：匹配单词边界
- \B：匹配非单词边界
- .：匹配任意字符

开头结尾

- ^：开头匹配 
- $：结尾匹配

正则次数

- ?：出现零次或一次；最多出现一次
- +：出现一次或多次；至少出现一次
- *：出现零次或多次；任意次
- {n,m}：出现n-m次

匹配范围

- [a-z]：匹配任意小写字母
- [0-9]：匹配任意数字

正则语法

var regex = /规则/参数

var regex = /\d+/ // 匹配所有数字

正则表达式

var regex = /[a-z]+$/ ; // 任意小写字母结尾
var regex = new RegExp()

- g：全局的匹配(匹配多次；)
- i：大小写不敏感匹配(忽略字符大小写)
- m：多行(^和$能匹配行结束符)

捕获、非捕获型

(?:(\d+)) // 非捕获型分组 结果并不会复制所匹配的文本
(\d+) // 其中的\d+ 是捕获型分组，结果会放入最终的匹配结果中

判断方法

将匹配到的文本保存到一个结果数组

var array = regex.exec(string) // 从string字符串中，匹配符合regex正则规则的数据们

本身的表达式是一个包含分组匹配的，那么使用exec可以将每个分组保存到数组结果的依次位置中

匹配成功返回true，否则返回假

var bool = regex.test(string) // 如果包含返回true,反之为false

常用正则规则

regAccount = /^\w{6,20}$/; // 字母数字下划线，用户名验证6-20位

regEmail = /^[a-zA-z1-9]{8,20}@(163|126|qq)\.(com|cn)$/  // 邮箱验证

regPass = /^[\w!@#$%^&*]{6,20}$/ // 密码验证

regPhone = /^1[3,4,5,7,8]\d{9}$/ // 手机号验证

sStr = "123456"
regex = /\d+/
alert(regex.test(sStr)); // true

jQuery效果

显示、隐藏

show: 显示元素

show(speed:[slow|fast], callback)
// speed: 淡入或淡出时的速度
// callback: 效果结束时的回调方法

点击按钮让文字显示或消失

<p>这是一段文字</p>
<button id="show" >show</button>

$("#show").click(function(){
    $("p").show();
});

隐藏

hide: 隐藏元素

hide(speed:[slow|fast], callback)
// speed: 淡入或淡出时的速度
// callback: 效果结束时的回调方法

点击按钮让这段文本消失

<p>这是一段文字</p>
<button id="hide" >hide</button> 

$("#hide").click(function(){
    $("p").hide("slow");
});

切换显示

toggle: 显示被隐藏的元素，并隐藏已显示的元素

toggle()

比如点击按钮让文字在出现的情况下消失，或是在消失的情况下出现

<p>这是一段文字</p>
<button>按钮</button> 

$("button").click(function(){
  $("p").toggle();
});

淡入

fadeIn: 淡入已隐藏的元素

fadeIn(speed, callback)
// speed: 淡入或淡出时的速度
// callback: 效果结束时的回调方法

比如点击按钮让三段文本分别以不同速度淡入

<p id="p1">这是一段文字</p>
<p id="p2">这是一段文字</p>
<p id="p3">这是一段文字</p>
<button>按钮</button> 

$("button").click(function(){
    $("#p1").fadeIn();
    $("#p2").fadeIn("slow");
    $("#p3").fadeIn(3000);
});

淡出

fadeOut: 淡出可见元素

fadeOut(speed, callback)
// speed: 淡入或淡出时的速度
// callback: 效果结束时的回调方法

点击按钮，分别以不同速度对段落进行淡出

<p id="p1">这是一段文字</p>
<p id="p2">这是一段文字</p>
<p id="p3">这是一段文字</p>
<button>按钮</button> 

$("button").click(function(){
    $("#p1").fadeOut();
    $("#p2").fadeOut("slow");
    $("#p3").fadeOut(3000);
});

淡出切换

fadeToggle: 在fadeIn()与fadeOut()方法之间进行切换

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#p1").fadeToggle();
            $("#p2").fadeToggle("slow");
            $("#p3").fadeToggle(3000);
        });
    });
</script>

<p id="p1">这是一段文字</p>
<p id="p2">这是一段文字</p>
<p id="p3">这是一段文字</p>
<button>按钮</button>

滑动

slideDown(speed,callback) // 向下滑动元素
slideUp(speed,callback) // 向上滑动元素
slideToggle(speed,callback) // 在 slideDown() 与 slideUp() 方法之间进行切换
// 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
// 可选的 callback 参数是滑动完成后所执行的函数名称
avatar
文章
阅读
粉丝