JQuery操作DOM常用API总结(必行)

最新推荐文章于 2022-05-06 17:52:34 发布

置顶 *玛卡巴卡*

最新推荐文章于 2022-05-06 17:52:34 发布

阅读量490

点赞数 2

分类专栏： JQuery

本文链接：https://blog.csdn.net/weixin_45616142/article/details/108908447

版权

JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JQuery简介

jQuery是一个javaScript库，极大地简化了JavaScript编程。

JQuery包含以下特性：

HTML元素获取
HTML元素操作
CSS操作
HTML事件函数
JavaScript特效和动画
HTML DOM遍历和修改
AJAX
Utilities

JQuery安装：

可以使用CDN的引入方式，也可以使用npm下载

JQuery语法：

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法是：$(selector).action()
美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

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

JQuery元素选择器：

jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。

JQuery属性选择器：

jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$ ("[href]") 选取所有带有 href 属性的元素。
$ ("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href $='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

JQuery CSS 选择器：

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
例如：把所有 p 元素的背景颜色更改为红色：
$("p").css("background-color","red");

如图所示：
在这里插入图片描述
JQuery 获取HTML值：

获取元素text值和元素html值
比如：
jquery代码:
$("#btn1").click(function(){
   alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
   alert("HTML: " + $("#test").html());
});
html代码:
<p id="test">这是段落中的<b>粗体</b>文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>

获取元素属性值
比如：
jquery代码:
$("button").click(function(){
    alert($("#w3s").attr("href"));
  });
html代码:
<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>
<button>显示 href 值</button>

JQuery 添加元素：

append() 方法在被选元素的结尾插入内容。
例如：
$("p").append("我是元素结尾添加的内容");

prepend() 方法在被选元素的开头插入内容。
例如：
$("p").prepend("我是元素开头添加的内容");

after() 方法在被选元素之后插入内容。
例如：
$("#btn2").click(function(){
    $("img").after("<i>After</i>");
});
  
before() 方法在被选元素之前插入内容。
例如：
$("#btn1").click(function(){
    $("img").before("<b>Before</b>");
});

JQuery 删除元素：

remove() 方法删除被选元素及其子元素。
例如：
$("button").click(function(){
    $("#div1").remove();
});
  
empty() 方法删除被选元素的子元素。
 例如：
$("button").click(function(){
   $("#div1").empty();
});

JQuery 操作 CSS

addClass() 方法 向被选元素添加一个或多个类
例如：
$("button").click(function(){
    $("h1,h2,p").addClass("blue");
    $("div").addClass("important");
});

removeClass() 方法 元素中删除指定的 class 属性
例如：
$("button").click(function(){
    $("h1,h2,p").removeClass("blue");
});

toggleClass() 方法  该方法对被选元素进行添加/删除类的切换操作
例如：
$("button").click(function(){
    $("h1,h2,p").toggleClass("blue");
});

jQuery - 针对css() 方法

设置指定的css属性
语法：css("propertyname","value");
例如：
$("button").click(function(){
    $("p").css("background-color","yellow");
});

设置多个指定的css属性
语法：css({"propertyname":"value","propertyname":"value",...});
例如：
$("button").click(function(){
    $("p").css({"background-color":"yellow","font-size":"200%"});
});

JQuery-尺寸方法

outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
设置指定div元素的宽度和高度
例如：
$("button").click(function(){
    $("#div1").width(320).height(320);
});

JQuery 操作父级方法

parent() 方法返回被选元素的直接父元素，该方法只会向上一级对 DOM 树进行遍历。
例如：操作span标签的父级样式(爸爸)
$("span").parent().css({"color":"red","border":"2px solid red"});

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
例如：操作span标签所有的父级样式(爸爸 爷爷 姥爷 太姥爷......)
$("span").parents().css({"color":"red","border":"2px solid red"});

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
例如：操作span标签和div标签之间的元素的样式
$("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});

JQuery 操作子级方法

children() 方法返回被选元素的所有直接子元素，该方法只会向下一级对 DOM 树进行遍历。
例如：操作div标签的子级标签样式(儿子)
$("div").children().css({"color":"red","border":"2px solid red"});

还可以使用这个方法对可选参数来过滤对子元素的搜索。
例如：返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素
$("div").children("p.1").css({"color":"red","border":"2px solid red"});

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
例如：返回div所有的后代
$("div").find("*").css({"color":"red","border":"2px solid red"});

例如：返回属于 <div> 后代的所有 <span> 元素
$("div").find("span").css({"color":"red","border":"2px solid red"});

JQuery 元素过滤方法

first() 方法返回被选元素的首个元素。
例如：选取首个 <div> 元素内部的第一个 <p> 元素
$("div p").first()

last() 方法返回被选元素的最后一个元素。
例如：选择最后一个 <div> 元素中的最后一个 <p> 元素
$("div p").last()

eq() 方法返回被选元素中带有指定索引号的元素
例如：选取第二个 <p> 元素（索引号 1）
$("p").eq(1).css("background-color","yellow");

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
例如：返回带有类名 "intro" 的所有 <p> 元素
$("p").filter(".intro").css("background-color","yellow");

not() 方法返回不匹配标准的所有元素，not() 方法与 filter() 相反
例如：返回不带有类名 "intro" 的所有 <p> 元素
$("p").not(".intro").css("background-color","yellow");

JQuery事件函数：

获取button按钮，并触发一个点击事件调用一个函数 ，隐藏所有p标签。
例如：
隐藏：
$("button1").click(function() {
	$("p").hide();
} )

显示：
$("button2").click(function() {
	$("p").show();
} )

在这里插入图片描述
JQuery淡入淡出效果：

常用淡入效果：
语法：$(selector).fadeIn(speed,callback);
例如：
$("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
});

常用淡出效果：
语法：$(selector).fadeOut(speed,callback);
例如：
$("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
});

