文档章节

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

达达前端
 达达前端
发布于 2019/12/09 01:17
字数 2558
阅读 18
收藏 0

file

作者 | Jeskson

来源 | 达达前端小酒馆

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

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

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

请问jQuery的好处在哪里?

它的好处在于它轻量级,什么是轻量级呢?就是说它非常请求,大小在30kb左右;具有强大的选择器和dom操作的封装,可靠的事件处理机制,有完善的ajaxjquery将所有的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所有标签都加载后执行;JavaScriptwindow.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操作。

domdocument 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!

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

前端技术栈

© 著作权归作者所有

达达前端
粉丝 4
博文 225
码字总数 368230
作品 0
广州
程序员
私信 提问
基于jquery开发的UI框架有哪些

根据调查得知,现在市场中的UI框架差不多40个左右,不知大家都习惯性的用哪个框架,现在市场中有几款UI框架稍微的成熟一些,也是大家比较喜欢的一种UI框架,那应该是jQuery,有部分UI框架都是...

UIleader
2017/09/20
10
0
67 个节省开发者时间的实用工具、库与资源(前端向)

在这篇文章中,我不会与大家谈论大型的前端框架,如 React、Angular、Vue 等,也没有涉及那些流行的代码编辑器,如 Atom、VS Code、Sublime,我只想与大家分享一个有助于提升开发人员效率的工...

张孝国
2018/06/26
0
0
Dojo 与 jQuery 综合比较分析

最近Dojo 和jQuery双双发布了最新的1.8版本,有着相同版本号的两个Javascript库也有许多核心的相同之处:相同的资源加载机制AMD、相同的选择 器 引擎Sizzle等。作为业界知名的Javascript库,...

鉴客
2012/07/09
1.3W
21
2019年应该如何学习前端开发?

近两年来,前端开发工程师越来越火了,2019年已经到来了,很多准备入行前端开发工程师的小伙伴们,不知道准备得怎么样了呢? 有的朋友在想方设法的学习,争取在年后的金三银四能靠实力找到一...

WEB开发阿靖
2019/02/16
0
0
15款ajax特效,针对Lightbox和Modal Dialog

运用Lightbox和Modal Dialog可以很方便地在浏览器中展示内容,而无需重载整个页面,有了Lightbox就不必再使用浏览器弹窗了。Lightbox正愈来愈广泛地应用于媒体、网页、邮件、表格等元素的展示...

小编辑
2010/11/22
4.4K
8

没有更多内容

加载失败,请刷新页面

加载更多

Java IO

同步与异步 同步就是一个任务的完成需要依赖另外一个任务时,只有等待被依赖的任务完成后,依赖的任务才能算完成,这是一种可靠的任务序列。要么成功都成功,失败都失败,两个任务的状态可以...

潦草的犀牛
37分钟前
44
0
Spring Boot Tutorial – Bootstrap a Simple Application

1. Overview Spring Boot is an opinionated, convention-over-configuration focused addition to the Spring platform – highly useful to get started with minimum effort and create ......

Ciet
44分钟前
41
0
聊聊artemis的maxDeliveryAttempts

序 本文主要研究一下artemis的maxDeliveryAttempts maxDeliveryAttempts activemq-artemis-2.11.0/artemis-server/src/main/java/org/apache/activemq/artemis/core/settings/impl/AddressSe......

go4it
今天
50
0
heroku - 如何查看所有日志

我在heroku上有一个小应用程序。 每当我想看日志时,我都会去命令行做 heroku logs 这只能让我看到大约100行。 有没有办法在heroku上查看我们的应用程序的完整日志? #1楼 对于雪松堆栈,请...

javail
今天
51
0
Spring AOP 创建增强类

AOP联盟为增强定义了org.aopalliance.aop.Advice接口,Spring支持5种类型的增强: 1)前置增强:org.springframework.aop.BeforeAdvice 代表前置增强,因为Spring 只支持方法级的增强,所有M...

onedotdot
今天
61
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部