1.首先引入jquery,然后声明jQuery入口函数,
<script>
$(function() {})
</script>
jQuery入口函数和js入口函数的区别:
一:声明方式不同,jQuery的入口函数是用${function(){}}方式声明的,而js的入口函数是用 window.onload() = function(){}方式声明;
二:jQuery的入口函数可以重复使用多次,不会存在后面覆盖前面的问题;而js的入口函数只能声明一次,如果声明多次,
后面的就会覆盖前面的;
三:js的入口函数是等到网页都加载完成之后,才执行入口函数里面的内容,而jQuery是等DOM元素加载完成之后才执行入口函数里面的内容;
2.jquery选择器:
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li id="id8">8</li>
<li id="id7">9</li>
</ul>
<script>
$(function() {
console.log($('#id8'));
})
</script>
</body>
通过id选择器选中第8个li,打印出来,是一个jquery类型的对象,jquery类型的对象和DOM类型的对象不一样,jquery类型的对象不能使用
DOM类型对象的一些属性,例如innerHTML属性,jquery类型的对象有自己的属性,一般是方法,jquery类型的对象和DOM类型的对象相互转换:
$(function() {
console.log($('#id8'));
console.log($('#id8').innerHTML = 333); //不报错,会打印出来,但是不起作用
// jquery类型的对象转换成DOM类型的对象
console.log($('#id8')[0]);
console.log($('#id8')[0].innerHTML = 444); //起作用,第8个li改变成了444
})
<script>
$(function() {
//将DOM类型的对象转换成jquery类型的对象
console.log($(document.querySelector('#id8')));
})
</script>
$(function() {
//id选择器
console.log($('#id8'));
//类选择器
console.log($('.li7'));
//标签选择器
console.log($('li'));
//并集选择器
console.log($('ul,li')); //获取所有的ul,li元素
//交集选择器
console.log($('div.redClass')); //class为redClass的div元素,注意区分后代选择器
//子代选择器
console.log($('ul>li')); //获取儿子层级的元素
//后代选择器
console.log($('ul li')); //使用空格,代表后代选择器,获取ul下面的所有li元素
})
$(function() {
//过滤选择器
$('li:eq(2)').css('color', 'red') //选中li下索引为2的元素
$('li:odd').css('color', 'blue') //选中li下单数的元素
$('li:even').css('color','red') //选中li下双数的元素
})
$(function() {
//筛选选择器
//children(selector)
$('ul').children('li') //相等于$('ul>li'),子类选择器
//find(selector)
$('ul').find('li') //相等于$('ul li'),后代选择器
//siblings(selector) 查找兄弟节点
$('#id8').siblings('li')
//parent() 查找父亲
$('#id8').parent();
//eq(index) 查找索引为index的元素
$('li').eq(2)
//next() 找上一个兄弟
$('li').next()
//prev() 找上一个兄弟
$('li').prev()
//index() 获取当前的位置索引
$('#id8').index()
//not() 除了
$('li').not('#id8') //除了id为id8的其他li元素
})
3.jquery事件
3.1语法
单击事件:
$('button').click(function(){})
单击事件用click,不用onclick;click是一个方法,不是属性,直接()调用,
点击自己颜色变红,其他颜色不变的效果;
<button>点我</button>
<button>点我</button>
<button>点我</button>
<button>点我</button>
<button>点我</button>
<button>点我</button>
<button>点我</button>
<button>点我</button>
<script>
$(function() {
$('button').click(function() {
$('button').css('color', 'black');
console.log(this);
$(this).css("color", "red"); //这里面的this不加引号
})
})
</script>
//双击事件
$('button').dblclick(function(){})
//鼠标移入
$('button').mouseover(function(){})
$('button').mouseover(function(){})
//鼠标移出
$('button').mouseleave(function(){})
$('button').mouseout(function(){})
//获取焦点
$('button').focus(function(){})
//失去焦点
$('button').blur(function(){})
4.jQuery css()方法
4.1获取属性
<ul>
<li id="id1">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<script>
$(function() {
console.log($('#id1').css('font-size')); //14px
})
</script>
4.2 设置css属性
<ul>
<li id="id1">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<script>
$(function() {
console.log($('#id1').css('background-color', 'red'));
})
</script>
4.3 设置多个css属性
$(function() {
console.log($('#id1').css({
'background-color': 'red',
'color': 'blue',
'font-size': '20px'
}));
})
5.jQuery css类
5.1 addClass()
向被选元素添加一个或多个类
<style>
.red {
color: red;
}
.bcc {
background-color: brown;
}
</style>
</head>
<body>
<ul>
<button>点我改变样式</button>
<li id="id1">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<script>
$(function() {
$('button').click(function() {
$('#id1').addClass('red');
$('#id1').addClass('bcc')
})
})
</script>
5.2 removeClass() 从被选元素中删除一个或多个类
$(function() {
$('button').click(function() {
$('#id1').addClass('red');
$('#id1').addClass('bcc')
$('#id1').removeClass('bcc')
})
})
</script>
5.3 toggleClass() 对被选元素进行添加/删除类的切换操作
每点击一次按钮,背景色就切换一次案例
<style>
div {
height: 1000px;
background-color: white;
}
.Bla {
background-color: black;
}
</style>
</head>
<body>
<button>点我</button>
<div></div>
<script>
$(function() {
$('button').click(function() {
$('div').toggleClass('Bla')
})
})
</script>
5.4 eq() 方法返回带有被选元素的指定索引号的元素
5.5 index() 方法返回指定元素相对于其他同级元素的index位置;
<ul>
<button>点我改变样式</button>
<li id="id1">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<script>
$(function() {
$('button').click(function() {
console.log($(this).index()); //返回0
})
})
</script>
5.6 not() 方法返回指定元素之外的元素
6.jQuery动画
6.1 jQuery隐藏显示:hide()和show()方法可以用来隐藏和显示HTML元素
<ul>
<button>点我显示</button>
<button>点我隐藏</button>
<li id="id1">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<script>
$(function() {
$('button:eq(0)').click(function() {
$('#id1').show()
});
$('button:eq(1)').click(function() {
$('#id1').hide()
})
})
</script>
6.2 jquery淡入淡出效果
fadeIn() 方法用于淡入以隐藏的元素,fadeOut()方法淡出可见元素,里面可以传递参数:’slow‘缓慢淡入,淡出,
'fast',
也可以传时间,表示多长时间完成事件;
<button>点我淡入显示</button>
<button>点我淡出隐藏</button>
<div id='id1'></div>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<script>
$(function() {
$('button:eq(0)').click(function() {
// $('#id1').fadeIn();
// $('#id1').fadeIn('slow');
$('#id1').fadeIn(3000);
});
$('button:eq(1)').click(function() {
// $('#id1').fadeOut();
// $('#id1').fadeOut('slow');
$('#id1').fadeOut(3000);
})
})
6.3 fadeToggle()方法可以在fageIn()方法之间进行切换
6.4 fadeTo()方法允许渐变为给定的不诱明度
6.5 slideDown()方法用于向下滑动元素,slideUp()方法用于向上滑动元素;
<button>点我下滑</button>
<button>点我上滑</button>
<div id='id1'></div>
<script>
$(function() {
$('button:eq(0)').click(function() {
$('#id1').slideDown();
});
$('button:eq(1)').click(function() {
$('#id1').slideUp();
})
})
</script>
6.6 自定义动画:
animate()方法用于创建自己自定义动画,可选的speed参数规定时长,它可以取以下值:'slow','fast'或者毫秒,
可选的callback是一个回调函数,动画完成之后才执行。animate方法参数有三个:一个要给动画的对象;
一个时间;一个回调函数;