框架JQuery

最新推荐文章于 2024-04-09 23:57:59 发布
最新推荐文章于 2024-04-09 23:57:59 发布
阅读量1.3k 收藏 4
点赞数
文章标签： 前端 javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58495313/article/details/121845383
版权

一、认识JQuery

      ——JQuery是一个javascript的框架，是对javascript的一种封装。

              通过JQuery可以非常方便的操作html的元素

使用JQuery进行隐藏和显示 <script src="https://how2j.cn/study/jquery.min.js"></script>
 
<script>
$(function(){
   $("#b1").click(function(){
      $("#d").hide();
   });
   $("#b2").click(function(){
      $("#d").show();
   });
}); 
</script>
 
<button id="b1">隐藏div</button>
<button id="b2">显示div</button>
 
<br>
 
<div id="d"> 这是一个div  </div>
jquery.min.js

要使用Jquery需要导入一个第三方的javascript库 jquery.min.js，可以下载

<script src="https://how2j.cn/study/jquery.min.js"></script>
本地测试的时候如何使用 jquery.min.js 因为学习到目前为止，还没有讲解如何搭建web服务器，所以不能够像本网站上演示的 把jquery.min.js 放在 /study/jquery.min.js 这个地方。
那么本地要测试怎么做呢？
1. 首先在右侧下载 jquery.min.js
2. 把 jquery.min.js和测试的html放在同一个目录下
3. 在测试的html中直接写 src="jquery.min.js"

理解 $(function(){})

$(function(){

  });

表示文档加载。看上去略复杂，其实是由下面两种构成：

$();

和

function(){

  }

合并在一起就是：

$(function(){

  });

如左侧这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
换句话说，写在这里面的JQuery代码都是文档加载好之后的。
就不会有获取一个还没有加载好的图片这种问题了。
一样功能，还有另一个写法：

$(document).ready(function(){

    });


它也是由两部分组成

$(document).ready();  //此处个人理解为加载准备

通过id获取元素

与javascript通过id获取元素节点的方式(document.getElementById )不同，
JQuery通过 $("#id") 就可以获取了。

注意不同的是前者获取到的是元素节点，

而后者获取的是一个JQuery对象

 <script src="https://how2j.cn/study/jquery.min.js"></script>
 
<script >
 
$(function(){
  document.write( $("#d") );
  document.close();
   });
</script>
 
<div id="d">   Hello JQuery  </div>

增加监听器

JQuery增加click事件的监听

$("#b1").click(function(){

alert("点击了按钮");

});


这个也是由两部分组成：
1. b1按钮的点击事件

$("#b1").click();


2. 弹出对话框的函数

function(){

alert("点击了按钮");

}

与原生javascript需要在html元素上增加监听事件不同的是
JQuery 不需要在html元素上进行操作
这样的好处是，html只需要显示内容，特别是业务复杂起来之后维护js代码会更加容易。

<script src="https://how2j.cn/study/jquery.min.js"></script>
 
<script >
   $(function(){
        $("#b1").click(function(){
              alert("点击了按钮");
           });
     });
</script>
 
<button id="b1"> 按钮 </button>

隐藏与显示

通过$("#d")拿到div对象后，直接调用hide()和show()方法，即可实现隐藏和显示。说到现在就已经明白了吧哈哈哈。

个人理解先调用Button方法，然后接着在Button上调用div方法

<script src="https://how2j.cn/study/jquery.min.js"></script>
 
<script>
$(function(){
   $("#b1").click(function(){
      $("#d").hide();
   });
   $("#b2").click(function(){
      $("#d").show();
   });
});
 </script>
 
<button id="b1">隐藏div</button>
 
<button id="b2">显示div</button>
 
<br>
 
<div id="d">   这是一个div   </div>

 二、常见方法

关键字 简介 示例代码
val

取值

通过JQuery对象的val()方法获取值
相当于 document.getElementById("input1").value;

<script src="https://how2j.cn/study/jquery.min.js"></script>
  
