JQuery学习笔记

最新推荐文章于 2024-09-21 09:30:15 发布
最新推荐文章于 2024-09-21 09:30:15 发布
阅读量527 收藏
点赞数
分类专栏： Java Script笔记 文章标签： jquery JavaScript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sumsear/article/details/54728651
版权
 一、简介：

Jquery是一个java script库，其作用主要是：

1.操作和选取html元素

2.操作呢CSS

3.Html事件函数

4.Java script 特效、动画

5.Html DOM遍历和修改

6.AJAX

7.Utilities

 

二、 JQuery语法

2.1语法示例

$(this).hide();   隐藏当前元素

$(“p”).hide();   隐藏<p>元素

$(“#test”).hide(); 隐藏id为test的元素

$(“.test”).hide(); 隐藏类名为test的元素

2.2 基础语法

$(selector).action();

美元符号 $ 定义JQuery

Selector指被‘选择’或‘查询’的html元素

Action()执行对元素的操作

提示：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。

2.3文档就绪函数

$(document).ready(function(){

<!--执行的操作-->

}); 

注意：之所以使用ready();是为了防止在文档尚未准备就绪的某些元素还没加载或为完全加载的情况下就操作元素，导致操作失败。

 

三、 JQuery选择器

JQuery元素选择器和属性选择器允许通过标签名、属性名和元素内容对元素进行操作，允许对元素组或单个元素进行操作，在HTML的DOM术语中允许对HTML DOM元素组或DOM的单个节点进行操作。

3.1   元素选择器

$(“p”).hide();   选取<p>元素

$(“p#test”).hide(); 选取id = test的<p>元素

$(“p.test”).hide(); 选取class = test的<p>元素

3.2   属性选择器

$(“[href]”)         选取带有href属性的元素

$(“[href=’#’]”) 选取href值等于 # 的元素

$(“[href!=’#’]”) 选取href值不等于 # 的元素

$(“[href$=’.jpg’]”) 选取href值以.jpg结尾的元素

3.3   CSS选择器

用于改变html CSS的属性

$(“p”).CSS(“background-color”,” red”);  将所有<p>元素的背景颜色改为红色

 

 

四、 JQuery事件：

jQuery 事件处理方法是 jQuery 中的核心函数。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。通常会把 jQuery 代码放到<head>部分的事件处理方法中：

示例：

<script>

$(“p”).on(“click”,function(){//当点击<p>元素时触发click()函数，会调用hide()方法

$(this).hide();

});

</script>

注意：在JQuery中使用$会与其他java script库冲突，例如：prototype

JQuery使用名为noConflict()方法来解决该问题。

var jq =jQuery.noConflict(); 这样就可以用jq代替$符号了。

 

五、 JQuery效果：

5.1   jQuery隐藏

示例：

<script>

$(document).ready(function(){

$(“.hide”).click(function(){//点击class = hide的button时隐藏当前button的父容器

$(this).parents(“.ex”).hide(slow);

});

});

<body>

<div class=”ex”>

<button class=”hide”>

<p>联系人：张先生<br/>

北三环中路 100 号<br />

北京</p>

</div>

<div class=”ex”>

<button class=”hide”>

<p>联系人：张先生<br/>

北三环中路 100 号<br />

北京</p>

</div>

</body>

5.2   jQuery     显示

示例：

<script>

$(“p”).show();

</script>

5.3   jQuery toggle 显示&隐藏切换

toggle()方法可以显示已隐藏的指定元素，并且将显示的元素隐藏.

示例：

<script>

$(“p”).toggle();//将已隐藏的<p>元素显示，并将显示的<p>元素隐藏。

</script>

5.4   jQuery     淡入浅出

Speed可以设置”slow”、”fast”以及毫秒数。

fadeIn(speed,callback);

fadeOut(speed,callback);

fadeToggle(speed,callback);//在fadeIn()与fadeOut()之间切换

fadeTo(speed,opacity,callback);//可以设置速度和透明度


示例：

<script>

$(“p”).fadeIn(“slow”);

</script>

5.5   jQuery     滑动

Speed可以设置”slow”、”fast”以及毫秒数。

slideDown(speed,callback);//将隐藏的元素以下拉的形式展现

slideUp(speed,callback);//将显示的元素以上推得形式隐藏

slideToggle(speed,callback);//在slideDown()与slideUp()之间切换

 

5.6   jQuery     动画

animate();

示例：

<script>

$(“#test”).click(function(){

$(this).animate({ left:'250px',height:'+=150px',width:'+=150px'//使用相对值只用在值前面添加+=号。，也可以使用预定义值show，hide，toggle。

});

});

</script>


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

 

示例：(使用队列功能)

<script>

$(“#test”).click(function(){

var div = $(“#test”);

//动画将会按照队列顺序逐步完成

div.animate({left:”100px”});

div.animate({top:”100px”});

div.animate({left:”0px”});

div.animate({top:”100px”});

});

</script>

 

5.7   jQuery     停止动画

stop()用于在动画或效果完成前对他们进行停止

示例：

<script>

$(“#test”).stop();

</script>

5.8   jQuery     callback函数

Callback函数可以用于在动画效果完成后再执行的方法

示例：

//在执行隐藏操作后再执行下一个方法

<script>

$(“#test”).hide(“slow” , function(){

<!--要执行的操作-->

});

</script>

六、 JQuery DOM 操作------获得内容和属性：

DOM  =  Document Object  Model

6.1   jQuery 的.text()  .html()  .val()

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

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

.val() 设置或返回表单字段的值

示例：

<script>

$(“#btn01”).click(function(){

alert(“test”+$(“#test”).text(););

});

$(“#btn02”).click(function(){

alert(“test”+$(“#test”).html(););

});

$(“#btn03”).click(function(){

alert(“test”+$(“#test”).val(););

});

 

</script>

<body>

<p>这是元素内的<em>文本</em>内容</p>

<button btn=”btn01”>测试text()</button>//显示结果：这是元素内的文本内容

<button id=”btn02”>测试html()</button>//显示结果：这是元素内的<em>文本</em>内容

<form method=”post” action=”test.asp”>

<label for=”#test”>输入文本</label>

<input type=”text” name=”test”>

<button id=”btn03”>获得输入框内容</button>

</label>

</form>

</body>


6.2   jQuery 获取属性.attr()

.attr() 获取元素中选定属性的值

示例：

<script>

$(“#btn”).click(function(){

$(“#yhcloud”).attr(“href”);

}

);

</script>

<body>

<button id=”btn”>测试attr()</button>

<a href=”www.yihuacomputer.com” id=”yhcloud”>yihuacomputer.com</a>

</body>

6.3   jQuery 设置属性.text()  .html()  .val() .attr()

示例：.attr设置多个属性{“href” : ”....”, “id” : ”....”}

<script>

$(“#btn04”).click(function(){

$(“#yhcloud”).attr(“href”,”http://www.baidu.com”);//将href值设置为http://www.baidu.com

}

);

$(“#btn01”).click(function(){

$(“#test”).text(“测试text()设置”);

});

$(“#btn02”).click(function(){

$(“#test”).html(“<p>测试html()设置</p>”);

});

$(“#btn03”).click(function(){

$(“#test”).val(“测试val()设置”);

});

 

</script>

<body>

<p>这是元素内的<em>文本</em>内容</p>

<button btn=”btn01”>测试text()</button>

<button id=”btn02”>设置html()</button>

<form method=”post”action=”test.asp”>

<label for=”#test”>输入文本</label>

<input type=”text” name=”test”>

<button id=”btn03”>设置输入框内容</button>

</label>

</form>

<button id=”btn04”>测试attr()</button>

<a href=”www.yihuacomputer.com” id=”yhcloud”>yihuacomputer.com</a>

</body>

6.3   jQuery .text()  .html() .val()       .attr()的回调函数

.attr() 获取元素中选定属性的值回调函数。回调函数由两个参数：被选元素列表中        当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符    串。

 

示例：

<script>

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

 $("#test1").text(function(i,origText){

    return "Old text:" + origText + " New text: Hello world!

    (index: " + i +")";

  });

});

 

 

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

 $("#test2").html(function(i,origText){

    return "Old html:" + origText + " New html: Hello <b>world!</b>

    (index: " + i +")";

  });

});

 

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

 $("#w3s").attr("href", function(i,origValue){

    return origValue +"/jquery";

  });

});

</script>


 

七、 JQuery添加：

7.1   jQuery添加新内容的四个 jQuery 方法：

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

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

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

示例：

<script>

$("p").append("Some appended text.");

</script>

八、 JQuery删除：

8.1   jQuery添加新内容的两个 jQuery 方法：

remove() - 删除被选元素（及其子元素）jQueryremove() 方法也可接受一个参数，允许您对被删元素进行过滤。该参数可以是任何jQuery 选择器的语法。

示例：

<script>

$("p").remove();//不带参

$("p").remove(".italic");//带参

</script>


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

示例：

<script>

$("p").empty();

</script>

九、 JQuery添加并设置CSS：

9.1   jQuery添加并设置CSS jQuery 方法：

addClass() - 向被选元素添加一个或多个类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

css() - 设置或返回样式属性

 

示例：

<style>

.important{font-weight : bold ; font-size : xx-large ;}

.blue{color : blue ;}

</style>

<script>

$(“p,h1,h2”).addClass(“blue important”);//向选定元素中添加blue类和  important类

$("p").css("background-color");//返回首个匹配的<p>元素的background-color值

$("p").css("background-color","red");//设置所有<p>元素的background-color值

$("p").css({background-color:"red",Font-size:"12px"});//批量设置所有<p>元素         的CSS

</script>

十、 JQuery添加并设置CSS：

 10.1        jQuery添加并设置CSS jQuery 方法：

width()     方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height()   方法设置或返回元素的高度（不包括内边距、边框或外边距）。

示例：

//设置指定的 <div> 元素的宽度和高度：

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

 $("#div1").width(500).height(500);

});

