JQuery各种基本使用
代码预览：
https://jirengu-inc.github.io/jrg-renwu8/homework/%E5%BC%A0%E8%BD%A9/renwu26-1.html
源码：
<html>
<meta http-equiv="content-Type" content="text/html;charset=utf-8"/>
<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'>
</script>
<style>
fieldset{
margin: 20px;
}
.example{
width: 100px;
height: 100px;
border: 1px solid #ccc;
margin: 10px;
}
.one{
width: 100px;
height: 100px;
border: 1px solid #ccc;
margin: 10px;
}
.color_blue{
background-color: #6fc;
}
.eleven{
position:absolute;
right:100px;
background-color:grey;
}
</style>
</head>
<body>
<fieldset>
<legend>
1.给元素 $node 添加 class active，给元素 $noed 删除 class active<br>
2.展示元素$node, 隐藏元素$node
</legend>
<div class="one"></div>
<button class="add">add</button>
<button class="remove">remove</button>
<button class="none">none</button>
</fieldset>
<fieldset>
<legend>
3.获取元素$node 的 属性: id、src、title， 修改以上属性
</legend>
<div class="three example" id='three' src='zhang xuan' title="yan jia jia"></div>
show:
<div class="show-three"></div>
<button class="get-three">get</button>
<button class="change-three">change</button>
</fieldset>
<fieldset>
<legend>
4.给$node 添加自定义属性data-src
</legend>
<div class="four example"></div>
show:
<div class="show-four"></div>
<button class="add-four">add</button>
</fieldset>
<fieldset>
<legend>
5.在$ct 内部最开头添加元素$node<br>
6.在$ct 内部最末尾添加元素$node<br>
7.删除$node<br>
8.把$ct里内容清空
</legend>
<div class="five example"></div>
<button class="add-five">add</button>
<button class="delete-five">delete</button>
<button class="clear-five">clear</button>
</fieldset>
<fieldset>
<legend>
9.在$ct 里设置 html //<div class="btn"></div>
</legend>
<div class="nine example"></div>
<button class="set-nine">set</button>
</fieldset>
<fieldset>
<legend>
10.获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
</legend>
<div class="ten example"></div>
show:
<div class="show-ten"></div>
<button class="get-ten">get</button>
<button class="set-ten">set</button>
</fieldset>
<fieldset>
<legend>
11.获取窗口滚动条垂直滚动距离
</legend>
show:
<div class="show-eleven"></div>
<button class="get-eleven">get</button>
</fieldset>
<fieldset>
<legend>
12.获取$node 到根节点水平、垂直偏移距离
</legend>
<div class="twelves example"></div>
show:
<div class="show-twelves"></div>
<button class="get-twelves">get</button>
</fieldset>
<fieldset>
<legend>
13.修改$node 的样式，字体颜色设置红色，字体大小设置14px
</legend>
<div class="thirteen example">13</div>
<button class="get-thirteen">get</button>
</fieldset>
<fieldset class="ct">
<legend>
14.遍历节点，把每个节点里面的文本内容重复一遍<br>
15.从$ct 里查找 class 为 .item的子元素<br>
16.获取$ct 里面的所有孩子<br>
17.对于$node，向上找到 class 为’.ct’的父亲，在从该父亲找到’.panel’的孩子
</legend>
<div class="fourteen example">
14
<div class="fourteen-1 item panel">
14-1
<div class="fourteen-2 item">
14-2
</div>
</div>
</div>
show:
<div class="show-fourteen"></div>
show:
<div class="show-fifteen"></div>
show:
<div class="show-seventeen"></div>
<button class="get-fourteen">get</button>
<button class="get-fifteen">get-items</button>
<button class="get-seventeen">get-pa</button>
</fieldset>
<fieldset>
<legend>
18.获取选择元素的数量<br>
19.获取当前元素在兄弟中的排行
</legend>
<div class="eighteen example">18</div>
<div class="eighteen example">18</div>
<div class="eighteen example whoami">whoami</div>
<div class="eighteen example">18</div>
show:
<div class="show-eighteen"></div>
show:
<div class="show-nineteen"></div>
<button class="get-eighteen">get</button>
<button class="get-nineteen">whoami</button>
</fieldset>
<script>
//1,2
var $one=$('.one');
$add=$('.add'),
$remove=$('.remove'),
$none=$('.none'),
$add.on('click', function(){
$one.addClass('color_blue');
})
$remove.on('click', function(){
$one.removeClass('color_blue');
})
$none.on('click', function(){
$one.toggle('slow');
})
//3
$('.get-three').on('click', function(){
var $title=$('.three').attr('title'),
$src=$('.three').attr('src'),
$id=$('.three').attr('id');
var all='tilte:'+$title+'src:'+$src+'
 id:'+$id;
$('.show-three').text(all);
})
$('.change-three').on('click', function(){
$('.three').attr('title','123');
$('.three').attr('src','xuan zhang');
$('.three').attr('id','three-changed');
})
//4
$('.add-four').on('click', function(){
$('.four').attr('data-src','zhang xuan');
$('.show-four').text('data-src:'+$('.four').attr('data-src'));
})
//5
$('.add-five').on('click', function(){
$('.five:first').before('<div class="five example"></div>');
$('.five:last').after('<div class="five example"></div>');
})
$('.delete-five').on('click', function(){
$('.five:first').remove();
})
$('.clear-five').on('click', function(){
$('.five').remove();
})
//9
$('.set-nine').on('click', function(){
$('.nine').append('<div class="btn example"></div>')
})
//10
$('.get-ten').on('click', function(){
var text='';
text+='宽度：'+$('.ten').width();
text+='<br>高度：'+ $('.ten').height();
text+='<br>包括内边距宽度：'+$('.ten').innerWidth();
text+='<br>包括内边距高度：'+$('.ten').innerHeight();
text+='<br>包括内边距和边框宽度：'+$('.ten').outerWidth();
text+='<br>包括内边距和边框高度：'+$('.ten').outerHeight();
text+='<br>包括内边距、边框和外边距宽度：'+$('.ten').outerWidth(true);
text+='<br>包括内边距、边框和外边距高度：'+$('.ten').outerHeight(true);
$('.show-ten').html(text);
})
$('.set-ten').on('click', function(){
$('.ten').width('200');
$('.ten').height('200');
})
//11
$('.get-eleven').on('click', function(){
$('.show-eleven').text($(window).scrollTop());
})
//12
$('.get-twelves').on('click', function(){
var all=$('.twelves').offset().left+' '+$('.twelves').offset().top;
$('.show-twelves').text(all);
})
//13
$('.get-thirteen').on('click', function(){
$('.thirteen').css({'color':'red','font-size':'14px'});
})
//14,15,16,17
$('.get-fourteen').on('click', function(){
$('.show-fourteen').text($('.fourteen').parent().children().text());
})
$('.get-fifteen').on('click', function(){
$('.show-fifteen').text($('.fourteen').children().find('item'));
})
$('.get-seventeen').on('click', function(){
if($('.fourteen').parent().hasClass('ct') && $('.fourteen').children().hasClass('panel')){
$('.show-seventeen').text(true);
};
})
//18,19
$('.get-eighteen').on('click', function(){
$('.show-eighteen').text($('.eighteen').length);
})
$('.get-nineteen').on('click', function(){
$('.show-nineteen').text($('.whoami').index());
})
</script>
</body>
</html>
代码预览2：
https://jirengu-inc.github.io/jrg-renwu8/homework/%E5%BC%A0%E8%BD%A9/renwu26-2.html
源码：
<html>
<meta http-equiv="content-Type" content="text/html;charset=utf-8"/>
<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'>
</script>
<style>
fieldset{
margin: 20px;
}
.example{
width: 100px;
height: 100px;
border: 1px solid #ccc;
margin: 10px;
}
.two{
background-color:grey;
color:#6fc;
}
.four{
margin:20px;
}
</style>
</head>
<body>
<fieldset>
<legend>
1.当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
</legend>
<div class="one example"></div>
<button class="one-add">add</button>
</fieldset>
<fieldset>
<legend>
2.当窗口滚动时，获取垂直滚动距离
</legend>
<div class="two example"></div>
<button class="two-add">add</button>
</fieldset>
<fieldset>
<legend>
3.当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
</legend>
<div class="three example"></div>
<button class="three-show">show</button>
</fieldset>
<fieldset>
<legend>
4.当鼠标激活 input 输入框时让输入框边框变为蓝色，<br>
当输入框内容改变时把输入框里的文字小写变为大写，<br>
当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
</legend>
<input class='four'></input>
</fieldset>
<fieldset>
<legend>
5.当选择 select 后，获取用户选择的内容
</legend>
<select class='five-sl'>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
show:
<div class='five-show'></div>
</fieldset>
<script>
//1
$('.one-add').on('click', function(){
$('.one').css({backgroundColor:'red'});
setTimeout(function(){$('.one').css({backgroundColor:'blue'})},1000)
})
//2
$('.two-add').on('click', function(){
setInterval(function(){$('.two').text($(window).scrollTop())},100);
})
//3
$('.three').on('mouseenter', function(){
$('.three').css({'background-color':'red'});
})
$('.three').on('mouseleave', function(){
$('.three').css({'background-color':'#fff'});
})
//4
$('.four').on('focusin', function(){
$(this).css({border: '1px solid blue'})
})
$('.four').on('focusout', function(){
$(this).css({border: '1px solid grey'})
})
$('.four').on('keyup', function(){
$('.four').val($('.four').val().toUpperCase());
})
//5
$('.five-sl').on('change',function(){
$('.five-show').text($('.five-sl').val())
})
</script>
</body>
</html>
