2020-12-22

JS与jQuey

在学习js的时候就像在面对一堆蚂蚁，每个知识点、每个步骤都很简单，但是架不住多啊。大量重复且简单的事情无疑会造成效率的低下，为了提高工作效率以及解决js中的一些弊端，就出现了第三方封装库，脱颖而出的是jQuery，也是本文的介绍对象。
使用jQuery要导包，代码中的操作：

<script src="./js/jquery-3.1.1.js"></script>
如果在使用时没有导，控制台就会报错。

jQuery里获取对象：

		// 与css中的选择器类似：
		let $btns1 = $('button');
		let $btns2 = $('.btn');
		// 获取除了“submit”以外的
		let $inNodes = $('input:not([type="submit"])');
		获取奇数的（2n是偶数）
		let $btns3 = $('button:nth-of-type(2n+1)');
		
		//eq 后边的数字是下标
		$('button:eq(0)').click(function(){
		alert($(this).html());
		})
		//gt 获取大于的数值
		$('button:gt(0)').click(function(){
		alert("哈哈哈");
		})
		// lt 获取小于下标数值的对象
		$('button:lt(1)').click(function(){
		alert("heiehiehi");
		})

获取及修改元素的值：

		//得到匹配元素集合中每个元素的合并文本，包括他们的后代
		//console.log($('p').text());
		console.log($('p').text('哈哈哈'));
		
		//获取集合中第一个匹配元素的HTML内容 
		//console.log($('p').html());
		//console.log($('p').html('嘿嘿嘿'));
		
		//获取匹配的元素集合中第一个元素的当前值
		//console.log($('input').val());
		//将修改集合中每个元素的值
		//$('input').val("呵呵");

jQuery和js对象之间的转换：

jQuery对象只能使用jQuery中提供的函数或属性，同样的jQuery中的属性或函数只能由jQuery对象调用
JS对象只能使用JS中提供的函数或属性，同样的JS中的属性或函数只能由JS对象进行调用

	// 使用jQuery获取对象
    var $btn = $('button');
    //将jQuery对象转换为js对象
    var btn = $btn[0];
    var btn = $btn.get(0); 
    btn.onclick = function(){
    //将js对象转换为jQuery对象 this是js对象 $(js对象)
    console.log($(this).html());
}

未完、、、、、