Jquery的常用方法

代码帮工

于 2024-08-23 21:48:53 发布

阅读量353

点赞数 8

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/2201_75622149/article/details/141475397

版权

Jquery常用方法1

在Dom加载完成后对Dom进行的操作

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

jquery选择器

元素选择器

$("p") 表示选取所有的p元素

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

id选择器

$("#test") 获取某一个元素的id

class选择器

$(".test")获取class=“test“的标签

Jquery事件

常用的Jquery事件方法

$(document).ready()

click()->点击时触发的函数

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

dblclick()->双击时触发

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

mouseenter()->鼠标移入时触发

$("#p1").mouseenter(function(){
    alert('您的鼠标移到了 id="p1" 的元素上!');
});

mouseleave()->鼠标移出时触发

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

mousedowm()->鼠标移入点击时触发

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

mouseup()->鼠标松开按钮时触发

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

hover()->模拟光标悬停

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

focus()->获取焦点时触发

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

blur()->失去焦点时触发

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

显示/隐藏

show()/hide()

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

show(soeed,callback)

当显示或隐藏有参数时，第一个参数表示秒数，可传可不传，最后传一个回调函数

//以下是第二个参数的传递，jquery自带

jQuery自身提供"linear" 和 "swing"，其他可以使用相关的插件

$(document).ready(function(){
  $(".hidebtn").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("Hide() 方法已完成!");
    });
  });
});

toggle()

点击的时候如果是显示就隐藏，如果是隐藏就显示

$("button").click(function(){
  $("p").toggle();
});

语法:

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

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

淡入淡出

fadeIn()方法->淡入

jQuery fadeIn() 用于淡入已隐藏的元素。

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

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。.

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeIn() 方法：

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

fadeOut()->淡出

jQuery fadeOut() 方法用于淡出可见元素。

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

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。.

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeIn() 方法：

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

fadeToggle()->淡入淡出切换

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

语法:

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

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeToggle() 方法：

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

fadeTo()->变为给定透明的

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

语法:

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

可选的 callback 参数是该函数完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeTo() 方法：

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

滑动

slideDown()->用于向下滑动

jQuery slideDown() 方法用于向下滑动元素。

语法:

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

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideDown() 方法：

$("#flip").click(function(){
  $("#panel").slideDown();
});

slideUp()->用于向上滑动元素

jQuery slideUp() 方法用于向上滑动元素。

语法:

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

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideUp() 方法：

$("#flip").click(function(){
  $("#panel").slideUp();
});

slideToggle()->向上滑动和向下滑动切换

jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

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

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideToggle() 方

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

效果

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

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

语法：

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

下面的例子演示 animate() 方法的简单应用。它把 <div> 元素往右边移动了 250 像素：

$("button").click(function(){
  $("div").animate({left:'250px'});
});

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

animate()---操作多个属性

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

animate()---使用相对值

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

animate()---使用预定义的值

您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

animate()---使用队列功能

默认地，jQuery 提供针对动画的队列功能。

这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。

$("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");
});

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

停止动画

stop()->停止动画或效果在他们完成之前

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

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

语法:

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

下面的例子演示 stop() 方法，不带参数：

$("#stop").click(function(){
  $("#panel").stop();
});

Callback()->动画执行成功之后的回调函数

许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。

例子：$("p").hide("slow")

speed 或 duration 参数可以设置许多不同的值，比如 "slow", "fast", "normal" 或毫秒。

以下实例在隐藏效果完全实现后回调函数:

$("button").click(function(){
  $("p").hide("slow",function(){
    alert("段落现在被隐藏了");
  });
});

$("button").click(function(){
  $("p").hide(1000);
  alert("段落现在被隐藏了");
});

DOM操作

获得内容

text()->设置或放回所选元素的文本内容

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

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

attr获取属性

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

alert($("#runoob").attr("href"));

});

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

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

text()、html()、val()的回调函数

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

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

$("#btn1").click(function(){
    $("#test1").text(function(i,origText){
        return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
});
 
$("#btn2").click(function(){
    $("#test2").html(function(i,origText){
        return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
    });
});

attr()设置属性

jQuery attr() 方法也用于设置/改变属性值。

下面的例子演示如何改变（设置）链接中 href 属性的值：

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

attr()的回调函数

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

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

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

添加元素

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

append() 方法在被选元素的结尾插入内容（仍然在该元素的内部）。

$("p").append("追加文本");

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

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

$("p").prepend("在开头追加文本");

通过 append() 和 prepend() 方法添加若干新元素

在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。

不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。

在下面的例子中，我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：

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

after()和before()方法

jQuery after() 方法是每个匹配元素之后插入内容。

jQuery before() 方法在每个匹配元素之前插入内容。

通过after()和before()方法添加若干新元素

after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

在下面的例子中，我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）：

function afterText()
{
    var txt1="<b>I </b>";                    // 使用 HTML 创建元素
    var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素
    var txt3=document.createElement("big");  // 使用 DOM 创建元素
    txt3.innerHTML="jQuery!";
    $("img").after(txt1,txt2,txt3);          // 在图片后添加文本
}

删除元素

remove()->删除被选元素及其子元素

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

注意：以上的方法都可以传递参数，允许对被删元素进行过滤

$("p").remove(".italic");<----这里是一个例子，删除下面class=”italic“的

jquery操作css

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

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

addClass()->向不同元素添加不同的class属性

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

$("h1,h2,p").addClass("blue");

$("div").addClass("important");

});