innerWidth()   方法返回元素的宽度（包括内边距）。

innerHeight()  方法返回元素的高度（包括内边距）。

outerWidth()  方法返回元素的宽度（包括内边距和边框），如果括号内的值       为true，则返回元素的宽度（包括内边距，边框和外边距）。

outerHeight() 方法返回元素的高度（包括内边距和边框），如果括号内的值       为true，则返回元素的宽度（包括内边距，边框和外边距）。

 

十一、 JQuery遍历：

11.1          parent()     返回选定元素的直接父类

示例：

$(document).ready(function(){

 $("span").parent();

});

11.2          parents()    返回选定元素的所有父类

示例：

$(document).ready(function(){

$("span").parents();

$("span").parents(“ul”);//返回选定元素的所有是<ul>的父类元素

});

11.3          parentsUtil()返回介于给定的两个元素之间的所有父类

示例：

$(document).ready(function(){

 $("span").parentsUtil(“div”);

});

11.4          child()返回给定的元素的所有直接子类

示例：

$(document).ready(function(){

  $("div").child();

  $("div").child(“p.1”);//返回<div>下类名为1且类型是<p>的直接子元素

});

11.5          find()返回给定的元素的所有直接子类

示例：

$(document).ready(function(){

$("div").find(“span”);//返回<div>下所有的<span>元素

$("div").find("*");//返回<div>下所有的子元素

 });

