jQuery

最新推荐文章于 2022-12-02 09:00:00 发布

qfsx

最新推荐文章于 2022-12-02 09:00:00 发布

阅读量173

点赞数

分类专栏： jQuery 文章标签： java

本文链接：https://blog.csdn.net/qq_41019779/article/details/107836845

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jQuery1 jQuery教程1.1jQuery 教程jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。总的来说jQuery 就是JavaScript 的包装类，通过jQuery 能够更好的编写和理解JavaScript 。1.2jQuery 安装使用jQuery就是通过链接https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js来将jQuery引入其他都和JavaScript 差不多，都是

摘要由CSDN通过智能技术生成

jQuery
1 jQuery教程
1.1jQuery 教程
jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。总的来说jQuery 就是JavaScript 的包装类，通过jQuery 能够更好的编写和理解JavaScript 。
1.2jQuery 安装
使用jQuery就是通过链接https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js来将jQuery引入其他都和JavaScript 差不多，都是在

$(this).hide() - 隐藏当前元素。
$("p").hide() - 隐藏所有 <p> 元素。
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素。
$("#test").hide() - 隐藏所有 id="test" 的元素。

1.4jQuery 选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
1.元素选择器
用户点击按钮后，所有

元素都隐藏：

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

2.id选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
当用户点击按钮后，有 id=“test” 属性的元素将被隐藏：

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

3.class选择器
jQuery 类选择器可以通过指定的 class 查找元素。
用户点击按钮后所有带有 class=“test” 属性的元素都隐藏：

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

1.5jQuery 事件
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。比如说在元素上移动鼠标、选取单选按钮、点击元素。
首先是 $(d o c u m e n t) . r e a d y () ，$ (document).ready() 方法允许我们在文档完全加载完后执行函数。然后是事件处理。

1.clik()方法，click() 方法是当按钮点击事件被触发时会调用一个函数。
$("p").click(function(){
  $(this).hide();
});
2.dblclick(),当双击元素时，会发生 dblclick 事件。
$("p").dblclick(function(){
  $(this).hide();
});
3.mouseenter(),当鼠标指针穿过元素时，会发生 mouseenter 事件。
$("#p1").mouseenter(function(){
    alert('您的鼠标移到了 id="p1" 的元素上!');
});
4.mouseleave(),当鼠标指针离开元素时，会发生 mouseleave 事件。
$("#p1").mouseleave(function(){
    alert("再见，您的鼠标离开了该段落。");
});
5.mousedown(),当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
$("#p1").mousedown(function(){
    alert("鼠标在该段落上按下！");
});
6.focus(),当元素获得焦点时，发生 focus 事件,当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});
7.blur()当元素失去焦点时，发生 blur 事件。
$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});.

2 jQuery效果
2.1jQuery 隐藏/显示
jQuery hide() 和 show()
通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

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

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
jQuery toggle()
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="./js/jquery-3.5.0.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>
</head>
<body>
<button>隐藏/显示</button>
<p>这是一个文本段落。</p>
<p>这是另外一个文本段落。</p>
</body>
</html>
2.2jQuery 淡入淡出
jQuery fadeIn() 方法
jQuery fadeIn() 用于淡入已隐藏的元素。
$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

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


