jQuery笔记

最新推荐文章于 2022-01-04 13:11:12 发布
最新推荐文章于 2022-01-04 13:11:12 发布
阅读量172 收藏
点赞数
分类专栏： 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhou_pp/article/details/82458609
版权

jQuery简介

 

jQuery库可以通过一行简单的标记被添加到网页中。

jQuery库是一个JavaScript函数库

Html元素选取

Html元素操作

CSS操作

Html事件函数

JavaScript特效和动画

HtmlDom遍历和修改

Ajax

Utilities

 

 

向页面添加jQuery库

jQuery库位于一个JavaScript文件中，其中包含了所有的jQuery函数

<head>

<script type=”text/javascript”  src=”jquery.js”</script>

</head>

在html5中不用添加type=”text/javascript”，因为javaScript 是html5以及现代所有的浏览器的默认脚本语言

实例 ：

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("p").hide();

});

});

</script>

</head>

 

<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button type="button">Click me</button>

</body>

</html>

 

 

 

安装下载

有两个版本可供选择：

  1. production version,实际网站中，已被精简和压缩
  2. Development version，用于测试和开发，未被压缩，是可读代码

另一种选择方法：（库的替代）

不自己的计算机上存放jQuery库，从Google或Microsoft加载CDN  jQuery核心文件

使用Google的CDN

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>

使用Microsoft大的CDN

<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>

jQuery语法：

$(selector).action()

  1. 美元符号定义jQuery()
  2. 选择符（selector）“查询“和”查找”html元素
  3. Jquery的action()执行对元素的操作

 

jQuery语法实例

$(this).hide()

隐藏当前的Html元素。

$(“#test”).hide()

隐藏id=”test“的元素

$(“p”).hide()

隐藏所有的<p>元素

$(“.test”).hide()

隐藏所有的class=”test”的元素

 

文档就绪函数

$(document).ready(function(){

});

为防止文档在完全加载（就绪）之前运行jQuery代码

 

jQuery效果

1.隐藏和显示

hide()、show()使用实例

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

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

  $("p").hide(1000);

  });

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

  $("p").show(1000);

  });

});

</script>

</head>

<body>

<button id="hide" type="button">隐藏</button>

<button id="show" type="button">展示</button>

<p>这是一个段落。</p>

<p>这是另一个段落。</p>

</body>

</html>

 

 

2.淡入淡出

fadeIn() ,用于淡入已隐藏的元素

fadeout()，用于淡出可见元素

fadeToggle()，在fadeIn()和fadeout()之间切换

fadeTo()，允许渐变 为给定的不透明度（值在0和1之间）

 

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("#div1").fadeIn();

    $("#div2").fadeIn("slow");

    $("#div3").fadeIn(3000);

  });

});

</script>

</head>

 

<body>

<p>演示带有不同参数的 fadeIn() 方法。</p>

<button>点击这里，使三个矩形淡入</button>

<br><br>

<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>

<br>

<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>

<br>

<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

</body>

</html>

 

 

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("#div1").fadeToggle();

    $("#div2").fadeToggle("slow");

    $("#div3").fadeToggle(3000);

  });

});

</script>

</head>

 

<body>

 

<p>演示带有不同参数的 fadeToggle() 方法。</p>

<button>点击这里，使三个矩形淡入淡出</button>

<br><br>

<div id="div1" style="width:80px;height:80px;background-color:red;"></div>

<br>

<div id="div2" style="width:80px;height:80px;background-color:green;"></div>

<br>

<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>

 

</body>

</html>

 

3.jQuery滑动

$(selector).slideDown(speed,callback);

可选的Speed参数规定效果时长，可以取“slow”、”fast”、毫秒

可选的callback参数是滑动完成后的所执行的函数名称。

slideDown() :向下滑动元素

slideUp()：向上滑动元素

slideToggle()：向上、向下的切换

 

 

 

 

动画

Animate()创建自定义动画

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js">

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("div").animate({left:'250px'},4000);   //距离左侧250px，移动时间4s

  });

});

</script>

</head>

 

<body>

<button>开始动画</button>

<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;">

</div>

 

</body>

