百度360必应搜狗淘宝本站头条
分布式事务框架grpc框架shiro框架java日志框架框架图
当前位置：网站首页 > 技术文章 > 正文

web前端-轻量级框架应用(jQuery基础)

ccwgpt 2024-10-21 04:06 50 浏览 0 评论

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选择器

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)")


$("选择器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为将要解除的函数、




原文链接：https://mp.weixin.qq.com/s/GX7QiTZBLz7Kr64dtm8mbw
作者：达达前端小酒馆

相关推荐

公司组织架构及部门职责#管理制度 #薪酬绩效 #组织架构

...

终于把“公司组织架构与管理部岗位配置”整理好了，拿来即用!

...

老板看完这份“公司组织架构详解”就解放了!

...

丨公司丨公司大架构整理汇总

注：本文转自团队成员原创作品，特此鸣谢（公号：法海图鉴）今日话题公司大架构整理背景介绍经过前几期话题对各种企业类型的介绍，想必大家已经有了初步认识。之后我将带着大家开启对公司的深入了解。本期...

图解物理--八年级物理下册最全知识框架导图

第七章力1力2弹力3重力第八章运动和力1牛顿第一定律2二力平衡3摩擦力第九章压强1压强2液体压强3大气压强4流体压强与流速的关系第十章浮力1浮力2阿基米德原理3物体的浮沉条件及应用第十一章功...

八年级上册生物，思维导图，期末高分必备资料，家长收藏

这是八年级上册生物的思维导图，孩子在背诵知识点的时候，可以看一下知识点在导图中的位置，形成对知识点整体的把握，有助于学生拿高分，特别是图片中带红色星星的部分，更是要注意背诵，是重点内容。家长可以把图片...

2019政府工作报告精华，这张思维导图里全都有

每经记者：李可愚每经编辑：陈星每日经济新闻

图解薪酬体系结构设计

...

司考复习独家总结!一张图总结行政法知识结构体系

作为三大实体法之一，行政法的分值在60分左右，行政法在司法考试中一直比较平稳常规，没有偏题怪题，还是比较容易得分的。小编要提醒大家，在3月之前要把三大实体法学习一遍。下图是厚大在线360导学师小周总结...

一图读懂香港国安新架构:各职位人选公布 有官员曾强硬喊话乱港分子

实用干货!高中物理框架图，让零碎知识“串联”起来

高中物理学习一定要抓好逻辑结构大框架！了解整个知识框架体系后，更易抓住骨干知识，干掉重难知识点~今天给大家分享高中物理的框架图同学们赶紧收藏起来吧！力学知识结构图光学知识结构图热学、原子物理知识结构图...

254m超高层办公楼型钢砼框架-核心筒结构图

高度类别：超高层建筑钢筋混凝土结构：框架,框架核心筒钢结构：钢框架建筑功能：办公包含：办公楼57层（-3层）254.150m钻孔灌注桩桩+筏板型钢混凝土框架-钢筋混凝土核心筒西裙房2层（-...

砖混结构与框架结构，究竟有何区别?千万别被坑!

现在买房装修的人最怕啥？不是价格高，而是房子不安全！两种主流建筑结构，砖混靠墙，框架靠柱子，选错了隔墙都可能要命。简单说，砖混便宜但别碰高层，框架贵点但能保命。砖混那些承重墙根本不能拆，想砸墙改个开放...

大师一百——高中化学必考:《元素周期律》考点框架图

今天大师给大家带来的是高中化学的《元素周期律》考点框架图，高中的同学必须牢记于心，这种重要的考点，考试是一定会考的！化学大师...

需求分析框架图

需求分析框架图

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表
赣ICP备2024040476号-14