jQuery教程

jQuery对象基本使用

本文主要是介绍jQuery对象基本使用，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。

// 例：
$("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。
相当于DOM： document.getElementById("i1").innerHTML;

虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery 对象无法使用 DOM 对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。

一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：

jQuery === $
var $variable = jQuery对像
var variable = DOM对象
$variable[0]   //jQuery对象转成DOM对象

拿上面那个例子举例，jQuery对象和DOM对象的使用：

$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法

jQuery基本选择器

$('#d1')  // 相当于： document.getElementById('d1')
$('.c1')  // 相当于： document.getElementsByClassName('d1')
$('p')    // 相当于： document.getElementsByTagName('p')
$('div.c1')  //  查找class含有c1的div标签
$("#d1, .c1, p")  //  并列查找
$("x y")	// x的所有后代y（子子孙孙）
$("x > y")	// x的所有儿子y（儿子）
$("x + y")	// 找到所有紧挨在x后面的y
$("x ~ y")	// x之后所有的兄弟y

jQuery基本筛选器

:first 				// 第一个
:last 				// 最后一个
:eq(index)  		// 索引等于index的那个元素
:even   			// 匹配所有索引值为偶数的元素，从 0 开始计数
:odd   				// 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)			// 匹配所有大于给定索引值的元素
:lt(index)			// 匹配所有小于给定索引值的元素
:not(元素选择器)		// 移除所有满足not条件的标签
:has(元素选择器)		// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

示例：

$('ul li:first');		// 找到ul后代第一个li标签
$('ul li:last');		// 找到ul后代最后一个li标签
$('ul li:eq(2)');		// 找到ul后代索引为2的li标签
$('ul li:even');		// 找到ul后代中所有偶数元素
$('ul li:odd');			// 找到ul后代中所有奇数元素
$('ul li:gt(3)');		// 找到ul后代中所有大于索引3的li标签
$('ul li:lt(7)');		// 找到ul后代中所有小于索引7的li标签
$("ul:has(li)");		// 找到所有后代中有li标签的ul标签
$("ul:has(.c1)");		// 找到所有后代中有c1样式类的ul标签
$("li:not(.c1)");		// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))");	// 找到所有后代中不含a标签的li标签

jQuery属性选择器

//  通过标签的属性查找标签
格式：$('标签选择器[属性名="属性值"]')
示例：
	$('[name]');   // 查找有name属性的标签
	$('[name="gary"]')  // 查找属性为name属性值为gary的标签
	$('input[name="gary"]')  // 查找属性为name属性值为gary的input标签

jQuery表单筛选器

//  主要是查找form表单内部中的标签
格式：$(':属性值')

表单筛选器：$(':text')  // 查找属性值是text的form表单内的标签
基本方式查找：$('input[type="text"]')  // 结果相同


特例：$(':checked')  // 会连同有默认属性selected的option标签一起找到
	$(':selected') // 不会找到连同有默认属性checked的input标签

jQuery筛选器方法

准备工作：

<body>
    <p id="d1">111
        <p id="d5">
        <span id="s1">p1span111</span>
        </p>
        <span id="s2">p1span222</span>
        <span id="s3">p1span333</span>
    </p>
    <p id="d2">222</p>
    <p id="d3">333</p>
    <p id="d4">444</p>
</body>

"""
使用原生js代码批量查找到标签之后  结果是一个数组
需要索引取值之后才可以调用标签的一些方法

使用jQuery代码批量查找到标签之后 结果是一个jQuery对象(像数组)
不需要索引取值 就可以直接调用封装的方法

两者对象的转换
	js对象转jQuery对象
		$(js对象)
	jQuery对象转jd对象
		jQuery对象索引取值
"""

下一个元素：

$("#id").next();		// 下一个标签
$("#id").next().next();	// 下下一个标签
$("#id").nextAll();		// 所有标签
$("#id").nextUntil("#结束id");  // 到结束id中间的所有标签

上一个元素：

$("#id").prev()			// 上一个标签
$("#id").prevAll()		//  往上所有标签
$("#id").prevUntil("#结束id")	// 往上到结束id中间的所有标签

父亲元素：

$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil("匹配到的元素") // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

儿子和兄弟元素：

$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

查找

// 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

$("p").find("span")    // 在p标签后代找span标签

等价于$("p span")

筛选

// 筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

$("p").filter("#d2")  // 从结果集中过滤出有c1样式类的

等价于 $("p#d2")

补充：

.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素

jQuery节点操作

样式类操作：

addClass();		// 添加指定的CSS类名。  classList.add()
removeClass();	// 移除指定的CSS类名。	classList.remove()
hasClass();		// 判断样式存不存在		classList.contains()
toggleClass();	// 切换CSS类名，如果有就移除，如果没有就添加。	classList.toggle()

示例：

代码准备 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<style>
    #d1 {
        width: 200px;
        height: 200px;
        border-radius: 50%;
    }
    .c2 {
        background-color: darkgray;
    }
    .c3{
        background-color: yellow;
    }