<script>
$(function(){
   $("#b1").click(function(){
      alert($("#input1").val());
         });
     });

</script>
   
<button id="b1">取值</button>
    
<br>
   
<input type="text" id="input1" value="默认值">
html

获取元素内容,如果有子元素，保留标签

 

 <script src="https://how2j.cn/study/jquery.min.js"></script>
  
<script>
$(function(){
   $("#b1").click(function(){
      alert($("#d1").html());
   });
});
  
</script>
  
<button id="b1">获取文本内容</button>
   
<br>
<br>
  
<div id="d1">
这是div的内容
<span>这是div里的span
</span>
</div>
text

获取元素内容,如果有子元素，不包含子元素标签

<script src="https://how2j.cn/study/jquery.min.js"></script>
   
<script>
$(function(){
   $("#b1").click(function(){
      alert($("#d1").text());
   });
});

</script>
   
<button id="b1">获取文本内容</button>
    
<br>
   
<div id="d1">
这是div的内容
<span>这是div里的span  </span>
</div>

三、CSS

关键字 简介 示例代码
addClass

增加class

通过addClass() 增加一个样式中的class

<script src="https://how2j.cn/study/jquery.min.js"></script>
 
<script>
$(function(){
   $("#b1").click(function(){
      $("#d").addClass("pink");
          });
      });

</script>
  <button id="b1">增加背景色</button>
<br>

<style>
.pink{
   background-color:pink;
         }    </style>
  
<div id="d">  Hello JQuery   </div>
removeClass

删除class

通过removeClass() 删除一个样式中的class

<script src="https://how2j.cn/study/jquery.min.js"></script>
 
<script>
$(function(){
   $("#b1").click(function(){
      $("#d").removeClass("pink");
         });
     });  
</script>


  <button id="b1">删除背景色</button>
<br>
<style>
.pink{
   background-color:pink;
     }  </style>
  
<div id="d" class="pink">  Hello JQuery  </div>
toggleClass

切换class

通过toggleClass() 切换一个样式中的class
这里的切换，指得是：
如果存在就删除
如果不存在，就添加

<script src="https://how2j.cn/study/jquery.min.js"></script>
  
<script>
$(function(){
   $("#b1").click(function(){
      $("#d").toggleClass("pink");
      });
  });

</script>


<button id="b1">切换背景色</button>
<br>

<style>
.pink{
   background-color:pink;
}  </style>
   
<div id="d" >    Hello JQuery  </div>
css 函数

通过css函数 直接设置样式

css(property,value)


第一个参数是样式属性，第二个参数是样式值

css({p1:v1,p2:v2})


参数是 {} 包含的属性值对。
属性值对之间用 逗号，分割
属性值之间用 冒号 ：分割
属性和值都需要用引号 “

 <script src="https://how2j.cn/study/jquery.min.js"></script>
  
<script>
$(function(){
   $("#b1").click(function(){
      $("#d1").css("background-color","pink");
   });
   
   $("#b2").click(function(){
      $("#d2").css({"background-color":"pink","color":"green"});
   });
});
   
</script>
  <button id="b1">设置单一样式</button>
  <button id="b2">设置多种样式</button>
<br>
  
<div id="d1" >  单一样式，只设置背景色  </div>
 
<div id="d2" >
   多种样式，不仅设置背景色，还设置字体颜色
   </div>

四、选择器——

         Jquery有多达数十种选择器，本章节把工作中会用到的常用选择器列出来，并逐一解释。

关键字 示例代码

$("tagName")——元素

根据 标签名 选择所有该标签的元素

 

<script src="https://how2j.cn/study/jquery.min.js"></script>
  
<script>
$(function(){
   $("#b1").click(function(){
      $("div").addClass("pink");
         });  
     });
</script>


  <button id="b1">给所有的div元素增加背景色</button>
<br>

<style>
.pink{
   background-color:pink;
}
</style>
   
<div >  Hello JQuery</div>
<div >  Hello JQuery</div>
<div >  Hello JQuery </div>

$("id")——id

