jQuery
jQuery
python中称为模块，其余语言称为类库，DOM/BOM\JavaScript的集合
对于jQuery，不少大公司在使用时，不彻底用到，须要封装一部分想要的功能以节省流量
或者用dom，由于效果出来前要加载好jQuery文件，这涉及到流量。
概要：
查找元素（DOM不能查找自定义属性，全部标签）
选择器
筛选
操做元素
css
引入：<script src=''></script> <<script> jQuery. #引用封装的方法 $. #等于jQuery </script>
1、选择器html
$('') #获取的
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
python
$('.header').click(function () { #为每个对象绑定事件
$(this).next().removeClass('hide');
$(this).parent().siblings().find('.content').addClass('hide');
})
两句能缩为一句，链式编程，即removeClass后.xxxx，这是由于removeClass返回一个jQuery对象
2、筛选器
形式：选择器.xxx() 括号内能够加选择器，能够嵌套筛选
jquery
$(this).next() #下一个 .nextAll() .nextUntil('#i1')
$(this).prev() #上一个 .prevAll() .prevUntil('#i1')
$(this).parent() #父标签 .parents() .parentsUntil()
$(this).children() #全部子标签
$(this).siblings() #全部兄弟标签，不包含本身
$(this).find() #查找
.first() .last() .hasClass()
3、操做编程
文本操做bootstrap
$().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('') #没有则添加，有则移除
属性操做：
app
$().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在内
4、事件
事件绑定：
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实现效果同样，只是参数位置不一样，版本一、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(){}) #页面全部内容加载完才执行
5、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)
一引入后自动执行，即自动编译好以被引用。
6、组件 =============全能========================== 后台管理的功能须要组合才能造成一个好的前端，能够网上搜组合好的模板，本身开发修改细节。 ①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的标签代码
相关文章
- 1. jQuery---jQuery插件
- 2. JQuery - $, JQuery, Window.load, JQuery.ready
- 3. 【jQuery】1、下载jQuery
- 4. 【jQuery】-----jQuery简介（一）
- 5. Jquery中(function($){...})(jQuery)，$(function(){})，
- 6. jQuery-jQuery选择器
- 7. JQuery插件——jquery tools
- 8. jQuery attr() 和 jQuery prop()
- 9. 【JQuery】（1）JQuery基础
- 10. jQuery-什么是jQuery
- 更多相关文章...
- • jQuery Mobile 安装 - jQuery Mobile 教程
- • jQuery Mobile 过渡 - jQuery Mobile 教程
- • Github 简明教程
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章