第七天 JQuery基础教程

最新推荐文章于 2024-08-09 02:16:38 发布

风沐流萤

最新推荐文章于 2024-08-09 02:16:38 发布

阅读量464

点赞数

分类专栏：前端文章标签： jquery javascript html

本文链接：https://blog.csdn.net/pythonerxxs/article/details/78337533

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JQuery是一个Javascript的框架，它封装了JavaScript常用的功能代码，能让你的代码更加简洁高效。
点击这里下载JQuery3.2.1和参考手册，提取码：SCcO
下载后放到你的项目中，然后在其他html文件中加入

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

就可以使用JQuery了。

JQuery 选择器

选择器主要用来选取文档中的元素。使用$()的方式比写document.getElementById()更加简洁。

元素选择器
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
属性选择器
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 “#” 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 “#” 的元素。
$("[href$='.jpg']") 选取所有 href 值以 “.jpg” 结尾的元素。
id选择器
$("#lastname") 选取id="lastname" 的元素
类选择器：
$(".intro") 所有class="intro" 的元素
$(".intro.demo") 所有 class="intro" 且 class="demo" 的元素
伪类选择器
$("p:first") 第一个<p> 元素
$("p:last") 最后一个<p>元素
$("tr:even") 所有偶数<tr> 元素
$("tr:odd") 所有奇数<tr> 元素
$("ul li:eq(3)")列表中的第四个元素（index 从 0 开始）
$("ul li:gt(3)")列出 index 大于 3 的元素
$("ul li:lt(3)") 列出 index 小于 3 的元素
$("input:not(:empty)") 所有不为空的 input 元素
$("p:hidden") 所有隐藏的<p>元素
$("table:visible") 所有可见的表格
表单选择器
$(":input") 所有 <input>元素
$(":text") 所有type="text"的 <input>元素
$(":password") 所有 type="password" 的 <input> 元素
$(":radio") 所有type="radio" 的 <input>元素
$(":checkbox") 所有 type="checkbox" 的 <input>元素
$(":submit") 所有 type="submit" 的<input>元素
$(":reset") 所有 type="reset" 的 <input>元素
$(":button") 所有 type="button" 的<input> 元素
$(":image") 所有 type="image" 的<input>元素
$(":file") 所有 type="file" 的 <input> 元素
$(":selected") 所有被选取的 input 元素（select option 下拉框）
$(":checked") 所有被选中的 input 元素（radio 和 checkbox）

另外$(this)指代元素本身

JQuery 动画

使用方法：

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

隐藏显示
hide() 和 show() 方法来隐藏和显示 HTML 元素
toggle() 方法来切换 hide() 和 show() 方法。
淡入淡出
fadeIn() 用于淡入已隐藏的元素。
fadeOut() 方法用于淡出可见元素。
fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
滑上滑下
slideDown() 方法用于向下滑动元素。
slideUp() 方法用于向上滑动元素。
slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换

举例：

<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>

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});
$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});
$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});//注意fadeTo的第二个参数是指定不透明度，元素的不透明度会逐渐变化到这个值上。

JQuery 文档操作

设置/获得内容和属性
text() 设置或返回匹配元素的内容。
html() 设置或返回匹配的元素集合中的 HTML 内容。
val() 设置或返回匹配元素的值。
添加元素
append() 向匹配元素集合中的每个元素结尾插入由参数指定的内容。
prepend() 向匹配元素集合中的每个元素开头插入由参数指定的内容。
after() 在匹配的元素之后插入内容。
before() 在每个匹配的元素之前插入内容。
删除元素
empty() 从被选元素中删除子元素
remove() 删除被选元素（及其子元素）
获取并设置 CSS 类
addClass() 向被选元素添加一个或多个类
removeClass() 从被选元素删除一个或多个类
toggleClass() 对被选元素进行添加/删除类的切换操作
css() 设置或返回样式属性
例如：$("p").css({"background-color":"yellow","font-size":"200%"});
jQuery 尺寸方法
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。

JQuery 遍历

祖先遍历

parent() 返回被选元素的直接父元素。
例如：$("span").parent(); 返回每个 <span> 元素的的直接父元素
parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 <html>。
例如：$("span").parents();返回所有 <span> 元素的所有祖先：
加过滤：$("span").parents("ul"); 返回所有 <span> 元素的所有是 <ul> 的祖先
parentsUntil() 返回介于两个给定元素之间的所有祖先元素。
例如：$("span").parentsUntil("div"); 返回介于 <span> 与<div> 元素之间的所有祖先元素

后代遍历

children() 返回被选元素的所有直接子元素。
例如：$("div").children(); 返回每个 <div> 元素的所有直接子元素
加过滤：$("div").children("p.intro");返回类名为 “intro” 的所有 <p> 元素，并且它们是 <div> 的直接子元素
find() 返回被选元素的后代元素，一路向下直到最后一个后代。
$("div").find("span");返回属于 <div> 后代的所有 <span> 元素
$("div").find("*");返回 <div> 的所有后代

同胞遍历

siblings() 返回被选元素的所有同胞元素。
next() 返回被选元素的下一个同胞元素。
nextAll() 返回被选元素的所有之后的同胞元素
nextUntil() 返回介于两个给定参数之间的所有之后的同胞元素。
prev() 返回被选元素的上一个同胞元素
prevAll() 返回被选元素的前面同胞元素
prevUntil() 返回介于两个给定参数之间的所有同胞元素
first() 返回被选元素的首个元素
$("div p").first(); 等价于$("div p:first");返回所有div里面第一个p元素
last() 返回被选元素的最后一个元素
eq() 返回被选元素中带有指定索引号的元素
$("p").eq(1);第一个p元素
filter() 返回匹配的元素
not() 返回不匹配的所有元素

JQuery AJAX

load()方法
作用：从服务器加载数据，并把返回的数据放入被选元素中
语法：$(selector).load(URL,data,callback);
例如：$("#div1").load("demo_test.txt");
把文件 “demo_test.txt” 的内容加载到指定的 <div> 元素中

$("button").click(function(){
    $("#div1").load("/example",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert("外部内容加载成功！");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
  //responseTxt请求成功得到的字符串数据
  //statusTxt成功为"sucess",失败为"error"
  //xhr.status和xhr.statusText，HTTP状态码，成功时为200 OK

get() 和 post() 方法
两种在客户端和服务器端进行请求-响应的常用方法。

$.get(URL,callback);

$("button").click(function(){
  $.get("demo_test.asp?name=lily&age=19",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

GET请求要提交的数据写在URL上,格式为http://host?key1=value1&key2=value2...

$.post(URL,data,callback);

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});//post提交的数据直接作为参数传进去

ajax()方法
该方法是 jQuery 底层 AJAX 实现，简单易用的高层实现见 get, post 等

$("button").click(function() {
    $.ajax({
        type:"get",
        url:"imge.json",
        async:true,//是否异步
        beforeSend:function(){
            console.log("before");
        },//请求之前的操作
        success:function(data){
            console.log("sucess"+data)
        }//请求成功后的操作
    });
});