jQuery基础

最新推荐文章于 2022-11-15 10:08:40 发布

Alan_Redsheep

最新推荐文章于 2022-11-15 10:08:40 发布

阅读量282

点赞数

分类专栏：前端文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_38055979/article/details/87018310

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

jQuery

jQuery简介

一个轻量级的JavaScript代码库，具有快速、简洁的特点。

封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

核心特性
1. 具有独特的链式语法和短小清晰的多功能接口；
2. 具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；
3. 拥有便捷的插件扩展机制和丰富的插件。
版本支持

jQuery 2版本以上是不支持 IE6，7，8 浏览器

<!--[if lt IE 9]> 
    <script src="jquery-1.9.0.js"></script> 
<![endif]--> 
<!--[if gte IE 9]><!--> 
    <script src="jquery-2.0.0.js"></script> 
<!--<![endif]-->

jQuery安装

从 jquery.com 下载 jQuery 库，将下载的文件放在网页的同一目录下，就可以使用jQuery。

有两个版本的 jQuery 可供下载：

Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）

jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的标签引用它：

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

从 CDN 中载入 jQuery

可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。

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

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

也可以使用国内的CDN，如百度、又拍云、新浪

<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
</head>

<head>
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
</script>
</head>

<head>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>
</head>

jQuery语法

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

基础语法**$(selector).action()**

jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。
action() 执行对元素的操作

$(this).hide()	隐藏当前元素
$(“p”).hide()	隐藏所有段落
$(“p .test”).hide()	隐藏所有 class=“test” 的段落
$("#test").hide()	隐藏所有 id=“test” 的元素

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

 $(document).ready(function(){

   // 开始写 jQuery 代码...

 }); 
//也可以使用以下写法
 $(function(){

   // 开始写 jQuery 代码...

 });

jQuery选择器

基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

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

元素选择器

$(document).ready(function(){ 
 $("button").click(function(){ 
   $("p").hide(); 
 }); 
});

#id选择器

$(document).ready(function(){ 
 $("button").click(function(){ 
   $("#test").hide(); 
 }); 
});

.class选择器

$(document).ready(function(){ 
 $("button").click(function(){ 
    $(".test").hide(); 
 }); 
});

CSS选择器

$("p").css("background-color","red");
//改变 HTML 元素的 CSS 属性

实例

$(“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 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

常见 DOM 事件：

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

常用的jQuery事件

方法	触发条件
$(document).ready()	文档加载完毕
click()	鼠标单击元素
dblclick()	鼠标双击元素
mouseenter()	鼠标指针穿过元素
mouseleave()	鼠标指针离开元素
mousedown()	鼠标指针移动到元素上方，并按下鼠标按键
mouseup()	在元素上松开鼠标按钮
hover()	模拟光标悬停事件
focus()	元素获得焦点（通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点）
blur()	元素失去焦点

$("#p1").hover(function(){ 
  alert("You entered p1!"); 
  }, 
  function(){ 
  alert("Bye! You now leave p1!"); 
});
//当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

比较keypress、keydown与keyup
- keydown：在键盘上按下某键时发生，一直按着则会不断触发（opera浏览器除外），它返回的是键盘代码;
- keypress：在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符，所以监听无效，换句话说，只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
- keyup：用户松开某一个按键时触发，与keydown相对，返回键盘代码.

jQuery DOM操作

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

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});

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

$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

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

$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});

获取属性

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

设置内容

$("#btn1").click(function(){ 
  $("#test1").text("Hello world!"); 
}); 
$("#btn2").click(function(){ 
  $("#test2").html("<b>Hello world!</b>"); 
}); 
$("#btn3").click(function(){ 
  $("#test3").val("Dolly Duck"); 
});

上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的 text() 和 html()：

$("#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","//www.w3cschool.cn/jquery"); 
});
//允许设置多个属性值
$("button").click(function(){ 
  $("#w3s").attr({ 
    "href" : "//www.w3cschool.cn/jquery", 
    "title" : "jQuery 教程" 
  }); 
});

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

下面的例子演示带有回调函数的 attr() 方法：

