第六章 jQuery
-
-
它通过易于使用的API在大量浏览器中运行，
-
使得HTML文档遍历和操作，事件处理，动画和Ajax变得更加简单。通过多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。
-
操作: 获取节点元素对象，属性操作，样式操作，类名，节点的创建，删除，添加，替换
-
开发环境：写项目
-
生产环境：项目写完后，压缩代码
write less,do more
$('button')[0]
$(js节点对象)
6.5 jq的选择器
-
基础选择器
-
-
类用 .
-
<body>
<div id="box" class="box">
<p class="active">mjj1</p>
<p class="active">mjj2</p>
<input type="text">
</div>
<!-- 1.导入模块 -->
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// console.dir($);
// 选择器 基础选择器
console.log($('.box'));//jquery对象 伪数组
// jquery对象转换js节点对象
console.log($('#box')[0]);
// js节点对象转换jq对象
var box = document.getElementById('box');
console.log($(box),box);
console.log($('#box>p'));-->打印子代
console.log($('input[type=submit]'));
#打印时出现prevobject是指没有获取到对象
#绑定事件
$('#box .active').click(function(){
// 样式操作
console.log(this);-this指的是当前的js节点对象
// this.style
// 设置单个样式属性
// $(this).css('color','red');
// $(this).css('fontSize','20px');#转jquery对象
// 设置多个属性
$(this).css({
'color':'red',
"font-size":40
})
console.log($(this).css('color'));--获取
})
- 高端选择器
<div id='box' class='box'>
<p>
mjj
</p>
</div>
$('#box') -id
$('.box') -class
$('div p')
$('div>p')
$('div,p')
$('div.box')
- 属性选择器
<input type = 'submit' value='提交'>
$('input[type=submit]')
- 基本过滤选择器
:eq(index) 选择一个 索引从0开始
:gt(index) 大于索引的元素都选择出来了，
:lt(index) 小于索引的元素都选择出来了
:first 获取第一个
:last 获取最后一个
:odd 获取奇数
:even 获取偶数
- 筛选选择器
.find() 即选择儿子也选择后代 .children() 只选择亲儿子 .parent() 选择父亲 .siblings() 查找所有的兄弟元素 //补充：获取文档,body和html console.log(document); console.log(document.body); console.log(document.documentElement);
- 过滤的方法
.eq() 选择一个 索引从0开始,(索引)
.children() 获取亲儿子
.find() 获取的后代
.parent() 获取父级对象
.siblings() 获取除它之外的兄弟元素
<body>
<button id="btn">显示</button>
<div id="box"></div>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('#btn').click(function(){
if($(this).text() === '显示'){
$('#box').show(1000,function(){
$('#btn').text('隐藏');
});
}else{
$('#box').hide(1000,function(){
$('#btn').text('显示');
});
}
//先停止掉在开就正常了
$('#box').stop().toggle(2000);
$('#box').slideDown(2000);
$('#box').fadeIn(2000);
})
</script>
</body>
-
卷帘门动画 slideDown() slideUp() slideToggle()
-
淡入淡出效果 fadeIn() fadeOut() fadeToggle()
-
自定义动画 .animate({params},speed,callback)
6.7 样式操作
通过调用.css()方法 如果传入一个参数，看一下这个参数如果是一个字符串表示获取值，如果是对象，表示设置多少属性值，如果是两个参数，设置单个属性值
css('字符串');--获取属性
css({'color':'red'});既可以设置一个属性也可以设置多个属性
css('color','yellow');设置一个属性
addClass() removeClass() toggleClass()
addClass('active abc rtt');--追加类名，原来的还存在
removeClass('active abc');移除一个或多个
toggleClass('active');开关似的切换类名
6.9对属性操作
attr(name,value);//设置属性 removeAttr(name);//删除属性
attr();获取的是标签上的属性 removeAttr(); prop();获取的是当前节点对象的属性 单选操作 removeProp(); $(function(){ //添加一个或者多个属性 $('p').attr('title','mjj');//添加一个 $('p').attr({'a':1,'b':2});//添加多个 console.log($('p').attr('id'));//获取值 //移除多个或一个 $('p').removeAttr('title id a'); }) prop();用在input上 removeProp();用在input上
//后置追加 父元素.append(子元素);//子元素可以是文本、标签、js对象，append()如果参数是jq对象,那么相当于移动操作 子元素.appendto(父元素); // 子.appendTo(父) $('<a href="#">百度一下</a>').appendTo('#box').css('color','yellow');//***** // 前置追加 $('#box').prepend('<p>hello world</p>'); // 子.prependTo(父) $('参考的元素').before('要添加的元素');在h2前面追加 $('<h3>女神</h3>').insertBefore('h2'); $('要插入的元素').insertBefore('参考元素'); after(); insrrtAfer();
- 文档的删
$('#btn').click(function(){
alert(1);
// remove即移除标签,事件也跟着移除
/* $(this).remove();//****
// console.log($(this).remove());
$('#box').after($(this).remove()); */
// $(this).detach();只是移除节点，事件还保留 // $('#box').after($(this).detach());
// $('#box').html(' ');--清空
$('#box').empty();--清空
})
- 文档的替换
$('h3').replaceWith('000000');
replaceAll() 替换所有
- 文档的查
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="box">
<h4>太白</h4>
</div>
<button id="btn">按钮</button>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var oH3 = document.createElement('h3');
oH3.innerText = '女神';
// 父.append(子)
$('#box').append('mjj');
$('#box').append('<h2>wusir</h2>');//*****
$('#box').append(oH3);
// append()如果参数是jq对象,那么相当于移动操作
$('#box').append($('h4'));
$('h2').css('color','red');
// 子.appendTo(父)
$('<a href="#">百度一下</a>').appendTo('#box').css('color','yellow');//*****
// 前置追加
$('#box').prepend('<p>hello world</p>');
// 子.prependTo(父)
$('h2').before('mjj2');
$('<h3>女神</h3>').insertBefore('h2');
$('h3').replaceWith('000000');
$('#btn').click(function(){
alert(1);
// 即移除标签,事件也跟着移除
/* $(this).remove();//****
// console.log($(this).remove());
$('#box').after($(this).remove()); */
// $(this).detach();
// $('#box').after($(this).detach());
// $('#box').html(' ');
$('#box').empty();
})
})
</script>
</body>
.click();//鼠标单击事件，参数可选（data，fn） dblclick();//双击触发， jqury解决单双击的冲突问题，setTimeout() mousedown()/up();//鼠标按下/弹起触发事件 mousemove();//鼠标移动事件 mouseover()/out();//鼠标进入/立刻触发事件--鼠标指针穿过/离开被选元素或者当前元素的子元素，会触发事件 mouseenter()/leave();//鼠标进入/离开触发事件--鼠标指针只在穿过/离开被选元素 focus()/blur();//鼠标聚焦/失去焦点触发事件（不支持冒泡） keydown()/up;//键盘按键按下/弹起触发
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width: 100px;
height: 40px;
background-color: red;
position: relative;
}
#child{
width: 400px;
height: 100px;
background-color: #000;
position: absolute;
top: 40px;
display: none;
}
</style>
</head>
<body>
<div id="box">
<div id="child"></div>
</div>
<input type="text">
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// mouseover 鼠标穿过父级元素和子元素都会调用方法
/* $('#box').mouseover(function(){
console.log('移入进来了');
$('#child').slideDown(1000);
})
$('#box').mouseout(function(){
console.log('移除了');
$('#child').slideUp(1000);
}) */
/* $('#box').mouseenter(function(){
console.log('进来了');
$('#child').stop().slideDown(1000);
})
$('#box').mouseleave(function(){
console.log('离开了');
$('#child').stop().slideUp(1000);
}) */
$('#box').hover(function(){
$('#child').stop().slideDown(1000);
},function(){
$('#child').stop().slideUp(1000);
})
//默认加载页面聚焦行为
/* $('input[type=text]').focus();
$('input[type=text]').focus(function(){
//聚焦
console.log('聚焦了');
})
$('input[type=text]').blur(function(){
//聚焦
console.log('失去焦点了');
})
*/
$('input[type=text]').keydown(function(e){
console.log(e.keyCode);//keyCode键盘码
switch (e.keyCode){
case 8://等于8的时候清空，8是回车
$(this).val(' ')
break;
default:
break;
}
})
change();//表单元素发生改变时触发事件（此事件仅限于<input>元素，<textarea>框和<select>元素 select();//此事件仅限于input type类型为text和textarea表单元素 submit();//表单元素发生改变时触发事件（form表单有默认的submit行为，当对input type=submit按钮点击的时候会触发form的默认action，
此时可以调用jQuery的submit方法通过e.preventDefault()来阻止默认事件 javascript:void(0);//阻止默认事件 <a href="javascript:;">百度游戏啊</a> //阻止默认事件 e.preventDefault();//阻止默认事件
<body>
<a href="javascript:;">百度游戏啊</a>
<form action="">
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">
<input type="submit">
</form>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('form').submit(function(e){
e.preventDefault();
console.log('11111');
})
</script>
<audio src="static/海贼王%20-%20ビンクスの酒(独唱).mp3" controls="">
</audio>
<canvas id="" width="" height=""></canvas>
浙公网安备 33010602011771号