jquery 笔记集合1 选择器 CSS样式 函数 事件 节点
来源：互联网 发布：中国医科大学网络教育 编辑：程序博客网 时间：2024/06/04 19:06
window.onload = function(){}
$(function (){}
两者都表示加载完body后再加载
// 1.$(' 标签名 / id属性名/ class属性名 /*')
$('p').css('color','red'); //单个属性
$('p').css({ 'color':'red' , 'background':'yellow' }); //多个属性
// 2.属性选择器
$('[id]').css('color','red');
$('[id != id1]').css('color','red');
$('[id ^= i]').css('color','red');
$('[id $= 2]').css('color','red');
<p id="id1">么么哒1</p>
<p id="id2">么么哒2</p>
// 3.$('p') jQuery对象 去调用DOM属性
$('p')[0].style.color = 'red';
// 4.dom对象 去调用DOM属性
var pp = document.getElementById('id1');
$(pp).css('backgroundColor','yellow');
层次选择器:
1).$('h1,h2,p')组合选择器
2).$('div span')后代选择器
3).$('div>span') 直接后代
4).$('#one+div')选取id为one的元素的下一个<div>同辈元素 等同于$(#one).next(“div”)
$('div+span').css('color','blue');
$('div').next('span').css('color','blue');
5).$(“#one~div”) 选取id为one的元素的元素后面的所有<div>同辈元素 等同于$(#one).nextAll("div”)
6).$(#one).siblings("div") 获取id为one的元素的所有<div>同辈元素（不管前后）
7).$(#one).prev("div") 获取id为one的元素的前面紧邻的同辈<div>元素
并且(过滤)选择器:
1.:first :last 第一个 / 最后一个
$('li:first').css('color','red');
2. $('li:eq(1)') 下标索引 默认从零开始
3. :gt(索引号) 大于某个范围 :lt(索引号) 小于某个范围
4. :even 索引为偶数的所有元素 :odd 索引为奇数的所有元素
5. :not 反选li当中除了class为test当中的所有元素
$('li:not(.text)').css('color','red');
6. header 匹配所有h1-h6的元素
$(':header').css('color','blue');
$('.h:header').css('color','blue'); //class为h中的h1-h6的元素
多个并且关系的选择器，没有前后顺序，但是要避免歧义
内容过滤选择器:
1. :contains() 获得节点内部必须包含指定的内容。不考虑层级关系
$('div:contains(bei)').css('color','red');
2. 空节点选择器：获得空元素（内部没有任何元素/文本）的节点对象
$('div:empty').css('background','blue');
3. has选择器：节点内部必须包含指定的选择器元素
$('div:has(span)').css('color','red');
4. parent选择器： 获取作为父节点存在的节点
$('div:parent').css('color','red');
表单域选中选择器:
1. :checked 获得被选中的单选框
//console.log($('radio:checked')); 不可以这样写,错误
console.log($('.s:checked'));
2. :checked 获得被选中的复选框
console.log($('.ch:checked'));
3. select 获得被选中的下拉列表项目
console.log($('option:selected'));
内置函数:
// js
window.onload = function(){
alert('111');
}
// jquery
1.ready函数
$('document').ready(function(){
alert('111');
})
2. .hide() 隐藏
3. .show() 显示
4. map 函数(遍历数组进行操作,最后返回一个新的数组)
arr.map(function(元素,下标){执行操作}
5. each函数 (只做遍历,不会返回一个新的数组)
1>.遍历数组 $.each(arr3,function(下标,元素){执行操作})
var arr4 = $.each(arr3,function(elem,index){
if(index == 2){
return false; //停止循环
}
});
console.log(arr4,arr3); //arr4,arr3的数组内容是一样的
2>遍历对象 $.each(cat,function(键,值){执行操作})
var cat = {
name:'kitty',
color:'pink',
climb:function (){console.log('吃')}
}
$.each(cat,function(k,v){
console.log(k+"--------------"+v);
})
CSS样式操作:
1. 获取 行内 内联 外链的样式
console.log($('div').css('width'));
2. 获取某个元素的多个样式
console.log($('div').css(['width','height']))
3. 修改的都是行内样式
$('div').css('width','200px');
$('div').css('font-size','30px');
4. 颜色值返回的是rgb
$('div').css('color',function (index,value){
console.log(index,value);
return 'pink';
});
5. 批量修改样式
$('div').css({'color':'pink','width':'200px'});
value值操作:
1. 获取文本框的内容也就是value值
console.log($('input').val());
2. 获取单选框的value值
console.log($('.s:checked').val());
3. 获取复选框的选中的内容
console.log($('.box:checked')); 输出的是一个数组
var check = $('.box:checked'); 逐个输出 value值
for(var i=0;i<check.length;i++){
// dom js中的方法获取值 console.log(check[i].value);
console.log($(".box:checked:eq("+i+")").val());
}
5. 设置文本框的值
$('.text').val("呵呵");
6.设置单选框的选中
$('.s').val(['c']);
7. 设置复选框的选中
$('.box').val([1,3]); //选中value值为 1和3 的选项
8. 获取下拉列表框的value值
// 单选
console.log($('option:selected').val());
// 多选
console.log($('select').val())
9.设置下拉列表框的value值的选中
$('select').val(['E','A']);
事件的简单操作:
$(selector).事件类型（处理函数）
1. mouseover 鼠标经过 mouseout 鼠标离开 mouseenter()进入 mouseleave()离开
$('div').mouseover(function (){
// $('strong').html('你们很聪明'); //strong标签调用.html()函数设置内容
$('strong').html(function (index,value){
// index 接收选择器的 index 位置
// value 接收选择器的当前内容
return value + 1;
});
});
2. 给同一个对象添加相同的事件
3. mouseenter()和mouseleave()在穿过子元素的时候不会触发
不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。若离开,触发mouseout事件
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。若离开.触发mouseleave事件
事件的绑定与取消:
$('div').bind(事件类型，事件处理函数 匿名 有名)
1.绑定事件
$('div').bind('mouseover',function (){
$('div').css('background','pink');
})
2.可以给对象的多个事件绑定同一个处理函数
$('div').bind('mouseover mouseout',function(){
console.log('1234');
})
3.通过json对象同时绑定多个不同类型的事件
$('div').bind({
click:function (){console.log('点击');},
mouseover:function (){console.log('s');},
mouseout:function (){console.log('b');},
});
4.可以绑定同一事件的不同处理函数
$('div').bind('click',clickAction);
$('div').bind('click',clickAction1);
5.jquery事件的取消
$('div').unbind(); //取消所有
$('div').unbind('click'); //取消指定类型的全部事件
$('div').unbind('click',clickAction); // 取消指定类型的指定事件 此种方式取消事件必须是有名函数
6.---------阻止浏览默认操作 阻止事件冒泡
阻止浏览默认操作
事件对象.preventDefault () 主流
事件对象.returnValue = false IE
阻止事件冒泡 (从里到外)
事件对象.stopPropagation() 主流
事件对象.cancelBubble = true IE
$().bind('click',function (evt){
evt.preventDefault(); //阻止默认事件
evt.stopPropagation(); //阻止冒泡
})
节点操作:
1>在被选元素的结尾/开头插入节点
父节点.append(子节点); //后置添加 在所有子节点后面
$('#xi').append('<li>白龙马</li>');
指定节点.prepend(); //前置添加 在所有子节点前面
要追加的节点.appendTo(父节点); 在所有子节点后面
2>在被选元素之后/之前插入节点
指定节点.after('<li></li>'); 后置添加
指定节点.before('<li></li>'); 前置添加
新添加节点.insertAfter(指定节点); 后置追加
新添加节点.insertBefore('selector') 前置追加
3>替换节点
被替换的节点.replaceWith(将要替换的节点);
将要替换的对象.replaceAll(被替换掉的对象);
4>删除节点
选中节点.empty(); //清空选中节点的所有子节点
要删除的节点.remove(); //删除掉匹配到的节点
5>copy节点
要被复制的节点.clone(true); //节点以及本身上的事件都被复制
要被复制的节点.clone(false); // 只复制节点本身，（包括节点内部信息）
添加事件
$('#xi li').mousemove(function(){
// mousemove 里面会有遍历
$(this).css('color','red');
});
节点包裹:
1.wrap() unwrap()
1>.html
$('p').wrap('<div></div>'); //多个p 会进行分别包裹
$('p').wrap('<div><strong></strong></div>');
2>.element
$('p').wrap(document.createElement('div'));
3>.函数
$('p').wrap(function (index){
return "<div><strong>"+index+"</strong></div>";
});
4>.移除
$('p').unwrap(); //移除一层指定元素包裹的内容 html
$('p').unwrap(); //加了多个要一层一层移除
2.$(selector).wrapAll(html) 用 html 将所有元素包裹到一起
$('p').wrapAll('<div></div>'); //html
$('p').wrapAll(document.createElement('div'))
3.wrapInner 向指定元素的子内容包裹一层html (向内部添加子节点)
$('p').wrapInner('<div></div>');
$('p').wrapInner(document.createElement('div'));
节点的查找:
1.查找子节点 find() children()
$('div').find('span').css('color','pink'); //查找div内部的所有子节点span
$('div').children('span').css('color','pink'); //只查找div内部的直接子节点span
2.查找父节点