JQuery滑动效果：

向下滑出效果：
语法：$(selector).slideDown(speed,callback);
可选：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。
可选：callback 参数是滑动完成后所执行的函数名称。
例如：
$(".flip").click(function(){
    $(".panel").slideDown("slow");
});

向上滑动效果：
语法：$(selector).slideUp(speed,callback);
可选：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。
可选：callback 参数是滑动完成后所执行的函数名称。
例如：
$(".flip").click(function(){
    $(".panel").slideUp("slow");
});

向上向下滑入滑出效果：
slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
语法：$(selector).slideToggle(speed,callback);
可选：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。
可选：callback 参数是滑动完成后所执行的函数名称。
例如：
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
});

JQuery动画效果：

jQuery animate() 方法用于创建自定义动画。

语法：$(selector).animate({params},speed,callback);
必需：params 参数定义形成动画的 CSS 属性。
可选：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。
可选：callback 参数是动画完成后所执行的函数名称。

注意：默认地，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

例如：
这是一个简单的应用
$("button").click(function(){
  $("div").animate({left:'250px'});
}); 

生成动画的过程中可以同时使用多个属性
例如：
$("button").click(function(){
    $("div").animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      width:'150px'
    });
  });

 注意：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

jQuery animate() - 使用预定义的值 简单说就是显示隐藏
可以把属性的动画值设置为 "show"、"hide" 或 "toggle"
例如：
$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

JQuery方法链接：

Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。
就是允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。这样的话，浏览器就不必多次查找相同的元素。

"p1" 元素首先会变为红色，然后向上滑动，然后向下滑动：
例如：
可以这样写： 这样写不太严格
$("button").click(function(){
	$("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
也可以这样写：
$("button").click(function(){
    $("#p1").css("color","red")
      .slideUp(2000)
      .slideDown(2000);
});

JQuery-AJAX

AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。
简单的说就是不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
例如：一个简单的jquery的ajax的写法
$(function(){
        //请求参数
        var list = {};
        //
        $.ajax({
            //请求方式
            type : "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : "http://127.0.0.1/admin/list/",
            //数据，json字符串
            data : JSON.stringify(list),
            //请求成功
            success : function(result) {
                console.log(result);
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    });