玩转jQuery 1day
2017-12-09 本文已影响13人
Adapa
笔记:https://oss.adapa.online/webnotebook/JSlearnig.html
选择器
1.元素选择
id #idname
class .classname
<body>
<div id="a">a</div>
<div id="b">b</div>
<script>
var a = document.getElementById('b')
a.style.background = 'blue';
</script>
<script>
$('#a').css({'background':'red','width':'240px','height':'320px','color':'yellow'});
</script>
</body>
2层级选择
子元素 $('div > p')
后代 $('div p')
$(input[type='text'])
$(input[type='submit'])
4.伪类选择器
$('div:first')
$('div:last')
过滤器
$('div .child')
$('div').find('.child')找从上往下
$('.child').parent()父亲
$('.child').parents()爷爷找从下往上
$().filter 同级过滤
image.png
<body>
<div id="a">
<div class="child"></div>
<div class="child"></div>
</div>
<div id="b">b</div>
<script>
$('div .child').css('background','red');
$('div').find('.child').css({'width':'350px','height':'350px','margin-top':'10px'})
</script>
</body>
$().parent()父级元素
image.png
image.png
filter() 方法
image.png
操作样式:
.css
<body>
<div id="a"></div>
<script>
$('#a').css({'width':'150px','height':'150px','background':'red'});
</script>
</body>
小案例：
地址:https://oss.adapa.online/webnotebook/Smallcase/2017124jsdemo01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
#board{
font-size: 75px;
font-weight: bold;
background: black;
/*color: red;*/
line-height: 250px;
padding: 5px;
height: 250px;
width: 650px;
text-align: center;
}
#board.active{
color: red;
}
</style>
</head>
<body>
<div id="board">保健用品 二楼左转</div>
<script>
var board = $('#board');
function toggle(){
if(board.hasClass('active')){
board.removeClass('active');
}else{
board.addClass('active');
}
}
setInterval(toggle,1);
</script>
</body>
</html>
操作DOM
$('div').text()
$('div').html()
$('div').append('...')
$('div').prepend('...')
$('div').remove()
事件
重案例分析事件：
地址：https://oss.adapa.online/webnotebook/Smallcase/JQshijian01.html
<body>
<button id="trigger_card">显示OR隐藏公告</button>
<div id="card">
<h1>公告</h1>
C:\Users\Administrator\AppData\Roaming\npm;C:\Users
</div>
<script>
var triggerCard = $('#trigger_card');
var card = $('#card');
console.log(typeof(card));
function triggger(){
if(card.is(':visible')){
card.slideUp();
}else{
card.slideDown();
}
}
triggerCard.on('click',triggger)
</script>
</body>
card.is(':visible') 判断card是显示还是隐藏
目标元素.on('事件'，function)
card.on('mouseenter',function(){
card.addClass('active');
})
card.on('mouseleave',function(){
card.removeClass('active');
})
操作元素属性
$('div').attr()
$("div").removeAttr()
$('div').prop()
$('div').removeProp()
表单及输入
案例地址
https://oss.adapa.online/webnotebook/Smallcase/JQJXA01.html
