jQuery
jQuery
python中称为模块，其他语言称为类库，DOM/BOM\JavaScript的集合
对于jQuery，很多大公司在使用时，不完全用到，需要封装一部分想要的功能以节省流量
或者用dom，因为效果出来前要加载好jQuery文件，这涉及到流量。
概要：
查找元素（DOM不能查找自定义属性，所有标签）
选择器
筛选
操作元素
引入：<script src=''></script> <<script> jQuery. #引用封装的方法 $. #等于jQuery </script>
一、选择器
$('') #获取的
document.getElementById
转换：
$('')[0] = DOM对象
$(DOM对象) = $('')
1. id：
$('#')
2. class：
$('.')
3. 标签：
$('')
4. 所有
*
5.组合
$('a,.c1,#i2')
6.层级
$('a .c1 #i2') #查找所有子孙，不单限于直系
$('a>.c1') #只找儿子
7.基本筛选
:first
:last
:eq(index) #等于，取第i个值
8.属性
$('[alex]')
$('[alex="xxx"]')
9.表单
<input type="text" />
$(':text') 还有submit
等同于$('input[type="text"]')
还有$(':checkbox')等
示例：全选反选
function checkAll() {
$('#tb :checkbox').prop('checked',true); #多个结果，jQuery自动循环进行prop
}
function cancelAll() {
$('#tb :checkbox').prop('checked',false); #prop取checkbox的checked属性
}
function reverseAll() {
$('#tb :checkbox').each(function () { #each循环每一个，function传参时传下标
if(this.checked){
this.checked = false #this代指DOM对象，故此为DOM方法
}else{
this.checked = true
}
})
}
方法二：jQuery获取
if($(this).prop('checked')){
$(this).prop('checked',false);
}else {
$(this).prop('checked',true);
}
方法三：三元运算 条件？真值：假值
var v = $(this).prop('checked')?false:true;
$(this).prop('checked',v)
示例：左侧菜单
功能：找到标签，添加移除class
$('.header').click(function () { #为每一个对象绑定事件
$(this).next().removeClass('hide');
$(this).parent().siblings().find('.content').addClass('hide');
})
两句能缩为一句，链式编程，即removeClass后.xxxx，这是因为removeClass返回一个jQuery对象
二、筛选器
形式：选择器.xxx() 括号内可以加选择器，可以嵌套筛选
$(this).next() #下一个 .nextAll() .nextUntil('#i1')
$(this).prev() #上一个 .prevAll() .prevUntil('#i1')
$(this).parent() #父标签 .parents() .parentsUntil()
$(this).children() #所有子标签
$(this).siblings() #所有兄弟标签，不包含自己
$(this).find() #查找
.first() .last() .hasClass()
三、操作
文本操作
$().text() #获取文本内容
$().text('') #赋值
$().html() #获取标签代码
$().html(‘xxx’) #赋值标签代码
$().val() #对比DOM的value，获取表单文本，input、select、textarea
$().val(‘’)
示例：模态对话框 添加编辑
$('.edit').click(function () {
$('.model,.shadow').removeClass('hide');
var tds = $(this).parent().prevAll(); #找到所有的父标签的前面标签
var port = $(tds[0]).text(); #注意tds为jQuery对象，[0]变为DOM，要再转
var host = $(tds[1]).text();
$('.model input[name="hostname"]').val(host); #找到输入框并赋值
$('.model input[name="port"]').val(port);
})
样式操作：
.addClass('')
.removeClass('')
.toggleClass('') #没有则添加，有则移除
属性操作：
$().attr('') #获取指定属性值
$().attr('','') #设置自定义属性值
$().removeAttr('')
专门用于checkbox，radio这种选中的操作，用attr一开始可以选中，取消后再也选不中
$().prop('checked') #选中则返回true，否则为false
$().prop('checked',true)
示例：编辑模态框获取值
var tds = $(this).parent().prevAll();
tds.each(function () { #循环
var n = $(this).attr('target'); #获取属性值
var text = $(this).text();
$('.model input[name="'+ n + '"]').val(text); #需要注意的是n为变量，选择器中要加
字符串，进行并接即可
})
示例：Tab菜单切换
$('.menu-item').click(function () {
var n = $(this).attr('a');
$(this).addClass('active').siblings().removeClass('active'); #添加、移除class
$('.content [b="'+ n +'"]').removeClass('hide').siblings().addClass('hide');
})
示例：Tab菜单切换改进-通过index获取索引
$(this).addClass('active').siblings().removeClass('active');
var v = $(this).index();
$('.content').children().eq(v).removeClass('hide').siblings().addClass('hide');
标签处理：
添加：
$().append() #括号内可以是字符串并接或者标签元素document.createElement
$().prepend() #标签内
$().before() #同级标签
$().after()
删除：
$().eq(index).remove() 删除第几个标签
$().eq(index).empty() 清空文本内容
复制：
$().clone() 复制标签
示例：
$('#b1').click(function () {
var v = $('#t1').val();
var temp = "<li>" + v + "</li>"; #字符串并接,还有document.createElement方法
创建标签
$('#u1').append(temp);
})
$('#b2').click(function () {
var index = $('#t1').val();
$('#u1 li').eq(index).remove();
})
$('#b3').click(function () {
var index = $('#t1').val();
var v = $('#u1 li').eq(index).clone();
$('#u1').append(v);
})
CSS处理：
$().css('color','red') 个别样式设置
点赞例子：
知识点：- $().append()
- $().remove()
- setInterval clearInterval
- opacity 1 -> 0
- position top right absolute
代码：
var tag=document.createElement('span'); #这种方法创建标签能用于jQuery设置样式
$(tag).text('+1');
$(tag).css('color','green');
$(tag).css('fontSize',fontSize + "px"); #以px为单位
$(tag).css('position','absolute');
$(tag).css('top',top + "px");
$(tag).css('right',right + "px");
$(tag).css('opacity',opacity);
$(self).append(tag); #添加标签
var obj = setInterval(function () {
fontSize = fontSize + 10; #变化
top = top - 10;
right = right - 10;
opacity = opacity -0.1;
$(tag).css('fontSize',fontSize + "px"); #重新赋值
$(tag).css('top',top + "px");
$(tag).css('right',right + "px");
$(tag).css('opacity',opacity);
if(opacity<0){
clearInterval(obj); #关闭定时器
$(tag).remove(); #清除标签
}
},100);
位置
$().scrollTop() #获取,括号内加选择器即可，window表示的是窗口$(window). $().scrollTop(0) #设置 $().scrollLeft() $().offset() #指定标签在html中的坐标 $().offset().left #用于获取左上角坐标 $().offset().top $().position() #标签相对于父标签(relative)的坐标，中间隔着其他标签无碍
尺寸：
$().height() #设定CSS中 'height' 的值 $().innerHeight() #内部区域高度（包括补白padding、不包括边框border） $().outerHeight() #外部高度（默认包括补白padding和边框border），默认false $().outerHeight(true)#设置为 true 时，计算边距margin在内
四、事件
事件绑定：
DOM：三种绑定方式 ——标签内onclick
document.getElementById().onclick document.getElementById().addEventListener
jQuery:
与DOM对比，开头没有on
$().click()
$().click()
$().bind('click',function(){}) 通过该方式绑定的只能该方式解绑
$().unbind('click',function(){})
$().delegate('a','click',function(){}) 委托，一开始没绑定，点击的时候才绑定a且执行
$().undelegate('a','click',function(){}) 其他三种都是一开始绑定好了，添加标签a后没绑定
$().on('click',function(){}) 上面三种方式原理都是调用的on
$().off('click',function(){}) 这个也能委托，$('上级标签').on('click','a',function(){})
点击上级标签时，给所有的a标签绑定事件
事件委托delegate和on实现效果一样，只是参数位置不同，版本1、2中有delegate
阻止事件发生：
默认a标签点击跳转，绑定onclick后，先执行onclick
分两种：默认先执行 checkbox
绑定先执行 a submit
DOM绑定时：
<a onclick="return clickOn();" href="http://www.baidu.com">zou ni</a> #要return
<script>
function clickOn() {
alert(123);
return false; #true时跳转
}
</script>
jQuery绑定时：
函数内return false即可
示例：表单验证
$(':submit').click(function () {
$('.error').remove(); #提交前先清空上次验证的错误信息
var flag = true; #只要为空，flag为false不跳转
$('#f1').find('input[type="text"],input[type="password"]').each(function () {
var v = $(this).val();
if (v.length <= 0){
var tag = document.createElement('span');
tag.innerHTML = '必填';
tag.className = 'error';
$(this).after(tag);
flag = false;
//return false; #这里的return是跳出循环，不能返回给函数，相当于break
}
});
return flag; #返回flag，决定能不能跳转
});
事件自动执行
$(function(){ }) #页面框架加载完自动执行，可以避免加载图片慢导致事件绑定慢的问题
$().click(function(){}) #页面所有内容加载完才执行
五、jQuery扩展
方式一：
$.extend({
'wangsen':function () {return 'gg';}
})
$.wangsen();
方式二：
$.fn.extend({
'hangyang':function () {return 'db';}
});
$('#i1').hangyang();
可以写好js文件，然后引入即可使用。也可在网上找。自定义的扩展可能会重复名字，没办法避免
全局变量也可能重复，写一个自执行函数即可解决。
(function(arg){
var status = 1; #包裹在函数内，不再是全局变量，只能自己用
arg.extend({'':function(){}})
})(jQuery)
一引入后自动执行，即自动编译好以被引用。
六、组件
=============全能==========================
后台管理的功能需要组合才能形成一个好的前端，可以网上搜组合好的模板，自己开发修改细节。
①BootStrap
-CSS样式
-JS
学习BootStrap规则
1.响应式
指针对屏幕大小切换，html样式随之变化
<style>
@meida(min-width:700px){
.c2{
background-color:red;
}
}
</style>
2.图标、字体
原理：内部是表格，表格的不同位置画好图标，位置由unicode代码表示，使用时
复制图标对应的代码<span class="glyphicon-class">glyphicon glyphicon-euro</span>
@font-face
3.基本使用
对于css文件，link引入
<link href=".../css/bootstrap.min.css" rel="stylesheet">
对于js文件，script的src引入
<script src="...jquery/1.11.1/jquery.min.js"></script>
复制插件代码
如果要修改插件效果，前后css样式混淆，在样式内{}加上!important
============偏后台管理========================
②jQueryUI 推荐指数*，功能不美，需修改很多
-CSS
-JS
学习jQueryUI规则
③EasyUI（代码前后端不完全一致，功能齐全）
-CSS
-JS
学习EasyUI规则：下载好JS文件，在文件中引入src，然后将demo中的html相应代码复制即可
========Ajax操作========
轮播插件：网上如bxslider
下载后引入css、js，复制script语句和引用script的标签代码
浙公网安备 33010602011771号