</style>

<body>
    <div id='d1' class="c1 c2 c3"></div>
</body>
</html>

$('#d1').removeClass('c3');  // 删除c3类
$('#d1').addClass('c3');	// 添加c3类

$('#d1').hasClass('c3');	// 判断c3类
true
$('#d1').hasClass('c4');
false

$('#d1').toggleClass('c3');		// 切换c3类
$('#d1').toggleClass('c3');

样式操作：

css('属性名','属性值');    //  相当于DOM：.style.属性名='属性值'

示例：
	$('.c3').css('backgroundColor','red');

位置操作：

offset()		// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()		// 获取匹配元素相对父元素的偏移
scrollTop()		// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()	// 获取匹配元素相对滚动条左侧的偏移

.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。和 .position()的差别在于： .position()是相对于相对于父级元素的位移。

尺寸操作：

height()		// 内容部分的高
width()			// 内容部分的宽
innerHeight()	// 内容区域+padding区域的大小
innerWidth()	//
outerHeight()	//  border及以内区域的大小
outerWidth()	//

推荐：https://zhuanlan.zhihu.com/p/342069450

文本操作：

text()  // 相当于DOM:innerText
html() 	// 相当于DOM:innerHTML
val()  	// 相当于DOM:value
jQuery对象先转js对象之后.files
    '''括号内不写参数就是获取值 写参数就是设置值'''

示例：

<body>
    <div id="d1"></div>
    <input type="text" id="i1">
    <p id="p1"></p>
    <p id="p2"></p>
</body>

("div").text('<h1>好好学习吧！</h1>');
$("#p1").text('<h1>好好学习吧！</h1>');
$("#p2").html('<h1>好好学习吧！</h1>');
$("input").val('好好学习吧！');

属性操作：

	attr()  //  相当于DOM:setAttribute()
    '''适用于属性为静态的情况(不经常修改动态变化的)'''

    prop()
    	$($(':checkbox')[1]).prop('checked',true)
    """适用于动态变化的情况 尤其是选择类标签"""

示例：

<body>
    <input type="checkbox" checked="checked">篮球
    <input type="checkbox" >足球
    <input type="checkbox" >乒乓球
</body>

$($(':checkbox')[0]).attr('checked');
'checked'
$($(':checkbox')[0]).prop('checked');
false

文档处理：

	append()  // 内部的尾部追加元素
    prepend()  // 内部的头部追加元素
    after()  // 同级别下面添加元素
    before()  // 同级别上面添加元素
    remove()  // 移除当前元素
    empty()  // 清空当前元素内部所有的数据
    clone()  // 克隆标签 括号内可以加布尔值来明确是否克隆事件

示例：

<body>
    <p>我是p标签</p>
    <span>我是span标签</span>
</body>

$('p').append('好好学习吧')  // 尾部追加
$('p').prepend('好好学习吧')	// 头部追加
$('p').after('好好学习吧')	// 同级别下面添加元素
$('p').before('好好学习吧')	
$('span').remove();		// 移除span标签
$('p').empty();			// 清空p标签

克隆标签示例：

克隆标签代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>克隆</title>
  <style>
    #b1 {
      background-color: deeppink;
      padding: 5px;
      color: white;
      margin: 5px;
    }
    #b2 {
      background-color: dodgerblue;
      padding: 5px;
      color: white;
      margin: 5px;
    }
  </style>
</head>
<body>

<button id="b1">屠龙宝刀，点击就送</button>
<hr>
<button id="b2">屠龙宝刀，点击就送</button>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  // clone方法不加参数true，克隆标签但不克隆标签带的事件
  $("#b1").on("click", function () {
    $(this).clone().insertAfter(this);
  });
  // clone方法加参数true，克隆标签并且克隆标签带的事件
  $("#b2").on("click", function () {
    $(this).clone(true).insertAfter(this);
  });
</script>
</body>
</html>

这篇关于jQuery对象基本使用的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航