//也可以在addClass()->方法中规定多个类

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

$("body div:first").addClass("important blue");

});

removeClass()->删除指定的class属性

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

toggleClass()->对添加/删除元素进行切换

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

CSS方法

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

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

返回第一个p标签的css背景颜色值

设置指定的css属性

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

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

尺寸

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

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

$("button").click(function(){
  var txt="";
  txt+="div 的宽度是: " + $("#div1").width() + "</br>";
  txt+="div 的高度是: " + $("#div1").height();
  $("#div1").html(txt);
});

innerWidth()->返回元素的宽度(包括内边距)

innerHeight()->返回元素的高度(包括内边距)

$("button").click(function(){
  var txt="";
  txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>";
    txt+="div 高度，包含内边距: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

outerWidth()->返回元素的宽度（包括内边距和边框）

outerHeight()->返回元素的高度（包括内边距和边框）

$("button").click(function(){
  var txt="";
  txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
  txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

向上遍历DOM元素

parent()->返回被选元素的直接父元素

该方法只会向上一级对 DOM 树进行遍历。

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

parents()->返回被选元素的所有祖先元素、直到html

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

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

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

parentsUntil('元素')->返回介于俩个给定元素之间的所有祖先元素

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

向下遍历DOM树

children()->返回被选元素的所有直接子元素

该方法只会向下一级对 DOM 树进行遍历。

下面的例子返回每个 <div> 元素的所有直接子元素：

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

find()->返回被选元素的所有后代

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

在DOM树中遍历其他兄弟类

siblings()->同一父级下的所有其他兄弟类

$(document).ready(function(){
  $("h2").siblings("p");
});
//可以传递参数，参数代表哪个兄弟元素

next()->返回被选元素的下一个弟弟元素

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

nextAll()->返回被选元素的所有弟弟元素

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

nextUntil()->返回所选俩个元素之间的所有兄弟元素

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

prev(), prevAll() & prevUntil() 方法

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

过滤

first()->返回被选元素的首个元素

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

last()->返回被选元素的最后一个元素

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

eq()->返回备选元素中带有指定索引号的元素

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

filter()->自设定的标准来实现

$(document).ready(function(){
  $("p").filter(".url");
});

not()->返回不匹配标准的所有元素（与filter相反）

$(document).ready(function(){
  $("p").not(".url");
});

代码帮工

关注

8
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Jquery的常用方法

jquery的常用方法
复制链接

扫一扫

语法	描述
$("*")	选取所有元素
$(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常用方法1

在Dom加载完成后对Dom进行的操作

jquery选择器

元素选择器

id选择器

class选择器

更多实例

Jquery事件

常用的Jquery事件方法

$(document).ready()

click()->点击时触发的函数

dblclick()->双击时触发

mouseenter()->鼠标移入时触发

mouseleave()->鼠标移出时触发

mousedowm()->鼠标移入点击时触发

mouseup()->鼠标松开按钮时触发

hover()->模拟光标悬停

focus()->获取焦点时触发

blur()->失去焦点时触发

显示/隐藏

show()/hide()

show(soeed,callback)

toggle()

淡入淡出

fadeIn()方法->淡入

fadeOut()->淡出

fadeToggle()->淡入淡出切换

fadeTo()->变为给定透明的

滑动

slideDown()->用于向下滑动

slideUp()->用于向上滑动元素

slideToggle()->向上滑动和向下滑动切换

效果

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

animate()---操作多个属性

animate()---使用相对值

animate()---使用预定义的值

animate()---使用队列功能

停止动画

stop()->停止动画或效果在他们完成之前

Callback()->动画执行成功之后的回调函数

DOM操作

获得内容

text()->设置或放回所选元素的文本内容

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

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

attr获取属性

text()、html()、val()的回调函数

attr()设置属性

attr()的回调函数

添加元素

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

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

通过 append() 和 prepend() 方法添加若干新元素

after()和before()方法

通过after()和before()方法添加若干新元素

删除元素

remove()->删除被选元素及其子元素

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

jquery操作css

addClass()->向不同元素添加不同的class属性

removeClass()->删除指定的class属性

toggleClass()->对添加/删除元素进行切换

CSS方法

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

设置指定的css属性

尺寸

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

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

innerWidth()->返回元素的宽度(包括内边距)

innerHeight()->返回元素的高度(包括内边距)

outerWidth()->返回元素的宽度（包括内边距和边框）

outerHeight()->返回元素的高度（包括内边距和边框）

向上遍历DOM元素

parent()->返回被选元素的直接父元素

parents()->返回被选元素的所有祖先元素、直到html

parentsUntil('元素')->返回介于俩个给定元素之间的所有祖先元素

向下遍历DOM树

children()->返回被选元素的所有直接子元素