$("#id")
根据 id 选择元素
id应该是唯一的，如果id重复，则只会选择第

一个。

 <script src="https://how2j.cn/study/jquery.min.js"></script>
   
<script>
$(function(){
   $("#b1").click(function(){
      $("#d1").addClass("pink");
         });
    });   
</script>
  <button id="b1">给id=d1的div增加背景色</button>
<br>
   
<style>
.pink{
   background-color:pink;
}
</style>
<div >  Hello JQuery</div>
<div >  Hello JQuery</div>
<div >  Hello JQuery </div>

$("className")——类

$(".className")
根据 class 选择元素

<script src="https://how2j.cn/study/jquery.min.js"></script>
   
<script>
$(function(){
   $("#b1").click(function(){
      $(".d").addClass("pink");
      });
   });

</script>
  <button id="b1">给class='d'的div增加背景色</button>
<br>

<style>
.pink{
   background-color:pink;
}
</style>
    
<div class="d">  Hello JQuery </div>
<div class="d" > Hello JQuery </div>
  
<div  >  Hello JQuery  </div>

$("selector1 selector2")——层级

$("selector1 selector2")
选择 selector1下的selector2元素 。
在本例中 选择id=d3的div下的span元素

 <script src="https://how2j.cn/study/jquery.min.js"></script>
    
<script>
$(function(){
   $("#b1").click(function(){
      $("div#d3 span").addClass("pink");
   });
     
});
     
</script>
  <button id="b1">给id='d3'的div 下的 span 增加背景色</button>
<br>
  
<style>
.pink{
   background-color:pink;
}
</style>
     
<div class="d"> <span> Hello JQuery </span></div>   
<div class="d" > <span> Hello JQuery </span></div>
<div id="d3" > <span>Hello JQuery </span></div>

:first——最先
:last——最后

$(selector:first) 满足选择器条件的第一个元素
$(selector:last) 满足选择器条件的最后一个元素

<script src="https://how2j.cn/study/jquery.min.js"></script>
    
<script>
$(function(){
   $("#b1").click(function(){
      $("div:first").addClass("pink");
       });  

   $("#b2").click(function(){
       $("div:last").addClass("pink");

       });
    });

</script>
  <button id="b1">第一个增加背景色</button>

  <button id="b2">最后一个增加背景色</button>
<br>

<style>  .pink{ background-color:pink}  </style>

<div> <span>  Hello JQuery  <span> </div>

<div> <span>  Hello JQuery  <span> </div>

<div> <span>  Hello JQuery  <span> </div>

:odd——奇
最低0.47元/天 解锁文章
楠丝木
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
✿✿✿JavaScript --- jQuery框架一
naoguoteng的博客
12-31 1005
1.jQuery的介绍和在线学习网址以及下载网址5.jQuery如何达到获取原生的DOM对象6.jQuery选择器(1)常见选择器(2)高级选择器以及方法(4)过滤选择器7.常用到的方法(1)html()和 text()方法(2)attr()和 removeAttr()(3)元素样式操作方法和其他方法8(1)创建节点(2)插入节点(3)包裹节点(4)其他节点操作9.jQuery基础事件相关(1) 基础事件(3)解绑事件(4)简写事件(5)复合事件(6)事件对象event(7)事件之冒泡和默认行为以及行为
JQuery框架简介
课堂总结
03-21 8531
1.1jQuery简介 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画...
JS(JQUERY)操作框架页面
07-25
通过JAVASCRIPT或者JQUERY操作框架页面的方法，分为获取元素和调用函数
JQuery框架介绍
Senton
08-27 1850
 官方网站：http://jquery.com    jQuery是一款同prototype一样优秀js开发库类，特别是对css和XPath的支持，使我们写js变得更加方便！如果你不是个js高手又想写出优 秀的js效果，jQuery可以帮你达到目的！   下载地址：Starterkit （http://jquery.bassistance.de/jquery-starterkit.zip）    
