【领会要领】web前端-轻量级框架应用（jQuery基础）
作者 | 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！
这是一个有质量，有态度的博客
【领会要领】web前端-轻量级框架应用（jQuery基础）的更多相关文章
- Web前端学习笔记之jQuery基础
0x0 jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Aja ...
- 2015年最全的移动WEB前端UI框架
目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了.在移动WEB开发的过程中,使用合适的移动WEB UI框架可以大大提升我们的开发效率.下面P ...
- web前端UI框架
分类:WEB前端 时间:2016年1月13日 目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了.在移动WEB开发的过程中,使用合适的移动WE ...
- Web前端MVC框架的意义分析
前言: Web前端开发是Web技术发展中的一个重要组成部分,在传统的前端开发中由于外界因素的影响导致其开发形式呈现出简单化的特点,即以页面为主体来展示界面中的信息.然而随着科学技术的不断进步,Web前 ...
- web前端开发学习：jQuery的原型中的init
web前端开发学习:jQuery的原型中的init 有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 jQuery.fn ...
- Web前端三大框架_angular.js 6.0（二）
Web前端三大框架_angular.js 6.0(一) 需要视频教程,看头像昵称处 一.Angular 6.0 1.1样式 html中引入样式:内嵌式,外链式,行内式. ng6中组件引入样式的方式也 ...
- 第二节：Web前端-ASP.NET之C#基础
第二节:Web前端-ASP.NET之C#基础 学习ASP.NET,要掌握学习语言,控件等技能, <div style="text-align: center; line-height: ...
- web前端技术框架选型参考
一.出发点 随着Web技术的不断发展,前端架构框架.UI框架.构建工具.CSS预处理等层出不穷,各有千秋.太多的框架在形成初期,都曾在web领域 掀起过一场技术浪潮,可有些却仅仅是昙花一现,随着他们用 ...
- 收集几个Web前端UI框架
原文:http://www.isaced.com/post-200.html 关于Web前端UI库/框架,我觉得是非常方便的东西,对于我们这种业余的Web开发人员,有时候要写点前端代码的时候把UI框架 ...
随机推荐
- spring-framework-core-ioc Container 笔记版本
Spring框架对于java开发人员来说是无比重要的.接触java也有3年了,接触Spring两年了.在工作中天天使用它,平时也会通过视频和书籍尝试更加的了解Spring.对于初学者来说,Spring ...
- 一篇文章帮你彻底搞清楚“I/O多路复用”和“异步I/O”的前世今生
在网络的初期,网民很少,服务器完全无压力,那时的技术也没有现在先进,通常用一个线程来全程跟踪处理一个请求.因为这样最简单. 其实代码实现大家都知道,就是服务器上有个ServerSocket在某个端口监 ...
- RocketMQ多master迁移至多master多slave模式
一.项目背景 由于当前生产环境RocketMQ机器使用年限较长,已经过保,并且其中一台曾经发生过异常宕机事件.并且早期网络规划较乱,生产.开发.测试等网络没有分开,公司决定对当前网络进行规划,区分各个 ...
- 一致性hash应用-分表扩容
之前给项目里的一个5000多万的表做了水平分表,暂时容量还够,用的根据id一致性hash分了32个表,每个表大概百来万数据.虽然还不需要扩容,但是准备写个demo后续如果需要扩容可以参考 hash方法 ...
- 接口interface实现与显示实现
接口实现: interface IMath { void Add(int x, int y); } public class MathClass : IMath { public void Add(i ...
- 十：装饰器模式（io流）
定义:装饰模式是在不必改变原类文件和使用继承的情况下,动态的扩展一个对象的功能.它是通过创建一个包装对象,也就是装饰来包裹真实的对象. 这一个解释,引自百度百科,我们 ...
- asp.net core 系列 2 启动类 Startup.CS
学无止境,精益求精 十年河东,十年河西,莫欺少年穷 学历代表你的过去,能力代表你的现在,学习代表你的将来 在探讨Startup启动类之前,我们先来了解下Asp.NET CORE 配置应用程序的执行顺序 ...
- Vue笔记1
index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- global对象，数据存储方式和检测，包装器对象等
1.理解global对象 global对象是作为 window 对象的一部分实现的,我们无法通过代码访问到 global 对象. 我们平时在全局环境下定义的内容(变量,函数,常量等等)都是作为 glo ...
- Chrome Dev tools的几点小技巧
figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...