jQuery 初入门

最新推荐文章于 2024-05-06 00:06:17 发布

风吹我亦散

最新推荐文章于 2024-05-06 00:06:17 发布

阅读量202

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_45468845/article/details/106785063

版权

文章目录

简介
- 基础语法
jQuery选择器
jQuery事件
jQuery 效果
jQuery HTML
jQuery 遍历元素
jQuery - AJAX

其实在没有接触一件东西之前，总是感觉它很神秘，会感觉学习起来很困难，的确是如此。不只是感觉，是真的很困难。
虽然每一门编程语言都有相似的地方，c，java，scala，php，JavaScript，python，但是想要学好真的好难。

简介

jQuery 并不是一门新语言，它是一个 JavaScript 库。极大地简化了 JavaScript 编程。
它的语法也有自己的风格

jquery手册

通过jQuery，可以选取（查询，query）HTML元素，并对它们进行操作（actions）

jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。
在使用jquery之前，必须要对html和css，js有一定了解。

基础语法

$(selector).action()

选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作

例如：

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

$("p").hide() - 隐藏所有 <p> 元素

$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素

$("#test").hide() - 隐藏 id="test" 的元素

文档就绪事件：

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
如果在文档没有完全加载之前就运行函数，操作可能失败
上面的写法的简写为：

$(function(){
 
   // 开始写 jQuery 代码...
 
});

DOM对象与JQuery对象互转：
一个DOM对象：

var btn = document.getElementById("btn");

转化为jQuery对象：

$(btn).action();

jQuery转换为DOM对象：

$(btn)[0]

jQuery选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

元素选择器

根据元素名选择元素
如选择页面中所有

元素：

$("p")

看一个例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
	<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
	</script>
	<script>
		$(document).ready(function(){
			$("button").click(function(){
				$("p").hide();
				$("button").hide();
				$("h2").hide();
			});
		});
	</script>
</head>

<body>
	<h2>标题</h2>
	<p>段落1。</p>
	<p>段落2。</p>
	<button>点此隐藏</button>
</body>
</html>

#id 选择器

通过HTML元素的id属性选取指定的元素
和css一样，注意id 前面要加 # ，而且页面中元素的id 是唯一的。

$("#id")

.clsss选择器

通过HTML元素的 class属性选取指定的元素

$(".class")

更多实例

语法	描述
$("*")	选取所有元素
$(this)	选取当前 HTML 元素
$(“p.intro”)	选取 class 为 intro 的 `<p>` 元素
$(“p:first”)	选取第一个 `<p>` 元素
$(“ul li:first”)	选取第一个 `<ul>` 元素的第一个 `<li>` 元素
$(“ul li:first-child”)	选取每个 `<ul>` 元素的第一个 `<li>` 元素
$("[href]")	选取带有 href 属性的元素
$(“a[target=’_blank’]”)	选取所有 target 属性值等于 “_blank” 的 `<a>` 元素
$(“a[target!=’_blank’]”)	选取所有 target 属性值不等于 “_blank” 的 `<a>` 元素
$(":button")	选取所有 type=“button” 的 `<input>` 元素和 `<button>` 元素
$(“tr:even”)	选取偶数位置的 `<tr>` 元素
$(“tr:odd”)	选取奇数位置的 `<tr>` 元素

jQuery事件

jQuery 是为事件处理特别设计的。

什么是事件？
页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
如

在元素上移动鼠标。
选取单选按钮
-点击元素
常见DOM事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

jQuery 事件方法语法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
如页面中指定一个点击事件：

$("p").click();

下一步是定义什么时间触发事件。您可以通过一个事件函数实现：

$("p").click(function(){
    // 动作触发后执行的代码!!
});

常用jQuery事件方法

$(document).ready()

$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 语法章节中已经提到过

click()

click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。

$("p").click(function(){
  $(this).hide();
});

dblclick()

当双击元素时，会发生 dblclick 事件。
dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数，用法和click()类似

$("p").dblclick(function(){
  $(this).hide();
});

mouseenter()

当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：
和css 中的house不同，house是暂时的，而mouseenter是永久的

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
	</script>
	<script>
		$(document).ready(function(){
		  $("#p1").mouseenter(function(){
			alert('您的鼠标移到了 id="p1" 的元素上!');
		  });
		});
	</script>
