一.选择器
1.基本选择器
$('#box li:odd').css('background','gray');// id选择器设置样式
$('#box').find('li:odd').css('background','gray');// 查找ul里面的奇数行变色
$('#box li:even').css('background','green');// 查找ul里面的偶数行变色
$('#box').find('li:even').css('background','gray');// 查找ul里面的偶数行变色
$('#box').children('ul').css('background','gray'); //查找ul里面所有子元素
2.层次选择器：
$('one').filter('p') // 找到 类名为one的p标签
$('#one span').css('display','block');//子孙后代，所有的span都被选中
$('#one>span').css('display','block');//子代选择器，第一层元素，span1被选中
$('#one + div').css('display','block');//找下一个兄弟节点，找到的是单个的
$('#one ~ div').css('display','block');//下面所有的兄弟节点，所有的弟弟（多个）
$('#one').siblings().css('display','block');//所有的兄弟节点（偶数）
$('#one').children().css('display','block');//#one>span所有的子代节点，子代集合
$('.s1').parent().css('display','block');//查找父节点 ，单数
$('.s1').parents() // 祖先节点 ，直到元素为止
$('#one').has('span') // 找包含有p标签的div
$('one').index() // 获取one的索引
$('li').html(’123‘) // 设置所以li的值为123
$('li').html() // 获取第一个li的值，包括标签
$('div').next() // 查找下面所有下面所有div的兄弟节点，获取和设置纯文本包括标签也能获取
$('div[id]') // 查找所有id的div标签
$(':input') // 查找所以Text表单
$(':reset') // 查找所以重置表单
3.内容过滤器：
$('div:contains("c")').css('color','red');包含有c的div被选 中
$('div:empty').css('display','block');//查找有的为空（也不包括文本节点）的节点
$('div:parent').css('display','block');//查找所有含有子元素或者文本节点的节点
4.DOM的操作：
$('p').attr('title'); // 获取p标签的title值
alert($('p').attr('title'));
$('p').attr('title','选择你最喜欢的蛋糕');
alert($('p').attr('title')); //可以设置多个属性值
$('p').removeAttr('title'); // 移除某个元素的属性值 相当于删除
$('p').addClass('p'); //在p标签添加一个名字为b的类名
$('p').removeClass('p'); // 在p标签删除一个名字为b的类名，但类名还在
$('p').removeAttr('class');//移除某个元素的属性值 相当于删除
5.DOM的增删改查：
$li1=$('雪梨'); //创建节点
$('ul').append($li1); // 插入节点
$li2=$('西瓜');//创建节点
$li2.appendTo($('ul'))’// 插入节点
两者关系：后续操作不一样
$li3=$('香蕉'); //创建节点
$('ul').prepend($li3); // 从前面插入节点
$('ul').find('li').eq(0).remove(); // 删除节点
$('ul li:eq(0)').remove();// 删除节点 index下标从0开始
$('ul').find('li').eq(1).empty(); // 清空节点 里面的内容，不是li
$('ul li:eq(0)')clone().appendTo // 复制节点，复制完一定要插入
//size() // 相当于js的 length ;
例子：jq方法选项卡
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
#ul{width: 220px;height: 30px;cursor: pointer;}
#ul li{float: left;line-height: 30px;padding-left:
10px;padding-right: 10px;}
.con{width: 206px;height: 100px;border: 1px solid
greenyellow;display: none;}
.active{background: greenyellow;}
style>
<script src="../js/jquery.min.js" type="text/javascript"
charset="utf-8">script>
<script type="text/javascript">
$(function(){
$('#ul>li').mouseover(function(){
$('#ul>li').attr('class','');
样式
$(this).attr('class','active');
li变色
$('#div>div').css('display','none');
$('#div>div').eq($(this).index()).css
('display','block');
});
});
script>
head>
<body>
<div id="box">
<ul id="ul">
<li class="active"><a href="javascript:">a>国事li>
<li><a href="javascript:">a>社会li>
<li><a href="javascript:">a>娱乐li>
<li><a href="javascript:">a>科技li>
ul>
<div id="div">
<div class="con" style="display: block;">
国事
div>
<div class="con">
社会
div>
<div class="con">
娱乐
div>
<div class="con">
科技
div>
div>
div>
body>
html>
二.事件和特效集合
1.position的使用：
//alert($('#div2').offset().left); //获取到屏幕的左距离
//alert($('#div2').position().left);//到有定位的父级的left值
2.slideDown和slideDown
作用：让元素以上拉动画效果隐藏起来
//$('#btn').click(function(){
//$('#div').slideDown(2000,function(){
//$('#div').slideUp(2000);
// });
// $('#btn').click(function(){
// $('#div').slideDown(400)// 参数：时长
3.on与off
$('div').on('click mouseover',function(){ // on 绑定事件，如果没有使用off，每次鼠标移入都会弹出一次
alert(3645);
$('div').off('mouseover'); // 当off关闭绑定了事件，鼠标移入只弹出一次，再次鼠标移入不会再弹出
});
### 4.animate()
// 第一个参数表示：要执行动画的CSS属性（必选）
// 第二个参数表示：执行动画时长（可选）
// 第三个参数表示：动画执行完后立即执行的回调函数（可选）
//.delay(1000) 延迟（秒数）
// stop() // 停止当前的运动属性
// stop(true) // 停止所有运动
// stop(true，true) // 当前的运动属性马上到达目标后停止
// finish() // 所以的运动属性马上到达目标后停止
5.
// ev.preventDefault() //阻止默认事件
// ev.stopPropagation() //阻止冒泡
// return false; //阻止默认事件+阻止冒泡
6.show（）与hide（）
$('#btn').click(function(){
$('#div').show(1000,function(){ //显示
$('#div').hide(2000); // 隐藏
});
});
7.fadeIn()和fadeOut()
作用：让元素以淡淡的进入视线的方式展示出来
$('#btn1').hover(function(){
$('#div2').fadeIn(1000); //淡出
},function(){
$('#div2').fadeOut(1000); // 淡入
});
例：jq版回到顶部
首要：把jq压缩版文件导入
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
*{margin: 0;padding: 0;}
#box{width: 800px;height: 3000px;margin: 0
auto;background: #888;}
#backTop{width: 50px;height:
50px;background:red;position: fixed;right: 50px;bottom: 50px;display:
none;cursor: pointer;}
style>
<script src="../js/jquery.min.js" type="text/javascript"
charset="utf-8">script>
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
var sTop = $(window).scrollTop();
if(sTop>500){
$('#backTop').fadeIn(500);
}else if(sTop<500){
$('#backTop').fadeOut(500);
}
})
$("#backTop").click(function(){
$('html , body').animate({scrollTop:
0},'600','linear');
});
})
script>
head>
<body>
<div id="box">
<div id="backTop">div>
div>
body>
html>
