jQuery基础学习笔记（一）

JQuery的基础知识（一）

一.加载jQuery

先在vscode中新建路径，再创建文件。把jquery拖进目录中，在网页中根据
简单导用方法：

二.原生js --> jQuery

var div3 = document.getElementById("test1")
$(div3).html('北京')

三.jQuery --> 原生js

var div2 = $('.cls')
div2[0].innerHTML = "广东省"

四.选择器过滤:对选择器取到的标签 进行条件过滤，取到的标签就是目标标签

（条件取反，匹配子标签，匹配索引，获取索引）

//条件取反
$('div').not('#box').html('哈哈')

//匹配子标签
$('div').has('a').html('mmmmm')

//匹配索引
.eq(同级同样的标签中的索引位置)

//获取的是同级标签中的位置，不区分标签类型
alert($('div').has('a').index())

五.选择器转移:基于选择器取到的标签，查询目标标签，取到的标签不是目标标签

//取前一个
$('#li3').prev().html('哈哈')

//取后一个
$('#li3').next().html('呵呵')

//取所有的子标签
$('ul').children().html('1111')

//取父标签
$('li').parent().html('321')

//取其他的同级标签
$('#li3').siblings().html('321')

//取满足条件的子标签
1.用条件过滤
$('ul').children().eq(0).html('xixi')
2.用find
$('ul').find('#li3').html("吼吼")

六.绑定事件

//jQuery添加事件
$('#li3').click(function (){
	alert('点击')
	// 将原生js对象包装为jQuery对象
	$(this).html('。。。。。')
})

七.样式操作

//用jQuery设置样式
$('#box').css({backgroundColor: 'yellow', width: '100px', height: '100px'})

//添加类
$('#box').addClass('bg')
//删除类
$('#box').removeClass('bg')
//切换类
$('#box').click(function (){
	//切换 添加类/删除类
	$('#box').toggleClass('bg')
})

八.动画

//jQuery实现动画 animate({动画属性}, 动画时长, 动画类型, 完成回调)
//动画类型 liner 匀速动画 swing 缓冲动画 慢->快->慢
$('#box1').animate({width: '500px'}, 3000, "linear", function(){
	alert('动画结束')
})

九.特殊效果

// 显示 隐藏
.hide()
.show()
// 切换
.toggle()

// 渐隐渐现
.fadeOut()
.fadeIn()

// 切换
.fadeToggle()

// 展开 折叠
.slideDown()
.slideUp()

//切换
.slideToggle()

十.层级菜单

$('.level1').click(function (){
					$(this).next().slideToggle().parent().siblings().find('ul').slideUp()
			})
		})

十一.节点操作(DOM操作)

// DOM数指的就是html的结构
// 设置标签的内容 传参就是设置，不传参就是取值
$('#box').html('xxx')
// 设置标签的属性
例如：$('input').prop("type", "button")
		$('input').val('666')
// 设置自定义属性
	attr，用法同prop