</head>
<body>
	<p id="p1">鼠标指针进入此处，会看到弹窗。</p>
</body>
</html>

mouseleave()

当鼠标指针离开元素时，会发生 mouseleave 事件。
mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：

$("#p1").mouseleave(function(){
    alert("再见，您的鼠标离开了该段落。");
});

只有鼠标离开元素时才会触发该事件，如果鼠标根本没有触碰到元素，也就没有离开元素的事件。

mousedown()

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
和click() 事件类似
mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：

$("#p1").mousedown(function(){
    alert("鼠标在该段落上按下！");
});

mouseup()

当在元素上松开鼠标按钮时，会发生 mouseup 事件。
mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：

$("#p1").mouseup(function(){
    alert("鼠标在段落上松开。");
});

hover()

hover()方法用于模拟光标悬停事件。
mouseenter，mouseleave 的结合
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

$("#p1").hover(
    function(){
        alert("你进入了 p1!");
    },
    function(){
        alert("拜拜! 现在你离开了 p1!");
    }
);

focus()

当元素获得焦点时，发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：

$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});

blur()

当元素失去焦点时，发生 blur 事件。
blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：

$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});

jQuery 效果

方法	效果
hide()	隐藏元素
show()	显示元素
toggle()	切换hide() 和show() 方法
fadeIn()	元素淡入
fadeOut()	元素淡出
fadeToggle()	切换fadeIn()和fadeOut() 方法
fadeTo()	渐变
slideDown()	向下滑动元素
slideUp()	向上滑动元素
slideToggle()	切换slideDown() 和slideUp() 方法
animate()	创建自定义动画
stop()	停止动画
callback	在当前动画完成后执行

jQuery 中可以使用 . 来链接多个效果

jQuery HTML

前面说过:jQuery 并不是一门新语言，它是一个 JavaScript 库。极大地简化了 JavaScript 编程。
所以jQuery 拥有可操作 HTML 元素和属性的强大方法。

DOM

DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。

HTML DOM 定义了访问和操作 HTML 文档的标准方法。
DOM 以树结构表达 HTML 文档。
在这里插入图片描述

获得内容 -text(), html(), val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

使用text,html获取元素内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <script src="jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                document.getElementById("showtext").innerHTML = "Text: " + $("#test").text();
            }());
            $("#btn2").click(function(){
                document.getElementById("showhtml").innerHTML = "HTML: " + $("#test").html();
            }());
        });
    </script>
</head>

<body>
	<p id="test">这是段落中的 <b>粗体</b> 文本。</p>
	<button id="btn1">显示文本</button>
	<button id="btn2">显示 HTML</button>
	<p id="showtext"> </p>
	<p id="showhtml"> </p>
</body>
</html>

在这里插入图片描述

使用val 获取输入字段的值。

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            document.getElementById("show").innerHTML = $("#test").val();
        });
    });
</script>
</head>
<body>
    <p>名称: <input type="text" id="test" value="菜鸟教程"></p>
    <button>显示值</button>
	<p id="show"></p>
</body>
</html>

结果：
在这里插入图片描述

使用attr获取属性值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                document.getElementById("show").innerHTML = $("#baidu").attr("href");
            });
        });
    </script>
</head>

<body>
    <p><a href="https://www.baidu.com" id="baidu">百度</a></p>
    <button>显示 href 属性的值</button>
    <p id="show"></p>
</body>
</html>

在这里插入图片描述
attr 和 prop 的区别介绍：

对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。
对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。

设置内容

可以通过 text() , html(), val() 设置内容

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                $("#test1").text("旭哥好帅!");
            });
            $("#btn2").click(function(){
                $("#test2").html("<b>旭哥好帅!</b>");
            });
            $("#btn3").click(function(){
                $("#test3").val("旭哥好帅");
            });
        });
    </script>
</head>

<body>
    <p id="test1">Hello</p>
    <p id="test2">Hello</p>
    <p>输入框: <input type="text" id="test3" value="Hello"></p>
    <button id="btn1">text设置</button>
    <button id="btn2">html设置</button>
    <button id="btn3">val设置</button>
</body>
</html>

在这里插入图片描述

也可以通过attr设置属性