</html>

 

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js">

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("div").animate({

      left:'250px',     //距离左侧250像素

      opacity:'0.5',    //透明度0.5

      height:'150px',  //高度

      width:'150px'    //宽度

    });

  });

});

</script>

</head>

 

<body>

 

<button>开始动画</button>

<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;">

</div>

 

</body>

</html>

 

jQuery停止动画

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

 

Callback函数

在当前动画100%完成之后执行的。

$(selector).hide(speed,callback)
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});

 

$(document).ready(function(){

  $("button").click(function(){

  $("p").hide(1000,function(){

    alert("The paragraph is now hidden");

    });

  });

});

Chaining方法

可以把动作/方法链接起来

Chaining允许我们在一条语句中允许多个jQuery方法（在相同的元素上）

$(document).ready(function()

  {

  $("button").click(function(){

    $("#p1").css("color","green")

      .slideUp(2000)     //注意前面有个.

      .slideDown(2000);

  });

});

 

JQuery HTML

jQuery获取

jQuery DOM操作

DOM=Document Object Model(文档对象模型)

获得内容-text（）、html()、val（）

Text() 设置或返回所选元素的文本内容

Html() 设置或返回所选元素的内容（包括HTML标记）

Val() 设置或返回表单字段的值（获取输入字段的值）

 

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

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

alert("Text: " + $("#test").text());

  });

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

    alert("HTML: " + $("#test").html());

  });

});

</script>

</head>

 

 

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    alert("Value: " + $("#test").val()+$("#passw").val());

  });

});

</script>

</head>

 

<body>

<p>姓名：<input type="text" id="test" value=" "></p>

<p>密码：<input type="password" id="passw" value=""></p>

<button>显示值</button>

</body>

 

</html>

 

获取属性-attr()

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    alert($("#w3s").attr("href"));

  });

});

</script>

</head>

 

<body>

<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>

<button>显示 href 值</button>

</body>

</html>

 

添加新的html内容

append() 在被选元素的结尾插入内容

prepend() 在被选元素的开头插入内容

after（） 在被选元素之后插入内容

before（）在被选元素之前插入内容

 

$(document).ready(function(){

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

    $("p").append(" <b>Appended text</b>.");//在文章的最后添加

  });

 

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

    $("ol").append("<li>Appended item</li>");//在罗列的条目里添加

  });

});

删除元素

remove()—删除被选元素（及其子元素）

empty() –从被选元素中删除子元素

$("#div1").remove();

$(document).ready(function(){

  $("button").click(function(){

    $("#div1").empty();

  });

});

 

获取并设置CSS类

  1. addclass() 向被选元素中添加一个或者多个类
  2. removeclass() 向被选元素中删除一个或者多个类
  3. toggleClass() 对被选元素进行添加/删除类的切换操作

4.css() 设置或返回样式属性。

 

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("h1,h2,p").addClass("blue");

    $("div").addClass("important");

  });

});

</script>

 

<style type="text/css">

.important

{

font-weight:bold;

font-size:xx-large;

}

.blue

{

color:blue;

}

</style>