```html
<!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(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
  });
});
</script>
</head>
<body>
<p>以下实例演示了 fadeOut() 使用了不同参数的效果。</p>
<button>点击淡出 div 元素。</button>
<br><br>
<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>
</body>
</html>

jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

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

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

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

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

<!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(){
  $("#flip").click(function(){
    $("#panel").slideDown("slow");
  });
});
</script>
<style type="text/css"> 
#panel,#flip
{
	padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;
}
#panel
{
	padding:50px;
	display:none;
}
</style>
</head>
<body>
<div id="flip">点我滑下面板</div>
<div id="panel">Hello world!</div>
</body>
</html>

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

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

jQuery slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。

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

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

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

jQuery animate() - 操作多个属性
请注意，生成动画的过程中可同时使用多个属性：

<!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(){
    $("div").animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      width:'150px'
    });
  });
});
</script> 
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
如果需要改变，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

jQuery animate() - 使用相对值
也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

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

jQuery animate() - 使用预定义的值
您甚至可以把属性的动画值设置为 “show”、“hide” 或 “toggle”：

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

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

2.5jQuery 停止动画
jQuery stop() 方法
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

<!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(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});
</script>
<style type="text/css"> 
#panel,#flip
{
	padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;
}
#panel
{
	padding:50px;
	display:none;
}
</style>
</head>
<body>
<button id="stop">停止滑动</button>
<div id="flip">点我向下滑动面板</div>
<div id="panel">Hello world!</div>
</body>
</html>

2.6jQuery Callback
Callback 函数在当前动画 100% 完成之后执行。
jQuery 动画的问题
许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。

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

3 jQuery HTML
3.1jQuery 捕获
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});
val() - 设置或返回表单字段的值
$("#btn1").click(function(){
  alert("值为: " + $("#test").val());
});
jQuery attr() 方法用于获取属性值。
$("button").click(function(){
  alert($("#runoob").attr("href"));
});

3.2jQuery 设置
设置内容 - text()、html() 以及 val()
text() - 设置或返回所选元素的文本内容。
html() - 设置或返回所选元素的内容（包括 HTML 标记）。
val() - 设置或返回表单字段的值。
通过 text()、html() 以及 val() 方法来设置内容：

$("#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()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

<!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(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 + ")"; 
    });
  });
});
</script>
</head>
<body>
<p id="test1">这是一个有 <b>粗体</b> 字的段落。</p>
<p id="test2">这是另外一个有 <b>粗体</b> 字的段落。</p>
<button id="btn1">显示 新/旧 文本</button>
<button id="btn2">显示 新/旧 HTML</button>
</body>
</html>

设置属性 - attr()
jQuery 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(){
    $("#runoob").attr("href","http://www.runoob.com/jquery");
  });
});
</script>
</head>
<body>
<p><a href="//www.runoob.com" id="runoob">菜鸟教程</a></p>
<button>修改 href 值</button>
<p>点击按钮修改后，可以点击链接查看链接地址是否变化。</p>
</body>
</html>

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

<!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(){
        $("#runoob").attr("href", function(i, origValue){
            return origValue + "/jquery";
        });
    });
});
</script>
</head>
<body>
<p><a href="//www.runoob.com" id="runoob">菜鸟教程</a></p>
<button>修改 href 值</button>
<p>点击按钮修改后，可以点击链接查看 href 属性是否变化。</p>
</body>
</html>

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

<!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(){
    $("p").append(" <b>追加文本</b>。");
  });
  $("#btn2").click(function(){
    $("ol").append("<li>追加列表项</li>");
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>
</body>
</html>

3.4jQuery 删除元素
3.4.1jQuery remove() 方法
api是remove，通过remove删除被选元素及其子元素。
jQuery remove() 方法删除被选元素及其子元素。

这是 div 中的一些文本。

这是在 div 中的一个段落。

这是在 div 中的另外一个段落。

移除div元素 3.4.2jQuery empty() 方法 jQuery empty() 方法删除被选元素的子元素。 $("#div1").empty(); 3.5jQuery CSS类 jQuery addClass() 方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("body div:first").addClass("important blue");
    <!--点击增加第一个div的important blue样式 -->
  });
});
</script>
<style type="text/css">
.important
{
	font-weight:bold;
	font-size:xx-large;
}
.blue
{
	color:blue;
}
</style>
</head>
<body>

<div id="div1">这是一些文本。</div>
<div id="div2">这是一些文本。</div>
<br>
<button>为第一个 div 元素添加类</button>

</body>
</html>
jQuery removeClass() 方法
<!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(){
    $("h1,h2,p").removeClass("blue");
    <!-- 点击移除blue样式-->
  });
});
</script>
<style type="text/css">
.important
{
	font-weight:bold;
	font-size:xx-large;
}
.blue
{
	color:blue;
}
</style>
</head>
<body>
<h1 class="blue">标题 1</h1>
<h2 class="blue">标题 2</h2>
<p class="blue">这是一个段落。</p>
<p class="important">这是另外一个段落。</p>
<br>
<button>从元素中移除 class</button>
</body>
</html>
jQuery toggleClass() 方法，方法对被选元素进行添加/删除类的切换操作：
<!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(){
    $("h1,h2,p").toggleClass("blue");
    <!--点击增加或移除blue样式-->
  });
});
</script>
<style type="text/css">
.blue
{
color:blue;
}
</style>
</head>
<body>
<h1 class="blue">标题 1</h1>
<h2 class="blue">标题 2</h2>
<p class="blue">这是一个段落。</p>
<p>这是另外一个段落。</p>
<br>
<button>切换 class</button>
</body>
</html>

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

<!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(){
    $("p").css({"background-color":"yellow","font-size":"200%"});
    <!--点击给p标签设置 background-color 和 font-size：-->
  });
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<p>这是一个段落。</p>
<button>为 p 元素设置多个样式</button>
</body>
</html>

3.7jQuery 尺寸
3.7.1 jQuery width() 和 height() 方法
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

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

3.7.2 jQuery innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。

$("button").click(function(){
  var txt="";
  txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>";
    txt+="div 高度，包含内边距: " + $("#div1").innerHeight();
  $("#div1").html(txt);
  <!--点击显示div1宽度和高度与内边距的和-->
});

3.7.3 jQuery outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。

$("button").click(function(){
  var txt="";
  txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
  txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight();
  $("#div1").html(txt);
  <!--点击显示div1宽度和高度与内边距还有边框的和-->
});

4 jQuery 遍历
4.1jQuery 遍历
jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
4.2jQuery 祖先
4.2.1 jQuery parent() 方法
parent() 方法返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历。

$(document).ready(function(){
  $("span").parent();
  <!--返回每个span元素的直接父元素-->
});

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

$(document).ready(function(){
  $("span").parents();
  <!--返回所有 <span> 元素的所有父元素-->
});

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

$(document).ready(function(){
  $("span").parentsUntil("div");
  <!--返回介于 <span> 与 <div> 元素之间的所有祖先元素-->
});

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

$(document).ready(function(){
  $("div").children();
  <!--返回每个 <div> 元素的所有直接子元素-->
});

4.3.2jQuery find() 方法
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

$(document).ready(function(){
  $("div").find("span");
  <!--返回属于 <div> 后代的所有 <span> 元素-->
});

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

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

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

$(document).ready(function(){
  $("h2").next();
  <!--返回 <h2> 的下一个同胞元素-->
});

4.4.3jQuery nextAll() 方法
nextAll() 方法返回被选元素的所有跟随的同胞元素。

$(document).ready(function(){
  $("h2").nextAll();
  <!--返回 <h2> 的所有跟随的同胞元素-->
});

4.4.4jQuery nextUntil() 方法
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

$(document).ready(function(){
  $("h2").nextUntil("h6");
  <!--返回介于 <h2> 与 <h6> 元素之间的所有同胞元素-->
});

4.5jQuery 过滤
4.5.1过滤的作用
主要是缩小搜索元素的范围。
三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
4.5.2jQuery first() 方法
first() 方法返回被选元素的首个元素。

$(document).ready(function(){
  $("div p").first();
  <!--返回首个 <div> 元素内部的第一个 <p> 元素-->
});

4.5.3jQuery last() 方法
last() 方法返回被选元素的最后一个元素。

$(document).ready(function(){
  $("div p").last();
  <!--返回最后一个 <div> 元素中的最后一个 <p> 元素-->
});

4.5.4jQuery eq() 方法
eq() 方法返回被选元素中带有指定索引号的元素。

$(document).ready(function(){
  $("p").eq(1);
  <!--返回第二个 <p> 元素-->
});

4.5.5jQuery filter() 方法
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

$(document).ready(function(){
  $("p").filter(".url");
  <!--返回带有类名 "url" 的所有 <p> 元素-->
});

4.5.6jQuery not() 方法
not() 方法返回不匹配标准的所有元素。

$(document).ready(function(){
  $("p").not(".url");
  <!--返回不带有类名 "url" 的所有 <p> 元素-->
});

qfsx

关注

0
点赞
踩
0

收藏

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

jQuery1 jQuery教程1.1jQuery 教程jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。总的来说jQuery 就是JavaScript 的包装类，通过jQuery 能够更好的编写和理解JavaScript 。1.2jQuery 安装使用jQuery就是通过链接https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js来将jQuery引入其他都和JavaScript 差不多，都是
复制链接

扫一扫