$("button").click(function(){ 
  $("#w3cschool").attr("href", function(i,origValue){ 
    return origValue + "/jquery";  
  }); 
});

添加元素
- append() 方法在被选元素的结尾插入内容。

$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append(" <b>追加文本</b>。");
  });

  $("#btn2").click(function(){
    $("ol").append("<li>追加列表项</li>");
  });
});

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

$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").prepend("<b>在开头追加文本</b>。 ");
  });
  $("#btn2").click(function(){
    $("ol").prepend("<li>在开头添加列表项</li>");
  });
});

- 添加若干元素

function appendText() 
{ 
var txt1="<p>Text.</p>";               // 使用 HTML 标签创建文本  
var txt2=$("<p></p>").text("Text.");   // 使用 jQuery 创建文本 
var txt3=document.createElement("p");   
txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM 
$("p").append(txt1,txt2,txt3);         // 追加新元素 
}

- after() 方法在被选元素之后插入内容。
- before() 方法在被选元素之前插入内容。

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("img").before("<b>之前</b>");
  });

  $("#btn2").click(function(){
    $("img").after("<i>之后</i>");
  });
});

删除元素
- remove() 方法删除被选元素及其子元素。

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").remove();
    $("p").remove(".italic");
      //允许对要删除的元素进行过滤
  });
});

- empty() 方法删除被选元素的子元素

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").empty();
      //只删除子元素
  });
});

jQuery CSS操作

添加class属性，addClass()方法

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important blue");
    //添加多个类
});

删除class属性，removeClass()方法

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

添加/删除class属性，toggleClass()方法

$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").toggleClass("blue");
      //已经有blue属性则删除，没有则添加
  });
});

- 语法：$(selector).toggleClass(classname,function(index,currentclass),switch)

参数	描述
classname	必需。规定添加或移除的一个或多个类名。如需规定若干个类，请使用空格分隔类名。
function(index,currentclass)	可选。规定返回需要添加/删除的一个或多个类名的函数。index - 返回集合中元素的 index 位置。currentclass - 返回被选元素的当前类名。
switch	可选。布尔值，规定是否仅仅添加（true）或移除（false）类。

获取CSS属性

<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("背景颜色 = " + $("p").css("background-color"));
  });
});
</script>
<body>
<h2>这是一个标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<button>返回 p 元素的 background-color </button>
</body>

修改CSS属性

$("p").css("background-color","yellow");
//设置多个属性
$("p").css({"background-color":"yellow","font-size":"200%"});

jQuery Size操作

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

jQuery 效果

隐藏和显示
- hide()，隐藏
- show()，显示

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

$("#show").click(function(){ 
  $("p").show(); 
});
//语法：
$(selector).hide(speed,callback);  //speed 参数单位毫秒，规定隐藏/显示的速度         
$(selector).show(speed,callback);  //callback 参数是隐藏或显示完成后所执行的函数名称。

//使用 toggle() 方法来切换 hide() 和 show() 方法
$("button").click(function(){ 
  $("p").toggle(); 
});

//语法
$(selector).toggle(speed,callback);

淡入淡出
- fadeIn()，淡入
- fadeOut()，淡出
- fadeToggle()，切换淡入淡出
- fadeTo()，给与一定的不透明度

$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);
//speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒
//opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

滑动
- slideDown()，向下滑动
- slideUp()，向上滑动
- slideToggle()，切换滑动

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

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});

动画
- 创建自定义动画，animate()

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'250px'});
  });
});
//默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
//如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
}); 
//同时操作多个属性

//当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，如使用 paddingLeft 而不是 padding-left

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
}); 
//定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
}); 
//可以把属性的动画值设置为 "show"、"hide" 或 "toggle"

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
}); 
//编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列，然后逐一运行这些 animate 调用

- 停止动画，stop()
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

$(selector).stop(stopAll,goToEnd);
//stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
//goToEnd 参数规定是否立即完成当前动画。默认是 false。

jQuery Callback

由于 JavaScript 语句（指令）是逐一执行的 - 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。

为了避免这个情况，您可以以参数的形式添加 Callback 函数。

