JQuery的简单使用

jQuery的简单使用

jQuery查找父、子、兄弟节点
jQuery查找内容
元素筛选
遍历元素
操作元素
- width() / height() 设置宽高
- .css() 设值样式
- attr() / prop() 设置属性
- 增加、删除、切换class
- 删除和清空
操作元素总结
- 选择表达式
- 链式操作
- 取值和赋值函数

HTML_1

<table id="table_1" border="1" cellspacing="1" cellpadding="1" style="height: 300px;width: 500px;text-align: center;">
	<tr class="tr_th_1">
		<th>Header1</th><th>Header2</th><th class="tr_th_1_th_3">Header3</th><th>Header4</th>
	</tr>
	<tr class="tr_1">
		<td>Data1.1</td>
		<td>Data1.2</td>
		<td class="tr_1_td_3">Data1.3</td>
		<td>Data1.4</td>
	</tr>
	<tr class="tr_2">
		<td>Data2.1</td>
		<td class="tr_2_td_2">Data2.2</td>
		<td>Data2.3</td>
		<td>Data2.4</td>
	</tr>
	<tr class="tr_3">
		<td>Data3.1</td>
		<td>Data3.2</td>
		<td class="tr_3_td_3">Data3.3</td>
		<td>Data3.4</td>
	</tr>
	<tr class="tr_4">
		<td>Data4.1</td>
		<td>Data4.2</td>
		<td>Data4.3</td>
		<td class="tr_4_td_4">Data4.4</td>
	</tr>
</table>

HTML_2

<ul>
	<li>12345</li>
	<li>23451</li>
	<li>34512</li>
	<li>45123</li>
	<li>51234</li>
</ul>

HTML_3

<div id="numberList">
	<div id="number_1" class="num" name="one">数字一</div>
	<div id="number_2" class="num" name="two">数字二</div>
	<div id="number_3" class="num" name="three">数字三</div>
</div>

jQuery查找父、子、兄弟节点

此案例用HTML_1

//获取元素 可以通过 ID值，类名，标签名 等
$(".tr_th_1_th_3").css('background-color','red');

// 1.next();//获取当前元素的下一个兄弟元素
$(".tr_1_td_3").next().css('background-color','yellow');

// 2.nextAll();//获取当前元素后面所有的兄弟元素
$(".tr_2_td_2").nextAll().css('background-color','green');

// 3.prev();//获取当前元素的前一个兄弟元素
$(".tr_3_td_3").prev().css('background-color','blue');

// 4.prevAll();//获取当前元素前面的所有兄弟元素
$(".tr_4_td_4").prevAll().css('background-color','coral');

// 5.siblings();//获取当前元素的所有兄弟元素
$(".tr_th_1_th_3").siblings().css('font-size','10px');

// 6.children();//获取一个元素的直接子元素，类似于 $(‘ul > li’)
$(".tr_4").children().css('font-size','12px');

// 7.find();//获取一个元素的某种所有子元素，类似于 $(‘ul li’)
$(".tr_4").find('.tr_4_td_4').css('text-align','left');

// 8.parent();//获取当前元素的父元素
$(".tr_2_td_2").parent().css('text-align','right');

// parents();//找到所有祖先元素，不限于父元素
// contents();//查找下面的所有内容，包括节点和文本。
			
// 在next prev children内可以添加id名或者类名，用于查找特定的元素。
// eg: 
// $('#sibling-id').next('.next-sibling-class');
// $('#sibling-id').prev('.prev-sibling-class');
// 函数可以紧跟着上一个继续调用
// eg:
// $('#id_name').next().next();
// $('.class_name').parent().parent();

运行效果
在这里插入图片描述

jQuery.children(expr) //查找所有直属子元素，只会找到直接的孩子节点，不会返回所有子孙
jQuery.find(expr) //查找所有孩子节点，不限于直属孩子，直至叶子节点孩子

jQuery查找内容

此案例用HTML_1

jQuery.contents() //查找下面的所有内容，包括节点和文本。
jQuery.text() // 查找文本内容
jQuery.html() // 查找html内容

若函数括号里填入值，那可以替换相应的内容。
例如：jQuery.text('这是替换后的文字');
jQuery.html('<div><span>有内容</span></div>')

JavaScript代码	运行效果

元素筛选

此案例用HTML_2

JavaScript代码	运行效果

遍历元素

此案例用HTML_3

JavaScript代码	运行效果

对于上面的代码，还可以这样写

$.each($("#numberList .num"), function(index, element){
	console.log(index, element);
});
$("#numberList .num").map(function(index, element){
	console.log(index, element);
});

或者写成其他形式

