jquery的初次学习

jquery的初次学习

学习目的：jquery用法，入口函数，css，html，选择器，索引值下标，控制类名，例子
jquery只要就是学方法的使用 function_name()执行

原生js->javascript

封装好了各种js函数的库 jquery，vue 写代码实现功能时直接调用就OK，底层都是JavaScript，总的来说，就是写的少做的多效果好支持链式编程

jquery函数库就是一个外链的js文件，几百kb，9000多行，写html的时候外链引入

国内开发用jquery 1 版本，因为2，3不兼容低版本浏览器，带mini的名称吧呢本是压缩过的jq，不换行，大概90kb，相比原生200多kb，节省空间

1.用法

第一步先引包

<script src="jQuert/jquery-1.12.4.mini.js"></script>

<script>
//自己的jq
//入口函数$()
$(document).ready(function(){
	alert(1)
})//当网页文档准备好之后要执行...命令；同时也是jq事件的语法
</script>

第二步jq入口函数:$()还做了封闭函数的功能
$(目标) 是jq的选择函数：查找功能相当于js的document.getElementById(’’)
jq的语法：目标.事件属性（匿名函数）还有一个化简的写法
$(function(){alert(2)})

2.jq和原生js的对比

按钮控制div隐藏demo

js:

window.onload = function(){
	var oButton = document.getElementById('btn')
	var oBox  = document.getElementById('box')
	oButton.onclick = function(){
		oBox.style.display = 'none'
	}
}

jq:

$(function(){
	$('#btn').click(function(){
		$('div').hide(500)//隐藏动画效果
		$('div').show(500)//显示动画效果
		$('div').toggle(500)//集合隐藏显示，如果隐藏点一下就显示，如果显示点一下就隐藏
	})
})

jq中选择器分为两大类：和css一样的选择器(标签,类.,id#,层 ,集合’,’, )，第二种就是自己新增的选择器

jq中的事件和js差不多一样，去掉on就行

3.jq控制html和css

html() 如果写参数表示修改，不写参数表示访问

$(function(){
	//内容 html() 如果写参数表示修改，不写参数表示访问
	$('div').html('<p>aaaa</p>')
})

控制css css() 有两种方法，单属性操作和多属性操作

1.单属性：可控制可访问,控制一个是key第二个是value，如果只写一个参数就是访问 css(key,value)；

$('div').css('color','red')
alert($('div').css('color'))

2.多属性，一次控制多个css键值对，用字典的形式css({key:value,key:value}) css的多属性只能修改不能访问

$('div').css({'color':'red','font-size':'60px'})

4.jquery选择器

一类同css选择器一样，另一类在下面：

$('li[id=box]').css(key,value)属性=值
$('li').not('.box').css(key,value) .not()排除
$('li:first').css(key,value) 第一个
$('li:last').css(key,value) 最后一个
:eq(下标) .eq() 选中下标等于某个数字的标签 equal等于
.prev()前一个
.prevAll()前面所有
.next() 后边一个
.nextall() 后边所有
上边这些叫做选择集转移，不查找本身这个

.has() 是父集执行命令
.find() 是找到的对象,子集执行命令

总的来说就是 $().匹配规则

如果不知道选择的哪个，可以用console.log()打印一下

.siblings()兄弟选择器 排他思想

this表示目前操作的标签 支持链式编程，就是·车头·只写一次

$(this).css(key,value).siblings.css(key,value)
//链式编程，链式调用，用火车比喻?

this相当于原生js getElementById获取的对象，$(this)相当于jq选择器封装的对象，有更多的操作方法

怎么实现链式编程？：

因为jq的css方法会返回this，所以可以继续使用

function css(){
	xxx
	
	return this//把this返回了，所以之后可以继续调用
}

.parent() 父集选择器

//广告隐藏
$(function(){
	$('span').click(function(){
		$(this).parent().hide(500)
	})
})

.children()子集选择器

清除动画排队机制，在形成动画函数之前加stop()

//二级菜单的显示,隐藏
$('.nav li').mouseover(function(){
	$(this).children('ul').stop().show()
})

$('.nav li').mouseout(function(){
	$(this).children('ul').stop().hide()
})

5.index方法获取元素的下标

$(function(){
	$('li').click(function(){
		alert($(this).index())
	})
})

6.添加删除类addClass(),removeClass(),toggleClass()

删除是删除类的值，因为标签可以同时有多个类名，removecalss如果不写参数是所有的类名都删除
toggle切换类

$(function(){
	$('button').click(function(){
		$('div').addClass('class_name1 class_name2 class_name3')//添加类名
		$('div').addclass('class_name1 class_name2')//删除类名
		$('div').toggleClass('class_name1 class_name2')//切换类名
		
	})
})

小demo tab选项卡