Juery
Posted xuexihainan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Juery相关的知识，希望对你有一定的参考价值。
jquery easyui 有写好的前端代码
JQuery
选择器 查找标签或class或id
// $(‘*‘).css(‘color‘,‘red‘);
$(‘div‘).css(‘color‘,‘blue‘);
$(‘p‘).css(‘color‘,‘green‘);
$(‘#p‘).css(‘color‘,‘red‘);
$(‘.div‘).css(‘color‘,‘red‘);
盒子里的所有p标签
$(‘.outer p‘) 后代
$(‘.outer>p‘) 子代
$(‘.outer+p‘) 相邻
$(‘.outer~p‘) 只向下找兄弟
基本筛选器
只有两种可能 一个或者多个
对集合做处理 那个想拿到的
$(‘.div li:first‘).css(‘color‘,‘green‘); 取第一个
$(‘.div li:last‘).css(‘color‘,‘green‘); 取最后一个
$(‘.div li:eq(2)‘).css(‘color‘,‘green‘); 取索引
$(‘.div li:lt(2)‘).css(‘color‘,‘green‘); 小于索引2的
$(‘.div li:gt(2)‘).css(‘color‘,‘green‘); 大于索引2的
属性选择器
$(‘[alex]‘).css(‘color‘,‘green‘); 只有一个属性名字 可以直接找属性名字
$(‘[alex=‘dsb‘].css(‘color‘,‘green‘); 通过[alex=‘dsb‘]找到
表单选择器
$(‘[type=‘button‘].css(‘width‘,‘300‘); input标签 的属性
$(‘:button‘].css(‘width‘,‘300‘); 同上 简写 只适用input标签
筛选器
过滤筛选器
$(‘li‘).eq(2) 跟上面作用一样 有区别 索引值可以当做参数传进来 更灵活
$(‘ul li‘).hasclass(‘test‘) 判断ul下面的li标签 有没有test标签
过滤筛选器
$(‘.div1‘).children(‘.div3‘).css(‘color‘,‘red‘); children（可以加参数） 查找只找子代
$(‘.div1‘).find(‘.div3‘).css(‘color‘,‘red‘); find(可以加参数) 查找后代
$(‘.div2‘).next().css(‘color‘,‘red‘); 向下查找一个兄弟 只会在同级里找
$(‘.div2‘).nextAll().css(‘color‘,‘red‘); 向下查找所有兄弟
$(‘.div2‘).nextUntil(‘.div6‘).css(‘color‘,‘red‘); 向下区间查找 div2 - div6
$(‘.div2‘).prev().css(‘color‘,‘red‘); 向上查找一个元素
$(‘.div2‘).prevAll().css(‘color‘,‘red‘); 向上查找所有
$(‘.div2‘).prevUntil(‘div8‘).css(‘color‘,‘red‘); 向上查找区间 div2 - div8
$(‘.div1‘).parent().css(‘color‘,‘red‘); div1 下的所有标签
$(‘.div1‘).parents().css(‘color‘,‘red‘); 一直向上找 一直找到body 全部改变
$(‘.div3‘).parentUntil(‘.div1‘).css(‘color‘,‘red‘);往上找的同级无效
$(‘.div2‘).siblings(‘.div1‘).css(‘color‘,‘red‘); 自己不变 上下都变 上下兄弟都找
列子：
属性关联：
<div xxx=‘c1‘> <div id=‘c1‘>
s = $(self).attr(‘xxx‘) 拿到属性值=c1 把对象赋给s
$(‘#‘+s).removeClass(‘hide‘).siblings.addClass(‘hide‘) 字符串拼接 ‘#‘+s=拿到id=‘c1‘
事件绑定的第二种方式： 这种方式用的多 不用提前设置this
document.getElementById(‘div‘).onclick=function(){
this.getAttribute(‘id‘) 通过this就触发事件
}
操作元素：
<input >
$(‘#ck‘).attr(‘checked‘,‘true‘); 给方框加上对勾 用在自定义属性 查找标签
$(‘#ck‘).removeAttr(‘checked‘); 给方框取消对勾
$(‘#ck‘).prop(‘checked‘,‘true‘); 给方框加上对勾 不能设置自己添加的属性 比如alex=‘ss‘ 比如正选反选
$(‘#ck‘).removeProp(‘checked‘); 给方框取消对勾
$(‘.test‘).add
循环：
li = [10,20,30,40]
$each(li换成dic,function(i,x)){
console.log(i,x) li拿到的是 0索引 10值 , 1 20 , 2 30, 3 40
字典dic 拿到到是 键 值
}
正反选列子：
找到table标签：
$(‘table tr‘).each(function(){
$(this.html()) 拿到tr里的所有标签
})
function selectAll(){
$(‘table :checkbox‘).each(function(){ //只有input属性里的type 可以写成：
$(this).prop(‘checked‘,‘true‘) //$(this) 这样用
})
}
模态对话框：
function remove(self){
$(self).parent().siblings().removeClass(‘hide‘); 向上查找兄弟标签 删除css
}
function add(self){
$(self).parent().parent().children(‘div1‘,‘div2‘).addClass(‘hide‘); 向上查找两层并向下查找
//到div1和div2 添加css
}
文档处理：
<input type=‘text‘ value=‘123‘>
<input type=‘checkbox‘ mame=‘hobby‘>
$(‘:text‘).val() //输出结果 123
$(‘:text‘).val(‘456‘) //修改值 输出结果123 加参数就是修改值
添加元素：
var ele = $(‘P‘) //找到P标签 并插入到div标签里面 放到最后一个
append(‘div1‘) //在div里插入P标签 就用append
var ele = $(‘P‘) // 这个是div标签 被插入
ele.appendTo(‘div1‘) //
var ele = $(‘P‘) // 插入div标签 并放到最上面
prepend(‘div1‘) //
var ele = $(‘P‘) // 这个是div标签 被插入 并放到最上面
ele.prependTo(‘div1‘) //
var ele = $(‘P‘) // 这个是把div标签内部的P标签 拿到外部和div是兄弟关系 放到下面
after(‘div1‘)
var ele = $(‘P‘) // 这个是把div标签内部的P标签 拿到外部和div是兄弟关系 放到上面
before(‘div1‘)
ele.insertAfter(‘p‘) //向上同理 和prepend
ele.insertBefore(‘p‘)
赋值：
clone()
<div class=‘outer‘>
<div class=‘item‘>
<input type=‘text‘>
<input type=‘button‘ value=‘+‘ onclick=‘func1(this)‘>
<div/>
<div/>
function func1(self){ //直接找item 并复制 容易1变 2变4 用this就会只找一个
var clone = $(self).parent().clone(); //找到标签对象
clone.children(‘:button‘).val(‘-‘).attr(‘onclick‘,‘func2(this)‘);
//把+号变成-号 添加多了可以删除 .attr是修改新的标签对象的onclick的对象名字
$(‘#outer‘).append(clone);
}
function func2(){
$(self).remove() //删除当前带this的标签
}
删除：
remove() 直接删除标签
empty() 清空标签
事件：
加载完成 在执行函数 windows.onload 一样
$(document).ready(function(){
$(this).css(‘color‘,‘red‘)
})
简写：
$(function(){
$(this).css(‘color‘,‘red‘)
})
绑定事件：
$(‘div‘).click(function(){
alert(123)
})
事件委托：
function add(){ 动态添加标签li
$(‘ul‘).append(‘<li>5555</li>‘)
}
on(‘事件‘,‘查找‘,‘[data一般不用]‘,‘function‘)
$(‘ul‘).on(‘click‘,‘li‘,function(){ 动态绑定元素触发事件 没有selector参数 就不成立 不能动态触发
alert(456)
})
data方法:
function maHandler(){
event.data.foo2 拿到bar
}
$(‘ul‘).on(‘click‘,{foo:‘bar‘},maHandler)
取消绑定事件：
off(event,selector,function)
拖动面板：
动画效果：
过度动画
$(‘p‘).show(1000); 显示 参数是1秒过度动画
$(‘p‘).hide(1000); 隐藏 参数是1秒过度动画
$(‘p‘).toggle(1000); 切换（显示，隐藏）
淡入淡出：
$(‘p‘).fadeIn(1000); 淡入
$(‘p‘).fadeOut(1000); 淡出
$(‘p‘).fadeToggle(1000); 切换
$(‘p‘).fadeTo(1000,0.3); 淡出 0.3的透明度
滑动滑出：
$(‘p‘).slideDown() 滑出
$(‘p‘).slideUp() 滑入
$(‘p‘).slideToggle() 切换
回调函数：
$(‘p‘).show(1000,function(){
1000,执行成功后在执行function函数
});
扩展方法：
$.extend({
getmax:function(a,b){ getmax是键
return a>b?a:b 如果a>b 成立？返回a 否则：返回b
}
})
调用的话用键调用
$.getmax(5,8)
$.fn.extend({ fn 是标签对象
print:function(a,b){
console.log(123)
}
})
调用的话用键调用
$(‘p‘).print()
在自定制方法后 把方法外面加一层function 私有域
页面布局：
1、滚动滑轮的事件
2、内容到窗口的距离
3、position:absolute
定位置：右下角
滚动的时：不固定 随着滚动
+++++++++++++++++后台管理页面的布局+++++++++++++++++++
利用： absolute + overflow:auto;
上菜单和左菜单 固定的
无overflow
+++++++++++++++++滚动菜单的功能+++++++++++++++++++
1 监听滑轮滚动事件
$(‘body‘).scrollTop() 滚动就执行一次
2 如何获取当前滚轮滑动事件
$(‘body‘).scrollTop() 监听滚动的高度
$(‘body‘).scrollTop(0) 设置滚动的高度
$(‘div1‘).offset() 获取当前标签距离距离顶部的高度
$(‘div1‘).height() 永远获取自己的高度，获取当前标签的自身高度
$(‘div1‘).innerHeight() 永远获取自己的高度+padding ；获取第一个元素内部区域高度（包括补白，步包括边框）
$(‘div1‘).outerHeight() false永远获取自己的高度+padding+border ； 获取第一个元素外部区域高度（默认包括补白和边框） 设置为 true时 ，计算边距在内。
true永远获取自己的高度+padding+border+margin ；
$(‘div1‘).