jQuery

jQuery

1、jQuery介绍

	简洁JS库，封装了JS，只有一个叫jQuery的函数，jQuery函数调用的结果是一个jQuery对象
	dom  
		选择器
		事件
		属性
		…
		
	bom 
		Ajax
		
	ES5   

jQuery特点

选择器
事件
dom操作
属性操作

2、jQuery安装

a、本地引入
	<!-- 本地引入 -->
    <!-- <script src="../jquery-3.5.1/jquery-3.5.1.js"></script> -->
    <script src="../jquery-3.5.1/jquery-3.5.1.min.js"></script>
	
b、在线引入
	bootcdn
	<!-- 在线引入 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

3、jQuery函数

jQuery库中只有一个叫做jQuery的函数，里边封装了大量的方法，供我们调用
a、如何调用jQuery函数
	jQuery()
	$()
b、jQuery函数的参数
	// jQuery 的参数
	// 1、选择器
	// $('p').css('background-color','skyblue');
	            
	// 2、参数为 HTML 片段
	console.log($('<div>番茄汤</div>'));
	
	// 3、参数dom
	console.log($(document));
	
	// 4、参数为匿名函数，当文档加载完毕再去执行
	$(
		function () {
			$('p').css('background-color','skyblue');
		}
	)
		
	类数组对象
		this、arguments、jQuery

4、jQuery对象

a、形式
	$()，类数组对象，可以调用jQuery原型中的方法
b、dom对象 ——》jQuery对象
	console.log(document);        //dom对象
	console.log($(document));     //jQuery对象
	
c、jQuery对象 ——》dom对象
	console.log($(document)[0])
	console.log($(document).get(0))

5、jQuery选择器

回顾：
	基本选择器
		标签
		id
		class
		组合
		逗号
		*
	层次选择器
		子代
		后代
	属性选择器
	伪类选择器
		：first-child
		：last-child
		：nth-child()
	伪元素选择器
		::before
		::after
jQuery：
	基本选择器：
		$(function() {
			    // 当文档加载完毕之后再去执行
			    // 1.标签选择器
			    $('p').css('color','red')
			    // 2.class选择器
			    $('.one').css('color','blue')
			    // 3.id选择器
			    $('#first').css('color','green')
		  })
	层次选择器：
		// 1.后代选择器
		$('div p').css('color','blue')
		// 2.子代选择器
		$('div > p').css('color','red')
	基本过滤器：
		// 1.:first,获取所选元素（标签）中第一个
		$('div:first').css('color','red')
		// 2.:last,获取所选元素中最后一个
		$('div:last').css('color','green')
		// 3.:even，获取到所选元素中的偶数元素
		$('div:even').css('color','blue')
		// 4.:odd,获取所选元素中的奇数元素
		$('div:odd').css('color','pink')
		// 5.:lt(index),选择小于索引值index的元素
		$('div:lt(2)').css('color','red')
		// 6.gt(index)，选择大于索引index的元素
		$('div:gt(2)').css('color','red')
		// 7.eq(index)
		$('div:eq(2)').css('color','red')
	内容过滤器：
		// 1.:contains('文本字符串'), 获取包含文本字符串的元素
		$('div:contains("衬衫")').css('color','red')
		// 2.empty,获取内容为空或者是没有子元素的元素
		$('div:empty').css({
			'height':'20px',
			'background-color':'blue'
		})
		// 3.parent,获取有内容或者有子元素的元素
		$('div:parent').css({
			'height':'20px',
			'background-color':'pink'
		})
	可见性过滤器：
		// 1.hidden,获取到页面中隐藏的元素
		console.log($('div:hidden'));
		// 2.visible,获取页面可见的所有元素
		console.log($('div:visible'));

6、事件

1）on(event, [selector], [data], fn)
2）off(event, [selector], [fn])
3）one(event, [selector], fn)
4）hover(fn1,[fn2])
event：
	click
	mouseover
	mouseout
	dblclick        双击
	
点击事件
// 1.on(event,[selector],[data],fn)
    $('.one').on('click',{id:1}, function (event) {
	// $('.one').css('color', 'green');
	console.log(event.data);    // Object
    })
    $('.one').on('mouseover', function () {
	$('.one').css('color', 'green');
    })