$("button").click(function(){
    $("#runoob").attr("href","http://www.runoob.com/jquery");
  });

增删元素

添加元素

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

上面的方法都可以同时添加多个元素

append/prepend 实在选择元素内部嵌入，

<p> prepend嵌入的内容  原本的文档  append嵌入的内容</p>

after/before是在元素外面追加

before 追加的内容 <p> 原本的文档 </p> after追加的内容

删除元素

删除元素和内容，可以使用以下两个方法

remove() 删除被选元素（及其子元素）
empty() 删除被选元素的子元素，但是不删除被选元素，即使被选元素为空

$("#div1").remove();     //删除id为dive1的元素
$("p").remove(".italic");//删除所有class为itable的元素

$("#div2").empty();//删除id为div2的元素的子元素

jQuery CSS

CSS类

jQuery 可以使用下面方法操作CSS

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

addClass()

向被选元素添加一个或多个类

<style type="text/css">
.important
{
	font-weight:bold;
	font-size:xx-large;
}
.blue
{
	color:blue;
}
</style>
.......
<script>
	$("button").click(function(){
	  $("h1,h2").addClass("blue");
	  $("div").addClass("important");
	  $("p").addClass("important blue");
	});
</script>
......

removeClass()

删除指定的 class 属性：

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

toggleClass()

该方法对被选元素进行添加/删除类的切换操作：

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

css() 方法

css() 方法设置或返回被选元素的一个或多个样式属性。

返回CSS属性的值

将返回首个匹配元素（p）的 background-color 值：

$("p").css("background-color");

设置CSS属性

为所有匹配元素设置 background-color 值：

$("p").css("background-color","yellow");

设置多个 CSS 属性

设置多个 CSS 属性，使用如下语法：
css({"propertyname":"value","propertyname":"value",...});

下面的例子将为所有匹配元素设置 background-color 和 font-size：

$("p").css({"background-color":"yellow","font-size":"200%"});

jQuery 尺寸

width() 设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth() 返回元素的宽度（包括内边距）。
innerHeight() 返回元素的高度（包括内边距）。
outerWidth() 返回元素的宽度（包括内边距和边框）。
outerHeight() 返回元素的高度（包括内边距和边框）。

jQuery 遍历元素

Query 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
在这里插入图片描述

<div> 元素是 <ul> 的父元素，同时是其中所有内容的祖先。
<ul> 元素是 <li> 元素的父元素，同时是 <div> 的子元素
左边的 <li> 元素是 <span> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
<span> 元素是 <li> 的子元素，同时是 <ul> 和 <div> 的后代。
两个 <li> 元素是同胞（拥有相同的父元素）。
右边的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
<b> 元素是右边的 <li> 的子元素，同时是 <ul> 和 <div> 的后代。

注意，遍历的结果返回的是元素

向上遍历 DOM 树(遍历祖先)

下面这些 jQuery 方法用于向上遍历 DOM 树：

parent()
parents()
parentsUntil()

jQuery parent() 方法

parent() 方法返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历。
下面的例子返回每个 <span> 元素的直接父元素：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
	.ancestors *
	{ 
		display: block;
		border: 2px solid lightgrey;
		color: lightgrey;
		padding: 5px;
		margin: 15px;
	}
	</style>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
	</script>
	<script>
	$(document).ready(function(){
	  $("span").parent().css({"color":"red","border":"2px solid red"});
	});
	</script>
</head>
<body>

	<div class="ancestors">
	  <div style="width:500px;">div (曾祖父元素)
	    <ul>ul (祖父元素)  
	      <li>li (父元素)
	        <span>span</span>
	      </li>
	    </ul>   
	  </div>
	
	  <div style="width:500px;">div (祖父元素)   
	    <p>p (父元素)
	        <span>span</span>
	      </p> 
	  </div>
	</div>

</body>
</html>

在这里插入图片描述

jQuery parents() 方法

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。

下面的例子返回所有 <span> 元素的所有祖先：

$(document).ready(function(){
  $("span").parents();
});

您也可以使用可选参数来过滤对祖先元素的搜索。

下面的例子返回所有元素的所有祖先，并且它是 <ul> 元素：

$(document).ready(function(){
  $("span").parents("ul");
});

