复习前端知识（二）（JQuery相关）
http://jquery.cuishifeng.cn/
笔记速写：
jQuery http://jquery.cuishifeng.cn/ 模块 《=》类库 DOM/BOM/JavaScript的类库 版本： 1.x 1.12 2.x 3.x 转换： jquery对象[0] => Dom对象 Dom对象 => $(Dom对象) 一、查找元素 DOM 10左右 jQuery： 选择器，直接找到某个或者某类标签 1. id $('#id') 2. class <div class='c1'>div> $(".c1") 3. 标签 <div id='i10' class='c1'> <a>fa> <a>fa> div> <div class='c1'> <a>fa> div> <div class='c1'> <div class='c2'> div> div> $('a') 4. 组合a <div id='i10' class='c1'> <a>fa> <a>fa> div> <div class='c1'> <a>fa> div> <div class='c1'> <div class='c2'> div> div> $('a') $('.c2') $('a,.c2,#i10') 5. 层级 $('#i10 a') 子子孙孙 $('#i10>a') 儿子 6. 基本 :first :last :eq() 7. 属性 $('[alex]') 具有alex属性的所有标签 $('[alex="123"]') alex属性等于123的标签 <input type='text'/> <input type='text'/> <input type='file'/> <input type='password'/> $("input[type='text']") $(':text') 实例： 多选，反选，全选 - 选择权 - $('#tb:checkbox').prop('checked'); 获取值 $('#tb:checkbox').prop('checked', true); 设置值 - jQuery方法内置循环： $('#tb:checkbox').xxxx - $('#tb:checkbox').each(function(k){ // k当前索引 // this，DOM，当前循环的元素 $(this) }) - var v = 条件 ? 真值 : 假值 筛选 $('#i1').next() $('#i1').nextAll() $('#i1').nextUntil('#ii1') <div> <a>asdfa> <a>asdfa> <a id='i1'>asdfa> <a>asdfa> <a id='ii1'>asdfa> <a>asdfa> div> $('#i1').prev() $('#i1').prevAll() $('#i1').prevUntil('#ii1') $('#i1').parent() $('#i1').parents() $('#i1').parentsUntil() $('#i1').children() $('#i1').siblings() $('#i1').find() $('li:eq(1)') $('li').eq(1) first() last() hasClass(class) 文本操作： $(..).text() # 获取文本内容 $(..).text(“<a>1a>”) # 设置文本内容 $(..).html() $(..).html("<a>1a>") $(..).val() $(..).val(..) 样式操作： addClass removeClass toggleClass 属性操作： # 专门用于做自定义属性 $(..).attr('n') $(..).attr('n','v') $(..).removeAttr('n') <input type='checkbox' id='i1' /> # 专门用于chekbox,radio $(..).prop('checked') $(..).prop('checked', true) PS: index 获取索引位置 文档处理： append prepend after before remove empty clone css处理 $('t1').css('样式名称', '样式值') 点赞： - $('t1').append() - $('t1').remove() - setInterval - 透明度 1 》 0 - position - 字体大小，位置 位置： $(window).scrollTop() 获取 $(window).scrollTop(0) 设置 scrollLeft([val]) offset().left 指定标签在html中的坐标 offset().top 指定标签在html中的坐标 position() 指定标签相对父标签(relative)标签的坐标 <div style='relative'> <div> <div id='i1' style='position:absolute;height:80px;border:1px'>div> div> div> $('i1').height() # 获取标签的高度 纯高度 $('i1').innerHeight() # 获取边框 + 纯高度 + ？ $('i1').outerHeight() # 获取边框 + 纯高度 + ？ $('i1').outerHeight(true) # 获取边框 + 纯高度 + ？ # 纯高度，边框，外边距，内边距 事件 DOM： 三种绑定方式 jQuery： $('.c1').click() $('.c1')..... $('.c1').bind('click',function(){ }) $('.c1').unbind('click',function(){ }) ******************* $('.c').delegate('a', 'click', function(){ }) $('.c').undelegate('a', 'click', function(){ }) $('.c1').on('click', function(){ }) $('.c1').off('click', function(){ }) 阻止事件发生 return false # 当页面框架加载完成之后，自动执行 $(function(){ $(...) }) jQuery扩展： - $.extend $.方法 - $.fn.extend $(..).方法 (function(){ var status = 1; // 封装变量 })(jQuery) 二、操作元素 ===》实例： 作业： 一： $('i1').height() # 获取标签的高度 纯高度 $('i1').innerHeight() # 获取边框 + 纯高度 + ？ $('i1').outerHeight() # 获取边框 + 纯高度 + ？ $('i1').outerHeight(true) # 获取边框 + 纯高度 + ？ # 纯高度，边框，外边距，内边距 二、所有实例敲一遍 三、编辑框
JQuery实现表格反选：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="GBK">
<title>Documenttitle>
head>
<body>
<input type="button" onclick="chooseAll()" value="全选">
<input type="button" onclick="reserveAll()" value="反选">
<input type="button" onclick="cancelAll()" value="取消">
<table>
<thead>
<tr>
<th>选择th>
<th>主机th>
<th>端口th>
tr>
thead>
<tbody id="tb">
<tr>
<td><input type="checkbox">td>
<td>1.1.1.1td>
<td>190td>
tr>
<tr>
<td><input type="checkbox">td>
<td>1.1.1.1td>
<td>190td>
tr>
<tr>
<td><input type="checkbox">td>
<td>1.1.1.1td>
<td>190td>
tr>
tbody>
table>
<script src="http://code.jquery.com/jquery-1.12.4.min.js">script>
<script>
function reserveAll(){
$('#tb :checkbox').each(function(){
var v = $(this).prop('checked')?0:1;
$(this).prop('checked',v);
});
}
function chooseAll(){
console.log($("#tb :checked"));
$("#tb :checkbox").prop('checked',true);
}function cancelAll() {
$("#tb :checkbox").prop('checked',0);
}
script>
body>
html>
JQuery实现菜单收缩：
DOCTYPE html>
<head>
<meta charset="GBK">
<title>Documenttitle>
<style>
.header{
background-color: black;
color: wheat;
}
.content{
min-height: 30px;
}
.hide{
display: none;
}
style>
head>
<body>
<div style="height: 400px;width: 200px;border: 1px solid #dddddd;">
<div class="item">
<div class="header">标题一div>
<div class="content hide">内容div>
div>
<div class="item">
<div class="header">标题二div>
<div class="content hide">内容div>
div>
<div class="item">
<div class="header">标题三div>
<div class="content hide">内容div>
div>
div>
<script src="http://code.jquery.com/jquery-1.12.4.min.js">script>
<script>
$('.header').click(function(){
$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');
});
script>
body>
html>