zhou_pp
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery笔记
01-09
**jQuery简介** jQuery是一款高效、简洁且功能丰富的JavaScript库，由John Resig在2006年创建。它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务，使得JavaScript编程更加简单和直观。jQuery的核心理念是...
html5学习笔记——script标签的type属性的问题
memoriesaier的博客
07-13 3840
今天在看代码的时候，突然发现在引用js的时候script模块并没有标明type属性&lt;script src="js/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="js/demo.js"&gt;&lt;/script&gt;要知道，在html4的年代里，type是必不可少的&lt;script type='text/javascript' s
【js】window.jQuery || document.write(“＜script src=‘javascript/jquery-1.7.1.min.js‘＞“什么意思？
向着光芒的女孩
04-17 7573
<script type="text/javascript"> window.jQuery || document.write("<script src='javascript/jquery-1.7.1.min.js'>" + "<" + "/script>"); </script>也有这样的：<script type="text/javascript" src="//aja
javascript核心 八 ---使用jQuery的库 jquery-1.11.1.js
cherry 的专栏
09-26 1747
1. 词法结构 2.类型、值和变量 3.表达式和运算符 4.语句 5.对象 6.数组 7.函数 8.函数 9.类和模块 10.正则表达式的模式匹配 11.javascript的子集和扩展 12.服务器端的javascript
Front-end——jQuery入门及选择器介绍
weixin_42067873的博客
01-09 509
一、jQuery技术的介绍 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高
jquery 笔记 事件
10-28
写js已经有很久了，但是对js的详细了解还是很肤浅的，这几天在看jquery，在其中有一些新的发现和体会，记录下来
在线jquery.min.js引用
热门推荐
透明大脑
05-16 5万+
jQuery：  script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">script> script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js">script>
jsp中引用js的路劲的三种方式
xukangone的博客
11-07 1287
第一种 直接引用 这里的路劲为 <script type="text/javascript" src="js/jquery-3.0.0.min.js"></script> 注意：在jsp中使用js中的方式必须先对“jQuery-3.0.0.min.js”进行页面的引用，否则无效；因在js中使用$(document).ready()的时候依赖这个js文件。 第二...
纯TypeScript开发Web前端（二）如何引入JS库
飞翔的熊blabla
03-26 1497
背景 总所周知，TS需要编译成JS才能在浏览器上跑，TS也能够调用JS的方法。但是，有一个现成的第三方JS类库摆在面前，让它如何能在TS中使用，很多刚入坑的朋友往往不得其门而入。下面我就讲讲我的办法吧。 1、直接翻译 看了上面4个字，大家可能不会不约而同地眉头一皱，立刻开喷：“喔靠，馊主意！”。我承认，这的确是个笨办法，但是我的确这么做过。笨办法也是办法，重剑...
jquery插件写法
liudanyang_21的博客
07-03 74
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li> <a href="http://www.webo.com/liu.
【前端系列教程之jQuery】02_jQuery入门、设计思想理解
波哩个波的博客
01-04 673
jQuery入门 jQuery下载和引入 jQuery的下载 官网地址：jQuery 官方API：jQuery API Documentation jQuery API中文文档：jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm | jQu...
JQuery基础
aaqia的博客
07-19 61
使用 jQuery -> 函数 $ -> jQuery <script src="js/jquery-1.11.0.min.js"></script> <script> $(function () { $("#div1").text("新的内容"); }) </script> <body> <div id="div1">div1</div> <div id=...
一、jQuery小程序之jQuery效果 显示和隐藏 fading方法 滑动方法 animate()动画方法 chaining
weixin_40512519的博客
08-08 851
 隐藏和显示： &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.mi
HTML之jQuery自学笔记（四）
小源丶同学的博客
03-15 160
jQuery 动画jQuery-animate（）方法jQuery animate（）方法用于创建自定义动画语法：$(selector).animate({params},speed,callback)必须的params参数定义形成动画的CSS属性。可选的speed参数规定效果的时长。他可以取："slow"、"fast"或毫秒。可选的callback参数是动画完成后所执行的函数名称。实例：&lt;...
springboot注解说明+项目application.yml的配置+mybatis的使用
zhou_pp的博客
04-29 2万+
@Controller与@RestController的区别 一．知识点：@RestController注解相当于@ResponseBody ＋ @Controller合在一起的作用 1. // 一般用于接口 或 前后端分离 1.如果只是使用@RestController注解Controller，则Controller中的方法无法返回jsp，html页面，配置的视图解析器 Inte...
Maven基本属性
zhou_pp的博客
09-06 211
Pom文件：project object model 项目对象模型，使用xml格式进行声明项目资源（依赖项） 依赖关系是在项目中用到JAR文件，pom.xml包含对资源的引用，位于根目录。 最小的POM文件： &lt;project xmlns="http://maven.apache.org/POM/4.0.0"          xmlns:xsi="http://www.w3.org...
JQuery笔记：选择器、属性操作、事件处理和DOM操作详解
Jquery笔记 Jquery是JavaScript库，用于简化HTML、CSS和JavaScript之间的交互。下面是Jquery笔记的详细知识点。 一、选择器 * 并且选择器：使用逗号分隔多个选择器，选择所有匹配的元素。 * 父子选择器：使用大于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值