JQuery的使用

最新推荐文章于 2024-06-11 09:46:29 发布
最新推荐文章于 2024-06-11 09:46:29 发布
阅读量203 收藏
点赞数
文章标签： jquery html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zy123r/article/details/120221260
版权
本文详细介绍了jQuery的基本使用，包括如何引入资源、选择器的使用、DOM操作、事件处理、动画效果以及链式调用。jQuery简化了JavaScript中DOM操作，提供了便利的API来实现元素选取、内容操作、CSS控制、事件绑定等功能，同时也支持AJAX和实用工具方法。此外，文章还对比了jQuery与原生JavaScript在文档加载和事件处理上的区别。
摘要由CSDN通过智能技术生成

JQuery 是一个高效、精简并且功能丰富的第三方JavaScript 工具库，为我们封装了DOM操作，让我们操作dom节点更加方便，简化我们的操作。
功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

使用：
bootcdn 找到资源 把链接引入到HTML文件里
1.直接引入网络资源

<script src = "https://code.jquery.com/jquery-1.12.4.js"></script>

2.将网络资源下载到本地使用

<head>
<script type="text/javascript" src="文件路径"></script>
</head>

通过jQuery或者 $ 去调用相应的属性和方法

 console.log(jQuery);
 console.log($ );
 console.log(jQuery===$);//true
  1. $ (选择器)
    通过选择器选择符合条件的Element元素，将其保存为jQuery对象
    选取所有元素console.log($("*"));

具体的选择器
基本选择器
层次选择器
伪类选择器
元素选择器
属性选择器