var elementArr = $("#numberList .num");			
for(var item of elementArr){
	console.log((item));
	console.log($(item));
}

for(var i = 0; i < elementArr.length; i++){
	console.log(i, elementArr[i]);
	console.log(i, $(elementArr[i]));
}

如果遍历对象就是这样的

$.each( {name: 'lack', age: 20}, function(key, value) {
	console.log(key);
	console.log(value);
});

可以将获取到的值放到数组中

// ['one', 'two', 'three']
var numList = $("#numberList .num").map(function(){
	return $(this).attr("name")
}).get();
// ['one', 'two']
var numLenOutFourList = $("#numberList .num").map(function(){
	if ($(this).attr("name").length > 4){
		return;
	}
	return $(this).attr("name")
}).get();
// ['one', 'three']
var numListEndsWithE = $("#numberList .num").map(function(){
	if ($(this).attr("name").endsWith("e")) {
		return $(this).attr("name")
	}
}).get();

操作元素

width() / height() 设置宽高

// 设置元素宽度是 140px， 高度是60px
$("div").width(140);
$("div").height(60);

// 获取元素宽高
$("div").width();
$("div").height();

.css() 设值样式

$("div").css('background-color','red'); // 设置元素背景为红色
$("div").css({'background-color':'red', 'color':'blue'}); // 设置元素背景为红色，颜色为蓝色

$("div").css('font-size'); // 获取元素字体大小

attr() / prop() 设置属性

用 attr 设置属性值，是对属性值进行替换。若设置的属性不存在，那么就直接设置；若存在那就将属性值进行替换。例如，已有属性值是 class=“numberList” , 执行 $(“div”).attr(‘class’, ‘number’) 之后，属性值变为 class=“number”。但是，执行 $(“div”).addClass(‘class’, ‘number’) 之后，属性值变为 class=“numberList number”，变为两个值共存的情况。

$('div').attr('id', 'num1');
$("div").attr('class', 'number');
$("div").attr('name', 'one');
$("div").attr('dada-config-txt', 'this is number one');
$("div").attr('txt_data', '1');
// 也可以合在一起写
$("div").attr({'id':'num1','class':'numbers', 'name':'ones', 'dada-config-txt':'this is number one', 'txt_data':'1'});

prop() 方法和 attr() 方法类似，可以设置元素的属性和值，但是它们之间有一些细微的区别。prop() 主要用于设置元素本身的属性，如 checked、selected、disabled 等，而 attr() 更适合设置元素的非标准属性。
jQuery 官方建议：具有 true 和 false 这两种取值的属性，如 checked、selected 和 disabled 等，建议使用 prop() 方法来操作，而其他的属性都建议使用 attr() 方法来操作。
例如，下面的代码将一个 input 元素设置为选中状态：

$('input[type="checkbox"]').prop('checked', true)

同样的，也能获取相应的属性值

$("div").attr('name');
$("div").attr('txt_data');
$('input[type="checkbox"]').prop('checked')

增加、删除、切换class

addClass(className0 className1 ...)
removeClass(className0 className1 ...)
toggleClass(className) #有className则去掉，没有则添加

删除和清空

$("#number_1").removeAttr("style"); // 删除元素样式
$("#number_1").removeAttr("name"); // 删除元素名为 name 的属性
$("#number_1").remove(); // 删除元素
// 下面是清空节点里面的子元素，但是<div id="number_1" class="num"></div> 这个外壳还在
$("#number_1").empty();  
$("#number_1").html('');

操作元素总结

选择表达式

$('#myId') //选择ID为myId的网页元素
$('ul.first') // 选择class为first的ul元素
$('input[name=first]') // 选择name属性等于first的input元素

$('a:first') //选择网页中第一个a元素
$('tr:odd') //选择表格的奇数行
$('#myForm :input') // 选择表单中的input元素
$('div:visible') //选择可见的div元素
$('div:gt(2)') // 选择所有的div元素，除了前三个
$('div:animated') // 选择当前处于动画状态的div元素

链式操作

$('div').find('h3').eq(4).html('Hello');
// 分解开来，就是 找到div元素,选择其中的h3元素,选择第5个h3元素,将它的内容改为Hello

用.end()，使结果集可以后退一步

$('div').find('h3').eq(4).html('Hello').end().eq(0).html('World');
// 设置完第5个h3元素的内容为Hello后，退回到选中所有的h3元素的那一步,选中第一个h3元素,将它的内容改为World

取值和赋值函数

.html() 取出或设置html内容

.text() 取出或设置text内容

.attr() 取出或设置某个属性的值

.width() 取出或设置某个元素的宽度

.height() 取出或设置某个元素的高度

.val() 取出某个表单元素的值