siblings()         方法返回被选元素的所有同胞元素。

next()               方法返回被选元素的下一个同胞元素。

nextAll()          方法返回被选元素的所有跟随的同胞元素。

nextUntil()        返回介于两个给定参数之间的所有跟随的同胞元素。

prev()

prevAll()

prevUntil()

注意：prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

 

十二、 JQuery遍历：

12.1          三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元             素中的位置来选择一个特定的元素。其他过滤方法，比如 filter() 和 not() 允                       许您选取匹配或不匹配某项指定标准的元素。

 

示例：

$(document).ready(function(){

 $("div.p").first();//选取<div>里面的第一个<p>元素

 $("div.p").last();//选取<div>里面的最后一个<p>元素

  $(“p”).eq(1);//选取索引从0-1的<p>元素

});

十三、 JQuery AJAX：

13.1          load() 方法---从服务器加载数据，并把返回的数据放入被选元素中。

语法：

$(selector).load(url , data,callback);

responseTxt - 包含调用成功时的结果内容

statusTXT - 包含调用的状态

xhr - 包含XMLHttpRequest 对象

示例：

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

 $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){

   if(statusTxt=="success")

      alert("外部内容加载成功！");

   if(statusTxt=="error")

      alert("Error:"+xhr.status+": "+xhr.statusText);

  });

});


解析：点击button时调用load()方法向id = div1的元素中导入demo_test.txt中的文本,，导入结束或者失败后执行回调函数，如果成功，则弹出内容为“外部内容加载成功！”的对话框，如果失败则弹出内容为Error: "+xhr.status+": "+xhr.statusText的对话框

 

十四、 JQuery  Get/Post

GET - 从指定的资源请求数据

POST - 向指定的资源提交要处理的数据

 

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

 

14.1          $.get() 方法

语法：

$.get(URL,callback);

示例：

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

 $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){

   if(statusTxt=="success")

      alert("外部内容加载成功！");

   if(statusTxt=="error")

      alert("Error:"+xhr.status+": "+xhr.statusText);

  });

});

14.2          $.Post()方法

语法：

$.post(URL , data , callback);

示例：

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

 $.post("demo_test_post.asp",

  {

    name:"DonaldDuck",

    city:"Duckburg"

  },

  function(data,status){

    alert("Data: " +data + "\nStatus: " + status);

  });

});