2 .$ (html片段)
将html片段转换成Element,然后再封装为jQuery对象
3. $ (Element元素)
将Element元素转换为jQuery对象
4. $ (匿名函数)
匿名函数会在文档加载完成后执行
//匿名函数 == 文档就绪事件

 $(function({
     var btn=$('button');
     console.log(btn);
 })

防止文档没有加载完成就运行jQuery代码
//文档就绪事件（类似于原生js的window.onload）

$(document).ready(
	function(){
      var btn=$('button');
      console.log(btn);
})

和window.onload的区别
1.书写个数不同

Js入口函数只能出现一次，出现多次会存在事件覆盖的问题。
jQuery的入口函数，可以出现任意多次，并不会存在事件覆盖问题。

2.执行时机不同

Js入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。
jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。

事件：

click,dblclick,mouseenter,mouseleave,hover,
keypress,keydown,keyup
submit,focus,load,resize…

举例：1.click

$("div").click(
    function(){
      $(this).hide();//点击隐藏
});

2.hover
hover两个参数，第一个是光标移入的回调函数，第二个是光标移出的回调函数，
hover == mouseenter+mouseleave

3.焦点事件 focus,blur
  $("input").focus(
      function(){
        /* $(this).hide(); */
        $(this).css("background-color","blue");
   })
  1. 键盘事件
 $(document).keydown(
     function(event){
     console.log(event.keyCode)
     if( event.keyCode==13){
     $("input").hide();
     }
  })

效果：
1.去显示或者隐藏html元素
hide()

参数：两个可选
1.速度 数字类型的 毫秒 string类型(fast/slow)
2.回调函数function 隐藏完成后会执行

show()

参数：两个可选
1.速度 数字类型的 毫秒 string类型(fast/slow)
2.回调函数function 隐藏完成后会执行

toggle()

参数：两个可选
1.速度 数字类型的 毫秒 string类型(fast/slow)
2.隐藏完成后会执行

2.淡入淡出效果
fadeToggle()

参数：两个可选
1.速度 数字类型的 毫秒 string类型(fast/slow)
2.隐藏完成后会执行

fadeOut()

参数：两个可选
1.速度 数字类型的 毫秒 string类型(fast/slow)
2.隐藏完成后会执行

fadeIn()

参数：两个可选
1.速度 数字类型的 毫秒 string类型(fast/slow)
2.隐藏完成后会执行

3.滑动效果
slideUp()

参数：两个可选
1.速度 数字类型的 毫秒 string类型(fast/slow)
2.隐藏完成后会执行

slideDown()

参数：两个可选
1.速度 数字类型的 毫秒 string类型(fast/slow)
2.隐藏完成后会执行

slideToggle()

参数：两个可选
1.速度 数字类型的 毫秒 string类型(fast/slow)
2.隐藏完成后会执行

4.链式调用

$("#div").css("color",orange).slideUp(2000).slideDown(200).fadeOut(200).fadeIn(200);

操作DOM节点
1.获取节点
$(选择器)
2.获取内容、属性
.text();
.html();
.val();//返回表单字段
.attr();//获取属性
3.设置内容、属性
1.直接写要设置的内容、属性
.text(…);
.html(…);
.val(…);//返回表单字段
.attr(…);//可以设置一个或多个属性

//设置一个属性
$(“a”).arrt(“href”,“http://taobao.com”);
//设置多个属性
$(“a”).arrt({
“href”,“http://taobao.com”,
“title”:“url”,
});

2.可以设置回调函数

 $("#app").text(function(i,text){
       console.log(i);
       console.log(text);
 });

回调函数的参数

被选中元素列表中 当前元素的下标
text是旧文本
return 新内容 (函数的返回值 会作为元素内显示的新内容)

4.添加元素
append
1.在当前元素内部操作

 $("#app").append("追加文本");
 $("#app").prepend("在开头添加文本");

2.追加新元素

  var p1= " <p> p1</p> "; 
  var p2= " <p> p2</p> "; 
  $("#app").append(p1,p2);
  $("#app").prepend(p1,p2);

3.在当前元素外部操作

 $("#app").after("追加文本");
 $("#app").before("在开头添加文本");

5.删除元素
remove

   $("#app").remove(); //删除选中的元素以及子元素
   $("#app").empty(); //删除被选中元素的子元素

6.静态方法
遍历
each 、 map 、 toArray

  $("div").each(function(){
      console.log($(this));
  });

7.css

$("#app").css({
   "color":"blue",
   "font-size":"16px",
})

DOM对象和JQuery对象

jQuery选择器拿到DOM对象后又对其做了封装，让其具有了jQuery方法的jQuery对象，说白了，就是把DOM对象重新包装了一下。

$(“div”):这个方法返回的是jQuery对象，它封装了DOM对象

jQuery对象转换为DOM对象
第一种方式

var btn1 = $btn[0];

第二种方式

var btn2 = $ btn.get(0);// 此时就把jQuery对象$btn转换成了DOM对象btn2

DOM对象转换为jQuery
使用$(domObject)包裹就可以包装成一个jQuery对象
jQuery选择器

jQuery选择器是jQuery强大的体现，它提供了一组方法，让我们更加方便的获取到页面中的元素。语法和css的选择符保持一致。

煎饼狗子ing
关注
jQueryLogin
03-07
基于jQuery插件库的科幻登陆界面，可以进行简单操作，主要是具有实用功能。
jquery使用经验小结
10-24
在本文中，作者通过个人使用jQuery的实践经验，总结出了五个重要知识点，让我们一起来探讨一下这些知识点的具体内容。 1. jQuery对象与原生DOM对象的互转 在使用jQuery时，我们经常会遇到需要在jQuery对象和原生DOM...
JQuery 的logger 插件
全的专栏
01-19 798
Console.log ,这个对所有的前端童鞋都不陌生，但问题是比较低版本的IE6等不支持，如果在代码中写了console.log，就会报脚本错误。于是包装console.log就成了比较顺利成章的问题，包装很简单，而且目前市面上也已经有了很多，那我为什么还需要自己写个呢？我牛B? No.因为他们不满足我的需求。我的需求很简单，就两个： 1： 统一项目中的console，解决IE低版本脚本错误问
jQuery-inlog：直观的jQuery调试插件（v 1.0.0）
最新发布
gitblog_00042的博客
06-11 391
jQuery-inlog：直观的jQuery调试插件（v 1.0.0） jquery-inlogSee what your jQuery code does inside like a boss.项目地址:https://gitcode.com/gh_mirrors/jq/jquery-inlog 1、项目介绍 jQuery-inlog是一款轻量级且强大的被动式jQuery插件，它可以将cons...
JQuery
yhwl66的博客
05-10 160
jquery是一个轻量级的JavaScript库，它对应原生的js进行了封装，将对应的dom操作及对应的动画等做了一系列的方法封装，里面所有的内容都是方法。它的核心是链式调用及对应的jquery对象的扩展。$.extend自定义原型函数//静态方法扩展 $ . extend({console . log('hello') } }) $ . sayHello() //原型方法扩展 $ . fn . extend({
jQuery个人总结
qq_43406976的博客
10-05 1389
1.查看jquery版本 console.log(jQuery.fn.jquery) console.log(jQuery.prototype.jquery) console.log($.fn.jquery) console.log($.prototype.jquery) 引入多个js文件：$ 是后引入的文件中的 console.log($.fn.jquery) 多库共存： $.noConflict() // 后引入的jquery文件把 $符号 的控制权给释放了 var _$ =
jQuery使用jsonp实现百度搜索的示例代码
10-15
主要介绍了jQuery使用jsonp实现百度搜索，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下
NetCore Jquery使用AJAX POST方式下载Excel文件
08-24
NetCore Jquery使用AJAX POST方式下载Excel文件
jQuery使用手册之一
01-19
 jQuery是一款同prototype一样优秀js开发库类，特别是对css和XPath的支持，使我们写js变得更加方便！如果你不是个js高手又想写出优 秀的js效果，jQuery可以帮你达到目的！ 下载地址：Starterkit ...
jQuery使用方法
12-12
使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()(简写为$)，然后得到被选中的元素。 选择表达式可以是CSS选择器： $(document)//选择整个文档对象 $('#myId')//选择ID为myId的网页元素 $('...
扩展jquery 实现增强版console.log方法
Y_东东的博客
11-29 4254
1.console.log()方法在打印原始类型变量的时候会正常的输出，如string,number...，在输出对象类型的时候就会得到 [object Array]或[object Object],这时候就需要使用JSON.stringify()进行数据格式转换； 2.扩展jquery方法实现打印不同类型的数据 $.extend({     log:function(message){   ...
通过 console.log($("#MyForm"));，形象的看一下，jQuery对象，都是什么？
Ideality_hunter的专栏
04-21 1635
console.log($("#MyForm"));
JQuery接口请求及传参示例
weixin_43337481的博客
06-21 558
【代码】JQuery接口请求及传参示例。
jquery常用函数
good_boys的博客
04-01 325
Object.assign #复制对象 const obj = { a: 1 }; const copy = Object.assign({}, obj); console.log(copy); // { a: 1 } #合并对象 const o1 = { a: 1 }; const o2 = { b: 2 }; const o3 = { c: 3 }; const obj = Object.as...
jQuery 中console.log什么意思
u014704496的专栏
05-29 6029
您好！您说的这个是一个日志文件，控制台日志。这个是浏览器的函数，如果你使用firefox并且装有firebug插件，当使用console.log(……)时，会把括号内的字符串输出到控制台，当然，在IE中这个是没有的，要报错。相同的还有console.info(……),console.debug(……)，区别是有些能通过控制台的输出点进去对应的语句。 希望对您有帮助！
javaScript与jQuery的比较（区别）
ygh5123687的博客
03-26 1万+
一：本质区别 javaScript是通过<script></script>标签插入到html页面中，支持当前所有主流浏览器的轻量级的编程语言。 jQuery是一个javaScript函数库（javaScript框架），使用jQuery，需要在html页面开始引入jQuery库。例： <script src="js/jquery.min...
jquery日志模块 包含生成txt文件(不需要后台)
热门推荐
鸿仔的博客
07-07 12万+
先整个DIV装日志 样式随便整 <div id="model_logs" style="width:500px;height:700px;padding:10px;"></div> js： 和后台交互 需要打印的日志调用outLogs("需要打印的日志"); //输入日志 function outLogs(log) { var myDate = dateFormat("YYYY mm-dd HH:MM:SS", new Date()); $("#mode.
javascript 和 jq 的调试 用console.log() 函数
...
09-17 9922
对于JavaScript程序的调试，相比于alert()，使用console.log()是一种更好的方式，原因在于：alert()函数会阻断JavaScript程序的执行，从而造成副作用；而console.log()仅在控制台中打印相关信息，因此不会造成类似的顾虑。 用法： 代码如下:window.console.log("Sample log"); 上述代码可以忽略window
jQuery.pdf中文版：全面解析jQuery使用与特效
"jQuery.pdf（中文版）是一份详细的jQuery使用指南，涵盖了jQuery的基本操作和特效制作，适合Web开发者学习和参考。" jQuery是JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。这份中文...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值