【jQuery】jQuery框架
m0_64538862的博客
04-09 736
jQuery基本用法；获取位置；滚动距离；显示/隐藏动画；淡入/淡出动画；展开/收起动画；动画队列及停止方法；自定义动画；插入节点；动画回调函数；动画延迟方法；获取元素尺寸；事件参数；删除节点；事件委托；克隆节点；获取DOM对象；入口函数；轮播图插件；懒加载插件lazyload；fullpage插件；日期选择器插件；表单验证插件；插件机制；jQuery方法；表单提交事件；表单序列化
jQuery框架的介绍以及基本用法--操作dom
weixin_42529276的博客
03-17 304
jQuery框架 概念 jQuery是一个优秀的javascript轻量级框架之一，兼容css3和各大浏览器，提供了dom，events，animate，ajax等简易操作，其本质就是js，并且jquery的插件非常丰富。 jquery插件：利用jquery技术实现具有特定功能的效果。 ......
前端基础之jQuery
qq_53350943的博客
04-07 2480
jQuery是一个封装JS的框架。 使用jQuery可以更方便的编写JS脚本实现的功能。 jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX（重要
框架 jquery-3.6
05-12
jQuery是一个快速、简洁的JavaScript框架,Query设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、...
js经典框架jQuery
07-28
了解js编程后，掌握一门前端框架方便快速加深前端开发
JavaScript的框架jquery文件
01-02
jquery文件，属于JavaScript的一种框架。jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More...
JavaWeb的实验室预约管理系统
11-22
基于JavaWeb的实验室预约管理系统，包含MySQL数据库+JavaWeb源码，具体参考：https://blog.csdn.net/m0_46153949/article/details/109956309
Jquery框架
09-10
Jquery基础笔记，用法，事件以及调用方法的使用
脚本框架jquery
07-20
以上就是关于“脚本框架jQuery”及相关文件的主要知识点，希望对您理解jQuery及其应用有所帮助。在实际开发中，利用jQuery可以极大地提高前端开发效率，同时，jQuery UI则能为项目增添丰富的交互体验。
jquery框架 jquery与ajax整合
04-04
韩顺平 jquery框架 jquery与ajax整合
jquery属于html框架吗,jquery是前端框架吗？
weixin_32287433的博客
06-10 3562
jquery是前端框架吗？jquery不是前端框架，它是一个JavaScript库。框架与库之间最本质区别在于控制权：you call libs, frameworks call you(控制反转)库：库是一个封装好的特定的集合，提供给开发者使用，而且是特定于某一方面的集合(方法和函数)，库没有控制权，控制权在使用者手中，在库中查询需要的功能在自己的应用中使用，我们可以从封装的角度理解库；框架：框...
jQuery与JavaScript与ajax三者的区别与联系
tianzongnihao的博客
04-17 1079
简单总结：1、JS是一门前端语言。2、Ajax是一门技术，它提供了异步更新的机制，使用客户端与服务器间交换数据而非整个页面文档，实现页面的局部更新。3、jQuery是一个框架，它对JS进行了封装，使其更方便使用。jQuery使得JS与Ajax的使用更方便 关系比喻：若把js比作木头，那么jquery就是木板（半成品）jQuery与ajax都是js的一个框架，各有各的功能，若js是父亲的话，jque...
基于jquery开发的UI框架有哪些
热门推荐
qianduankuangjia的博客
09-20 1万+
根据调查得知，现在市场中的UI框架差不多40个左右，不知大家都习惯性的用哪个框架，现在市场中有几款UI框架稍微的成熟一些，也是大家比较喜欢的一种UI框架，那应该是jQuery，有部分UI框架都是根据jQuery研发出来的产品，现在也很常见了。
jQuery框架总结
thebigdipperbdx的博客
04-10 887
What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with a...
avaScript 框架（jQuery）
最新发布
05-17
JavaScript 框架 jQuery 是一个快速、简洁的 JavaScript 库，使得 HTML 文档遍历、事件处理、动画效果和 Ajax 简单易用。jQuery 的设计目的是：通过封装常用的任务简化 JavaScript 编程。它是由 John Resig 创建的，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值