XuZhenhao0609
关注
专栏目录
jQuery常用方法汇总
h13783313210的博客
04-06 1万+
常用方法索引：1.JQuery自执行函数（三种）2.text()    html()    val()3.css()4.get()        非ajax用法5.parent()    children()    parents()    find()6.eq()    siblings()    index()7.height()    width()8.addClass()    remov...
html点击显示隐藏判断,jquery判断元素是否隐藏的多种方法
weixin_28871645的博客
06-03 801
第一种：使用CSS属性var display =$('#id').css('display');if(display == 'none'){alert("被你发现了，我是隐藏的啦！");}第二种：使用jquery内置选择器假设我们页面有这么个标签,仅仅是测试所用那么,我们可以用以下语句来判断id为"test"的标签是否隐藏:if($("#test").is(":hidden")){...} //前...
jQuery学习笔记
深思纵似丁香结，一展芭蕉寸凡心。
01-20 1092
jQuery学习笔记 JQuery入门-笔记部分 jQuery概述 jQuery是js库 库：相当于java的工具类，库是存放东西的，jQuery是存放js代码的地方，放的是用js代码写的函数 jquery是为了简化js的操作 jquery的安装 <script src="js/jquery-3.4.1.js" type="text/javascript"></script> 需要（在前面）引入jquery的核心js文件，不然会报错（$未定义）! jquery核心 $ 符号在j
jQuery——jQuery学习笔记(完整版）
Bonsoir777的博客
09-16 1336
本文主要介绍有关jQuery的相关知识点
jQuery 学习笔记
Dshuai7191的博客
08-26 362
演示通过 animate() 方法预定义 "hide", "show", "toggle" 值。演示更多 jQuery animate() 方法实例 (多个 animate() 回调).jQuery toggle() 用于切换 hide() 和 show() 方法。使用jQuery text() 和 html() 方法获取内容。演示 jQuery focus() 和 blur() 事件。演示jQuery hide() 和 show() 方法。演示简单的 jQuery animate() 方法。...
jquery学习笔记
05-16
《jQuery学习笔记详解》 jQuery，作为一款广泛应用于Web开发的JavaScript库，以其简洁的API、强大的功能和广泛的社区支持，极大地简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。这篇学习笔记将深入探讨...
jQuery学习笔记（一）
07-13
**jQuery学习笔记（一）** 在深入探讨jQuery之前，我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...
Jquery学习笔记分享
11-24
**jQuery学习笔记分享** 在Web开发中，jQuery是一个非常重要的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章：...
MFC获取网页的html文本
bcbobo21cn的专栏
09-19 201
MFC CHttpFile类提供请求和读取 HTTP 服务器上文件的功能；
HTML粉色烟花秀
兔子王
09-21 1042
HTML语言实现的粉红色跨年烟花秀的完整代码。
【HTML样式】加载动画专题 每周更新
m0_73918768的博客
09-20 714
方块移动加载动画 电子风变脸 正方体组合 跳跃式加载动画 下一篇文章应该是Linux安装Java和Maven的脚本 如果想看的可以点个关注~
HTML-DOM模型
最新发布
My_story_begins的博客
09-21 692
如何使用前端调试
在Python中快速获取HTML中＜span＞标签的内容
在那一刻，我们或许会发现自己站在了时间的另一岸，以更加成熟和宽广的胸怀，去拥抱那份隔代相传的深情。
09-18 297
是一个非常强大的库，它支持多种查找和筛选HTML元素的方法，可以满足你处理HTML数据的各种需求。这样的库，它提供了方便的方法来解析HTML和XML文件，并从中提取数据。参数用于去除文本内容前后可能存在的空白字符（如空格、换行符等）。在Python中，要获取HTML中。这样，你就可以轻松地获取HTML中。然后，你可以使用以下代码来提取。标签的内容，通常我们会使用像。方法获取它们的文本内容。首先，确保你已经安装了。标签内容的简单示例。方法被用来找到所有的。
html详细知识
lizhiwei21的博客
09-18 1192
table>行：tr列：td表头：自动加粗和居中th,表示列</table>table标签单独存在没有意义，必须借助于子标签tr td th名称作用border表格边框width表格的宽度height表格的高度单元格边沿与其内容之间的空白单元格之间的空白表格的背景颜色名称作用align单元格内容的水平对齐方式,取值：left 左 、right 右、center 居中名称作用colspan单元格可横跨的列数(横向合并单元格) columnrowspan。
html，css基础知识点笔记（二）
Zwwxd666的博客
09-18 896
本文主要教列表的样式设计。
Jquery学习笔记分享：优势应用及选择器详解
在这里，我们将分享一些 Jquery 学习笔记，希望能够帮助广大开发者更好地掌握和运用 JQuery。 在第一章中，我们首先了解了 JQuery 的概述。JQuery 的基本作用主要是简化 JavaScript 编程，提高开发效率，减少代码量...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值