<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ width: 100px; height: 100px; border: 1px solid red; display: none; } </style> </head> <body> <div id="box"> </div> <button id="btn">隐藏</button> </body> <script src="jquery-3.2.1.js"></script> <script type="text/javascript"> //.css // $('#btn').click(function(){ // $('#box').css('display','block'); // }) //jquery 提供了一些方法 show() hide() 控制元素显示隐藏 var isShow = true; /* $('#btn').click(function(){ if(isShow){ $('#box').show('slow',function(){ // alert(111); $(this).text('盒子出来了'); isShow = false; $('#btn').text('显示'); }) }else{ $('#box').hide(2000,function(){ // alert(111); $(this).text(' '); isShow = true; $('#btn').text('隐藏'); }) } }) */ //toggle 开关 如果元素显示则隐藏 ，反之亦然 $('#btn').click(function(){ $('#box').toggle(3000,function(){ alert(111); }); }) </script> </html>
上一段代码是展示标签的隐藏或者展示
slideToggle
概念:通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数
跟toggle用法类似
show
概念:显示隐藏的匹配元素 语法：show(speed,callback) 参数：
- speed：三种预定速度之一的字符串('slow','normal','fast')或表示动画时长的毫秒值（如：1000毫秒==1秒）
- callback:在动画完成时执行的函数，每个元素执行一次
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ width: 100px; height: 100px; border: 1px solid red; display: none; } </style> </head> <body> <div id="box"> </div> <button id="btn">隐藏</button> </body> <script src="jquery-3.2.1.js"></script> <script type="text/javascript"> $(function(){ /* $('#btn').hover(function(){ $('#box').slideDown(2000); },function(){ $('#box').slideUp(2000); }) */ $('#btn').click(function(){ $('#box').slideToggle('fast'); }) }) </script> </html>
右下角弹出小广告：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> </style> </head> <body> <div id="box" style=" 330px;height: 480px;position: absolute;right: 10px;bottom: 0;display: none;"> <img src="广告.png" style=" 100%;height: 100%;"/> </div> </body> <script src="jquery-3.2.1.js"></script> <script type="text/javascript"> $(function(){ $('#box').slideDown('normal').slideUp('fast').fadeIn(1000).click(function(){ $(this).fadeOut(1000); }) }) </script> </html>
jquery的属性操作
jquery对象有它自己的属性和方法，我们先研究一下jquery的属性操作。
jquery的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作
html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr() DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp() 类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass() 值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()
attr
概念：设置属性值或者 返回被选元素的属性值
//获取值：attr()设置一个属性值的时候 只是获取值
var id = $('div').attr('id')
console.log(id)
var cla = $('div').attr('class')
console.log(cla)
//设置值
//1.设置一个值 设置div的class为box
$('div').attr('class','box')
//2.设置多个值，参数为对象，键值对存储
$('div').attr({name:'hahaha',class:'happy'})
removeAttr
从每一个匹配的元素中删除一个属性
prop
prop()获取在匹配的元素集中的第一个元素的属性值.它是对当前匹配到的dom对象设置属性。
removeProp
用来删除由.prop()方法设置的属性集
addClass（添加多个类名）
为每个匹配的元素添加指定的类名。
$('div').addClass("box"):添加一个类名
$('div').addClass("box box2"):添加多个类名
removeClass
从所有匹配的元素中删除全部或者指定的类。
$('div').removeClass('box')移除指定的类
$('div').removeClass()移除全部的类
var tag = false;
$('span').click(function(){
if(tag){
$('span').removeClass('active')
tag=false;
}else{
$('span').addClass('active')
tag=true;
}
})
toggleClass
如果存在（不存在）就删除（添加）一个类。
语法：toggleClass('box')
$('span').click(function(){
//动态的切换class类名为active
$(this).toggleClass('active')
})
html
获取值：
html() 是获取选中标签元素中所有的内容
设置值：设置该元素的所有内容 会替换掉 标签中原来的内容
$('ul').html('<a href="#">百度一下</a>')
//可以使用函数来设置所有匹配元素的内容
$('ul').html(function(){
return '哈哈哈'
})
text
获取值：
text() 获取匹配元素包含的文本内容
设置值：
设置该所有的文本内容
注意：值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中
val
获取值：
val()用于表单控件中获取值，比如input textarea select等等
设置值：
$('input').val('设置了表单控件中的值')
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> span.active{ font-size: 30px; } </style> </head> <body> <div id="box"> <p>火影忍者</p> </div> <button>获取</button> <ul> <li class="luffy">鸣人</li> <li class="luffy2">鸣人</li> <li class="luffy3">鸣人</li> <li class="luffy4">鸣人</li> </ul> <span class="span1"> 鸣人吧！！！ </span> <div id="box2"> 哈哈 <p>我是一个段落</p> <a href="">百度一下</a> <input type="text" value="嘿嘿" name=""/> <button id="btn">GET</button> </div> </body> <script src="jquery-3.2.1.js"></script> <script type="text/javascript"> $(function(){ $('button').click(function(){ //jquery的属性操作 html属性操作 attr() //attr()如果有一个参数，表示获取值 $('#box p').text($('#box').attr('id')) }) //attr()如果设置两个值 表示设置属性 $('#box').attr('class','foo'); //设置多个值 使用对象存储，如果设置多个类名 不能使用attr() $('#box').attr({'class':'foo2',name:'luffy'}); //删除一个属性 /* $('#box').removeAttr('name'); $('#box').removeAttr('class'); */ $('#box').removeAttr('name class'); //DOM属性操作 //获取的是第一个元素的class值 console.log($('li').prop('class')); //设置值 $('li').first().prop({'name':'app','name2':'app2'}); console.log($('li').first()); //删除dom对象的name属性 $('li').first().removeProp('name','name2'); console.log($('li').prop('name' )); console.log($('li').prop('name2' )); //3.addClass() removeClass() 添加类 和删除类 $('span').addClass('span2 span3') $('span').removeClass('span2') var isBig = true; $('span').click(function(){ if(isBig){ $(this).addClass('active'); isBig = false; }else{ $(this).removeClass('active'); isBig = true; } }) //4.值属性的操作 text() html() val() //仅仅是获取文本 console.log($('#box2').text()); //获取的所有 console.log($('#box2').html()); //设置值 // $('#box2').text("<a>火影忍者</a>"); // $('#box2').html("<a href='#'>火影忍者</a>"); //获取值 console.log($('input').val()); $('input').val('嘿嘿你个大头鬼') $('#btn').click(function(){ var val = $('input').val(); $("#box2").text(val); }) //表单控件使用的一个方法 $('input').change(function(){ console.log($(this).val()); }) }) </script> </html>