去掉通过on添加的事件处理程序
// 2.off(),去掉通过on添加的事件处理程序
    // $('.one').off();
    // $('.one').off('click');

事件代理
// 事件代理，将子元素上的事件处理程序，绑定到父元素上。当点击子元素的时候，触发绑定在父元素上的事件
    $('ul').on('click', 'li' ,function (event) {
          // event.target 就是我们点击的对象
          console.log(event.target);
          console.log($(this));
          // 当我点击当前元素，改变其背景色
          // $(this).css('background-color','lightblue');
          // 判断当前点击元素是否有颜色
          // hasClass 判断是否拥有某个类
          if ($(this).hasClass('color')) {
	            // 移除背景色removeClass
	            $(this).removeClass('color');
          }else{
	            // 添加当前点击元素背景色的同时移除兄弟元素的背景色
	            $(this).addClass('color').siblings().removeClass('color');
          }
    })

只能进行一次操作
// 3.one(event, [selector], fn)
    $('.one').one('click', function () {
	console.log('点击');
    })

光标移动触发事件处理程序
// 4.hover(fn1,[fn2])
    // fn1当光标移入的时候，触发的事件处理程序
    // fn2当光标移出的时候，触发的事件处理程序
    $('li').hover(function() {
          // 当光标移入的时候，背景色变成粉色
          $('li').css('background-color','pink')
    },function() {
          // 当光标移出的时候，背景色变成白色
          $('li').css('background-color','white')
    })

事件的简写形式
$('.one').click(function () {
	$('.one').css('color', 'red');
    })

7、节点操作

a、插入方法
	1）append()、appendTo()
		append 追加到元素内部
			
		// 在咖啡的后面追加拿铁（html片段）
		$('.one').append($('<div>拿铁</div>'))
		// $('<div>拿铁</div>').appendTo($('.one'))
		
	2）prepend()、prependTo()
		插入到元素之前的内部
			
		$('.two').prepend($('<div>百香果</div>'))
		// $('<div>百香果</div>').prependTo($('.two'))
	
	3）before()、insertBefore()
		插入到元素之前 外部
			
	    $('.one').before($('<div>拿铁</div>'))
	    // $('<div>百香果</div>').insertBefore($('.two'))
	    
b、包裹方法
	1）wrap
		给每一个div标签包裹一个h1标签
		$('div').wrap('<h1></h1>')
		
	2）unwrap
		删除外层包裹元素
		$('div').unwrap()
	3）wrapAll
		为所有div包裹上一个h1标签
		$('div').wrapAll('<h1></h1>')
	4）wrapInner
		为所选标签都套上了h1标签
		$('div').wrapInner('<h1></h1>')
		
c、替换方法
	replaceWith、replaceAll
	替换所选元素为其他元素
	    $('.one').replaceWith($('<h1>hello</h1>'))
	    // $('<h1>hello</h1>').replaceAll($('.one'))
	
d、移除方法
	empty
		只是清空内部标签和内容
		$('div').empty()
	remove
		$('div').remove()
	
e、克隆方法
	clone
		克隆$('.four')并且追加
		$('.four li').click(function() {
			console.log('饼干');
		})
		
		$('.four').clone(true).appendTo($('.four'))
		clone(true)
			深克隆，会克隆文本样式属性以及事件
		clone(false)
			浅克隆，只会克隆文本，样式以及属性

8、属性操作

attr
	// attr
	    console.log($('.one').attr('class'));   // one，获取类名
	    $('.one').attr('style', 'color: blue');
	    $('.one').attr({
			'style': 'color: blue',
			'style': 'background-color: pink'   // 只有最后一个有效
	    })
	
text
	获取所有所选元素中内容
	console.log($('div').text());
	

html
	获取所选元素中第一个的内容
	console.log($('div').html());
	

val
	获取表单元素的值
		val()：获取表单元素的值
		val(1230)：设置默认值
	    $('input').val('123321')  //设置默认值
	    $('button').click(function() {
		      // 获取input的内容
		      console.log($('input').val()); //获取
	    })

9、静态方法

1）each遍历
        $('li').each(function (index,item) {
            console.log(index, item);
        })
2）type 检测数据类型
        console.log($.type([1, 2]));    // array
3）param
        console.log($.param({id:1, name:'tom'}));   
        // id=1&name=tom    查询字符串