jQuery的操作

新增选择器

<script type="text/javascript">
		window.onload = function(){
			var oDiv = document.querySelector('#div1');
			alert(oDiv);//弹出[object HTMLDivElement]，表示选择了该Div

			//如果要选择多个元素用querySelectorAll
			var aLi = document.querySelectorAll('.list li');
			alert(aLi.length);//8
		}
	</script>

jQuery加载

引入jQuery库：<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
JS写法：

window.onload = function(){
			var oDiv = document.getElementById('div');
			alert(oDiv.innerHTML);//这是一个div元素
		}

jQuery的完整写法：

$(document).ready(function(){
	var $div = $('#div');
	alert('jQuery:' + $div.html());//jQuery:这是一个div元素
})

jQuery简写方式：

$(function(){
	var $div = $('#div');//CSS样式怎么写，这里就怎么写
	//html()方法相当于原生JS的innerHTML
	alert($div.html() + 'jQuery');
})

jQuery选择器

$(document) //选择整个文档对象
$(‘li’) //选择所有的li元素
$(’#myId’) //选择id为myId的网页元素
$(’.myClass’) // 选择class为myClass的元素
$(‘input[name=first]’) // 选择name属性等于first的input元素
$(’#ul1 li span’) //选择id为为ul1元素下的所有li下的span元素

对选择集进行修饰过滤(类似CSS伪类)
$(’#ul1 li:first’) //选择id为ul1元素下的第一个li
$(’#ul1 li:odd’) //选择id为ul1元素下的li的奇数行
$(’#ul1 li:eq(2)’) //选择id为ul1元素下的第3个li
$(’#ul1 li:gt(2)’) // 选择id为ul1元素下的前三个之后的li
$(’#myForm :input’) // 选择表单中的input元素
$(‘div:visible’) //选择可见的div元素

选择集转移
$(‘div’).prev(‘p’); //选择div元素前面的第一个p元素
$(‘div’).prevAll(‘p’); //选择div元素前面所有的p元素
$(‘div’).next(‘p’); //选择div元素后面的第一个p元素
$(‘div’).nextAll(‘p’); //选择div元素后面所有的p元素
$(‘div’).closest(‘form’); //选择离div最近的那个form父元素
$(‘div’).parent(); //选择div的父元素
$(‘div’).children(); //选择div的所有子元素
$(‘div’).siblings(); //选择div的同级元素
$(‘div’).find(’.myClass’); //选择div内的class等于myClass的元素

jQuery样式操作

jQuery用同一个函数即可以取值、也可以赋值：

读取样式：
alert($(’#div1’).css(‘fontSize’));

设置（写入）样式：
$(’#div1’).css({background:‘gold’});

增加行间样式：
$(’#div1’).addClass(‘big’);

减少行间样式，多个样式用空格分开：
$(’#div1’).removeClass(‘div2 big’);

绑定click事件

<script type="text/javascript">
	$(function(){
		// 给按钮绑定click事件
		$('#btn').click(function(){
			//重复切换sty样式
			$('.box').toggleClass('sty');
		})
	})
</script>

jQuery索引值

<style type="text/css">
	.list li{
		height: 30px;
		margin-bottom: 10px;
		background-color: gold;
	}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('.list li').click(function(){
			// alert(this.innerHTML);//弹出标签中的内容
			alert($(this).index());//弹出下标
		})
	})
</script>

jQuery做选项卡

<style type="text/css">
	.btns{
		width: 500px;
		height: 50px;
	}
	/*选项卡的样式*/
	.btns input{
		width: 100px;
		height: 50px;
		background-color: #ddd;/*默认灰色*/
		color: #666;
		border: 0px;
	}
	/*被选中的选项卡的样式*/
	.btns input.cur{
		background-color: gold;
	}
	/*内容区的样式*/
	.contents div{
		width: 500px;
		height: 300px;
		background-color: gold;
		display: none;/*默认隐藏*/
		line-height: 300px;
		text-align: center;
	}
	/*被选中的内容区的样式*/
	.contents div.active{
		display: block;
	}
</style>

jQuery属性操作

</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
	$(function(){
		/*
		alert($('.box').html());//这是一个div元素
		$('.box').html('<a href="http://www.baidu.com">百度网</a>');
		*/

		/*
		读写值为布尔类型的属性用prop方法
		读写值为非布尔类型的属性用attr方法
		*/

		/*
		$('.box').attr({title:'这是一个div!'});//写入title属性，并赋值
		alert($('.box').attr('class'));//读属性class的值，弹出box
		*/

		/*
		var $src = $('#img1').attr('src');
		alert($src);//img/1.png

		$('#img1').attr({
			src:'img/2.gif',
			alt:'图片二'
		});
		*/

		/*
		alert($('#check').prop('checked'));//选中为true，非选中为false
		$('#check').prop({checked:true});//设置默认勾选
		*/

		// alert($('.box2').html());//<span>这是div元素内的span</span>
		alert($('.box2').text());//这是div元素内的span
	})
</script>

jQuery特殊效果

<style type="text/css">
	.box{
		width: 200px;
		height: 200px;
		background-color: gold;
		display: none;
	}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('#btn').click(function(){
			// $('.box').fadeOut();//淡出
			// $('.box').fadeIn();//淡入
			// $('.box').fadeToggle();//切换淡入淡出
			// $('.box').toggle();//切换显示隐藏
			$('.box').slideToggle();//切换上收和下展
		})
	})
</script>


<body>
	<input type="button" name="" value="效果" id="btn">
	<div class="box"></div>
</body>