您的位置：首页 > Web前端 > JQuery

【领会要领】web前端-轻量级框架应用（jQuery基础）

2019-12-09 01:17 1176 查看

作者 | Jeskson

来源 | 达达前端小酒馆

jquery
的安装和语法，
jquery
的多种选择器，
dom
操作和
jquery
事件。

jQuery
框架，简介，优势，安装，语法，
jQuery
选择器，
id
选择器，类选择器，标记选择器，属性选择器，位置选择器，后代选择器，子代选择器，选择器对象，选择器对象遍历，页面初始化，
jQuery
的
dom
操作，查找，删除，创建，复制，插入，替换，
jQuery
事件，事件绑定，鼠标事件，键盘事件，表单事件，窗口事件，事件冒泡，事件解除。

jQuery
是一个很好用的
JavaScript
函数库，写的少，做的多。

请问jQuery的好处在哪里？

它的好处在于它轻量级，什么是轻量级呢？就是说它非常请求，大小在30kb左右；具有强大的选择器和

dom
操作的封装，可靠的事件处理机制，有完善的
ajax
，
jquery
将所有的
ajax
操作封装到函数`
$.ajax()
中；具有丰富的插件，完善的文档，开源的产品。

jquery
安装，从jquery下载jquery库，二是从cdn中下载。

jquery
官方网址

http://jquery.com

首先进入

download jquery
下载页面，下载最新的
jquery
库文件，有两个版本：生产版，
Production version
，用于实际网站，
Development version
开发版，用于测试和开发。

<head>
<meta charset="UTF-8">
<title>jquery</title>
<script type="text/JavaScript" src="./js/jquery-xx.js">
</script>
</head>
<script type="text/JavaScript">
$(document).ready(function(){
// 等待dom元素加载完毕
alert("成功引入");
});
</script>

cdn
中配置
Jquery
，如果不下载
jquery
的话，可以用
cdn
引用的。

jquery
语法：

jquery
$(selector).action()
$(this).hide()
$("p").hide()
$("p.test").hide()
$("#test").hide()

// 入口
$(document).ready(function(){
// 执行代码
});

$(function(){
// 执行代码
});

JavaScript的入口函数
// 入口函数如下
window.onload = function(){
// 执行代码
}

JavaScript
的入口函数与
jquery
入口函数：

jquery
的入口函数是在
HTML
所有标签都加载后执行；
JavaScript
的
window.onload
事件是等所有内容（包括图片文件等）加载完之后才执行。

jquery
选择器

JavaScript
的选择器：

document.getElementById();
document.getElementsByClassName()
document.getElementsByTagName()

选择器$(" "),

为一个函数，为工厂函数，$为函数名称。

id选择器

$("#id")

根据给定的id匹配一个元素

类选择器

$(".class")

根据给定的类匹配元素

标记选择器

$("element")

根据给定元素名匹配所有元素

属性选择器

$("element[attribute]")

匹配包含给定属性的元素

$("div[title=test]")

位置选择器

$(element:position)

匹配符合标签中相应位置的元素

$("div:first")

匹配所有div中第一个div元素

后代选择器

$("ancestor  descendant")

匹配给定的祖先元素的所有后代元素

$("#ul li")

匹配 id 为null的所有li元素

子代选择器

$("parent>child")

匹配所有指定"parent"元素中指定"child"的直接子元素

$("#标签id值")

// 原生
var div = document.getElementById('test');
div.style.border = '3px solid blue';

// jquery
$("#test1").css("border", "3px solid red");

$(".class属性值")
$(".cls1").css(...);

$("标记名称");
// 找到所有P标签
$("p")

属性选择器
$("[属性名"])
匹配所有具有指定属性的元素

$("[属性名='值']")
匹配与值相等的元素

$("[属性名!='值']")
匹配与值不相等的元素

$("[属性名^='值']")
匹配以值开头的元素

$("[属性名$='值']")
匹配以值结尾的元素

$("[属性名*='值']")
匹配包含值的元素

位置选择器：

$("selector:first")

匹配第一个元素

$("selector:last")

匹配最后一个元素

$("selector:odd")

匹配索引值为奇数的元素，从0开始计数

$("selector:even")

匹配索引值为偶数的元素，从0开始计数

$("selector.eq(n)")

匹配集合中索引值为n的元素

$("selector.gt(n)")

匹配集合中索引值大于n的元素

$("selector:lt(n)")

匹配集合中索引值小于n的元素

$("选择器1 选择器2...")
$("#test li").css("border", "2px solid red");

子代选择器

$("选择器1>选择器2>...")

选择器对象：

$("选择器").each(function(index){this})

选择器对象的遍历

$("选择器").find()

找前面选择器匹配到的元素的子元素

$("选择器").not()

在前面选择器匹配到的元素中去除某个或者某几个

$("选择器").add()

在前面选择器中再追加节点

选择器对象遍历

<body>
<ul id="test">
<li>d</li>
<li>a</li>
</ul>
</body>

<script type="text/JavaScript">
$("#test li").each(function(index){
this.title="我是第"+(index+1)+"个";
});
</script>

页面初始化

<script type="text/JavaScript">
$(function(){
//一定会在页面加载完成后运行
})
</script>

将

jquery
函数代码放到这个函数就可以等到页面加载结束再运行。

Jquery
中的
dom
操作。

dom
是
document object model
的缩写。文档对象模型。
dom
是一种与浏览器，平台，语言无关的接口，
jquery
中的
dom
操作就是对
HTML
中的元素进行操作。

<script type="text/JavaScript">
$(document).ready(function(){
// 测试
$("#btn1").click(function(){
alert("文本内容："+$("#test0").text());
});
});
</script>

<p id="test0">da</p>
<button id="btn1">da</button>

attr()
获取它的各种属性的值

$(document).ready(function(){
$("button").click(function(){
alert($("p").attr("title"));
});
});

创建

HTML
元素：

$(document).ready(function(){
var $li1 = $("<li>d</li>");
var $li2 = $("<li>a</li>");
$("button").click(function(){
$("ul").append($li1);
$("ul").append($li2);
});
});

插入

HTML
元素

append()

向每个匹配的元素内部追加内容

appendTo()

将所有匹配的元素追加到另一个指定的元素集合中
注意：
$(A).append(B)
的操作，不是将B追加到A中，而是将A追加到B中

prepend()

向每个匹配的元素内部前置内容

prependTo()

将所有匹配的元素前置到另一个指定的元素集合中。
注意：
$(A).prepend(B)
的操作，不是将B前置到A中，而是将A前置到B中

after()

在每个匹配的元素之后插入内容

insertAfter()

将所有匹配的元素插入另一个指定的元素集合的后面
注意：
$(A).after(B)
的操作，不是将B插入到A后面，而是将A插入到B的后面

before()

在每个匹配的元素之前插入内容

insertBefore()

将所有匹配的元素插入另一个指定的元素集合的前面。
注意：
$(A).before(B)
的操作，不是将B插入A前面，而是将A插入B前面

删除HTML元素

删除HTML元素一般使用

jquery
中的
remove()
和
empty()

remove()
的作用就是从
dom
中删除被选元素以及子元素，就是如果某个元素被删除了，那么它的后代元素也都被删除。

empty()
的作用并不是删除
HTML
元素，而是清空
HTML
元素，可以清空选中
HTML
元素中所有后代
HTML
元素。

复制HTML元素

clone()
的作用是复制HTML元素。

$(document).ready(function() {
$("button").click(function() {
$("body").append($("p").clone());
});
});
});

替换

HTML
元素

有两种方法：

replaceWith()
和
replaceAll()
两个方法

repalceWith()

将所有匹配的元素替换成指定的HTML元素或dom元素

repalceAll(selector)

用匹配的元素替换所有selector匹配到的元素

replaceWith()
和
replaceAll()
的作用是一样的，只是用法不同。

A元素替换B元素：

replaceWith()
的写法
A.replaceWith("B")

B.replaceAll("A")

$(document).ready(function(){

$("button").click(function(){
$("ul li:eq(0)").replaceWith("<li>da</li>")
});

});

事件

鼠标事件:

click，mouseover，hover

键盘事件：

keypress，keydown，keyup

表单事件：

submit，change，focus

窗口事件:

scroll，resize

事件绑定

事件绑定语法bind()方法：

bind(type,[data],fn)
click(),blur(),focus(),
mouseover(),mouseout(),
mousedown(),mouseup()
mouseenter(),mouseleave(),
resize(),scroll(),
keydown(),keyup(),keypress()

type
参数是含有一个或多个事件类型的字符串，
data
参数是作为
event.data
属性值传递给事件对象的额外数据对象，
fn
参数为绑定到每个匹配元素事件上面的处理函数。

$(document).ready(function(){
$("input").bind("focus",function(){
$("span").show();
});
});

简写绑定事件

$(document).ready(function(){
$("input").focus(function(){
$("span").show();
});
});

鼠标事件

click(),dblclick()
双击在短时间内发生两次
click
就是依次双击事件。

mouseenter()
当鼠标指针穿过元素时会发生
mouseenter
事件，
mouseleave()
当鼠标指针离开元素时会发生
mouseleave
事件。
hover()
用于模拟光标悬停事件。

$(document).ready(function(){
$("#p1").hover{
function(){
$("#p1").css('background','green');
},
function(){
$('#p1").css("background","pink");
}
}
});

keydown()
键盘或按钮被按下时，发生
keydown
事件，
keyup
当键盘被松开时发生
keyup
事件。
keypress()
当键盘或按钮被按下时，发生
keypress
事件。

表单事件

当提交表单时，会发生

submit
事件。
change()
当元素的值发生改变时，会发生
change
事件，
focus()
当元素获得焦点时，触发
focus
事件。
blur()
当元素失去焦点时触发。

窗口事件：

scroll()
当用户滚动指定的元素时，会触发
scroll
事件。
scroll
事件适用于所有可滚动的元素和
window
对象。
resize()
当调整浏览器窗口的大小时，会触发
resize
事件。

x=0;
$(document).ready(function(){

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

});

事件冒泡，事件会按照

dom
的层次结构像水泡一样不断向上直至顶端

停止冒泡和默认行为：

stopPrapagation()
和
preventDefault()

event.preventDefault();
// 阻止默认行为
event.stopPropagation();
// 停止事件冒泡

事件解除：

unbind(type, [data])

type
为事件类型
data
为将要解除的函数

❤️ 不要忘记留下你学习的脚印 [点赞 + 收藏 + 评论]

作者Info：

【作者】：Jeskson
【原创公众号】：达达前端小酒馆。
【福利】：公众号回复 “资料” 送自学资料大礼包（进群分享，想要啥就说哈，看我有没有）！
【转载说明】：转载请说明出处，谢谢合作！~

大前端开发，定位前端开发技术栈博客，PHP后台知识点，web全栈技术领域，数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。谢谢支持，承蒙厚爱！！！

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

请点赞！因为你们的赞同/鼓励是我写作的最大动力！

欢迎关注达达的CSDN！

这是一个有质量，有态度的博客

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航