jQuery parentsUntil() 方法

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

下面的例子返回介于与

元素之间的所有祖先元素：

$(document).ready(function(){
  $("span").parentsUntil("div");
});

向下遍历 DOM 树(遍历后代)

children()
find()

jQuery children() 方法

children() 方法返回被选元素的所有直接子元素。
该方法只会向下一级对 DOM 树进行遍历。

$(document).ready(function(){
  $("div").children();
});

在这里插入图片描述
可以使用可选参数来过滤对子元素的搜索。
下面的例子返回类名为 “1” 的所有 <p> 元素，并且它们是 <div> 的直接子元素：

$(document).ready(function(){
  $("div").children("p.1");
});

在这里插入图片描述

在 DOM 树中水平遍历(遍历同胞)

siblings()

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

$(document).ready(function(){
  $("h2").siblings();
  //$("h2").siblings("p");  返回h2同胞元素中所有的<p> 元素
});

next()

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

$(document).ready(function(){
  $("h2").next();
});

nextAll()

nextAll() 方法返回被选元素的所有跟随的同胞元素。
下面的例子返回 <h2> 的所有跟随的同胞元素：

$(document).ready(function(){
  $("h2").nextAll();
});

nextUntil()

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
下面的例子返回介于 <h2> 与 <h6> 元素之间的所有同胞元素：

$(document).ready(function(){
  $("h2").nextUntil("h6");
});

prev()， prevAll()， prevUntil()

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

jQuery - AJAX

方法手册

jQuery - AJAX load()

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

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

url: 必须待加载的URL，可以将选择器添加到URL参数。
如：$("#div1").load("test.txt #p1");将文件中id=“p1” 的元素的内容，加载到id=“div1” 的元素中。
data : 可选，与请求一同发送的查询字符串键值对集合
callback : 可选是 load() 方法完成后所执行的函数名称。

看下面这个例子，当点击按钮时，会加载文件中的内容，并将其设置到id=div1的元素中。

$(document).ready(function(){
	$("button").click(function(){
		$("#div1").load("test.txt");
	});
});

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("test.txt",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert("外部内容加载成功!");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
});

jQuery - AJAX get() 和 post() 方法

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

HTTP 请求：GET vs. POST

两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据

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

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

jQuery $.get() 方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据

$.get(URL,callback);

URL 请求的URL
callback 请求成功后执行的函数名

有这样一个php文件：
test.php

<?php
	echo '这是个从PHP文件中读取的数据。';
?>

可以使用get方法从中读取数据：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $.get("/try/test.php",function(data,status){
                    document.getElementById("show").innerHTML = "数据: " + data + "\n状态: " + status;
                });
            });
        });
    </script>
</head>
<body>
    <button>发送一个 HTTP GET 请求并获取返回结果</button>
    <P id="show"></P>
</body>
</html>

jQuery $.post() 方法

$.post() 方法通过 HTTP POST 请求向服务器提交数据。

$.post(URL,data,callback);

URL 希望请求的 URL。
data 连同请求发送的数据。
callback 请求成功后所执行的函数名。

下面的例子使用 $.post() 连同请求一起发送数据：

回调函数中。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $.post("test_post.php",{
                    name:"旭哥",
                    password:"旭哥好帅"
                },//这是传递的数据
                function(data,status){
                    alert("数据: \n" + data + "\n状态: " + status);
                });//请求成功后执行的函数，data 是被请求页面的内容，status是请求的状态
            });
        });
    </script>
</head>
<body>
    <button>发送一个 HTTP POST 请求页面并获取返回内容</button>
</body>
</html>

test_post.php文件：
php文件接受传过来的数据，并进行处理

<?php
    $name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
    $password = isset($_POST['password']) ? htmlspecialchars($_POST['password']) : '';
    echo '输入的用户名: ' . $name;
    echo "\n";
    echo '输入的密码: ' .$password;
?>

更多方法

风吹我亦散

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery 初入门

其实在没有接触一件东西之前，总是感觉它很神秘，会感觉学习起来很困难，的确是如此。不只是感觉，是真的很困难。虽然每一门编程语言都有相似的地方，c，java，scala，php，JavaScript，python，基础语法其实差别并不大。变量，函数，类...
复制链接

扫一扫