$("button").click(function(){
  $("p").hide("slow",function(){
    alert("The paragraph is now hidden");
  });
});
//在隐藏效果完全实现后回调函数

jQuery Chaining

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

$("#p1").css("color","red").slideUp(2000).slideDown(2000);
//把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动

jQuery遍历

jQuery 提供了多种遍历 DOM的方法。

遍历方法中最大的种类是树遍历（tree-traversal）

1549881537029

向上遍历

$(document).ready(function(){
  $("span").parent();//返回每个 <span> 元素的的直接父元素
  $("span").parents();//返回所有 <span> 元素的所有祖先
  $("span").parents("ul");  //返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素
  $("span").parentsUntil("div");//返回介于 <span> 与 <div> 元素之间的所有祖先元素
});

向下遍历

$(document).ready(function(){
  $("div").children();//返回每个 <div> 元素的所有直接子元素
  $("div").children("p.1");//返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素
  $("div").find("span");//返回属于 <div> 后代的所有 <span> 元素
});

水平遍历

$(document).ready(function(){
    $("h2").siblings();//返回 <h2> 的所有同胞元素
    $("h2").next();//返回 <h2> 的下一个同胞元素
    $("h2").nextAll();//返回 <h2> 的所有之后的同胞元素
    $("h2").nextUntil("h6")//返回介于 <h2> 与 <h6> 元素之间的所有同胞元素
    $("h2").prev();//返回 <h2> 的上一个同胞元素
    $("h2").prevAll();//返回 <h2> 的所有之前的同胞元素
    $("h6").prevUntil("h2")//返回介于 <h2> 与 <h6> 元素之间的所有同胞元素
});

过滤遍历

$(document).ready(function(){
    $("div p").first();
    $("div p").last();
    $("p").eq(1);//返回被选元素中带有指定索引号的元素，索引号从0开始
    $("p").filter(".intro");//返回带有类名 "intro" 的所有 <p> 元素
    $("p").not(".intro");//返回不带有类名 "intro" 的所有 <p> 元素
});

jQuery Ajax

jQuery 提供多个与 AJAX 有关的方法。

通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。

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

$(selector).load(URL,data,callback); 
//必需的 URL 参数规定您希望加载的 URL。
//可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
//可选的 callback 参数是 load() 方法完成后所执行的函数名称。

$("#div1").load("demo_test.txt");

//可以把 jQuery 选择器添加到 URL 参数
$("#div1").load("demo_test.txt #p1");
//把id="p1" 的元素的内容，加载到指定的 <div> 元素中

//回调函数可以设置不同的参数：
$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("External content loaded successfully!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});
//responseTxt - 包含调用成功时的结果内容
//statusTXT - 包含调用的状态
//xhr - 包含 XMLHttpRequest 对象

//在jQuery的load()方法中，无论AJAX请求是否成功，一旦请求完成（complete）后，回调函数（callback）立即被触发。

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

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

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

$.get(URL,callback);
//必需的 URL 参数规定您希望请求的 URL。
//可选的 callback 参数是请求成功后所执行的函数名。

$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
  });
});
//第一个回调参数data存有被请求页面的内容，第二个回调参数status存有请求的状态。

$.post(URL,data,callback); 
//必需的 URL 参数规定您希望请求的 URL。
//可选的 data 参数规定连同请求发送的数据。
//可选的 callback 参数是请求成功后所执行的函数名。

$("button").click(function(){
  $.post("demo_test_post.html",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "nStatus: " + status);
  });
});
//第一个参数是我们希望请求的 URL ("demo_test_post.php")。
//然后我们连同请求（name 和 city）一起发送数据。

“demo_test_post.php” 中的 PHP 脚本读取这些参数，对它们进行处理，然后返回结果。

 <?php
 $name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
 $city = isset($_POST['city']) ? htmlspecialchars($_POST['city']) : '';
 echo 'Dear ' . $name;
 echo 'Hope you live well in ' . $city;
 ?>

Alan_Redsheep

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础

jQueryjQuery简介一个轻量级的JavaScript代码库，具有快速、简洁的特点。封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。核心特性具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。...
复制链接

扫一扫

专栏目录