JQuery常用选择器 事件 方法 样式属性操作

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_38165374/article/details/70958361

jquery选择器 

1. jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功（大于0选中，等于0未选中）。
2. $('#myId') //选择id为myId的网页元素
3. $('.myClass') // 选择class为myClass的元素
4. $('li') //选择所有的li元素
5. $('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
6. $('input[name=first]') // 选择name属性等于first的input元素

对选择集进行过滤

1. $('div').has('p'); // 选择包含p元素的div元素
2. $('div').not('.myClass'); //选择class不等于myClass的div元素
3. $('div').filter('.myClass'); //选择class等于myClass的div元素
4. $('div').eq(5); //选择第6个div元素，（index（）可以获取元素的索引）

常用事件

1. blur() 元素失去焦点
2. focus() 元素获得焦点
3. click() 鼠标单击
4. mouseover() 鼠标进入（进入子元素也触发）
5. mouseout() 鼠标离开（离开子元素也触发）
6. mouseenter() 鼠标进入（进入子元素不触发）
7. mouseleave() 鼠标离开（离开子元素不触发）
8. hover() 同时为mouseenter和mouseleave事件指定处理函数
9. ready() DOM加载完成
10. resize() 浏览器窗口的大小发生改变
11. scroll() 滚动条的位置发生变化
12. submit() 用户递交表单

选择集转移

1. $('div').prev(); //选择div元素前面紧挨的同辈元素
2. $('div').prevAll(); //选择div元素之前所有的同辈元素
3. $('div').next(); //选择div元素后面紧挨的同辈元素
4. $('div').nextAll(); //选择div元素后面所有的同辈元素
5. $('div').parent(); //选择div的父元素
6. $('div').children(); //选择div的所有子元素
7. $('div').siblings(); //选择div的同级元素
8. $('div').find('.myClass'); //选择div内的class等于myClass的元素

常用方法

1. width()、height() 获取元素width和height 
2. innerWidth()、innerHeight() 包括padding的width和height 
3. outerWidth()、outerHeight() 包括padding和border的width和height 
4. outerWidth(true)、outerHeight(true) 包括padding和border以及margin的width和height
5. offset()获取元素的绝对位置
6. $(document).scrollTop(); 获取页面上端滚动距离
7. $(document).scrollLeft();获取页面左端滚动距离

jquery特殊效果

1. fadeOut([speed],[easing],[fn]) 淡出
2. fadeToggle([speed],[easing],[fn]) 切换淡入淡出
3. hide([speed],[easing],[fn] 隐藏元素
4. show([speed],[easing],[fn]) 显示元素
5. toggle([speed],[easing],[fn]) 切换元素的可见状态
6. slideDown([speed],[easing],[fn]) 向下展开
7. slideUp([speed],[easing],[fn]) 向上卷起
8. slideToggle([speed],[easing],[fn]) 依次展开或卷起某个元素

[ ]为可选参数

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

操作行间样式

1. $("div").css("width");// 获取div的样式
2. $("div").css("width","30px");//设置div的样式
3. $("div").css({fontSize:"30px",color:"red"});//设置div的多个样

操作样式类名

1. $("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
2. $("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式
3. $("#div1").removeClass("divClass divClass2") //移除多个样式
4. $("#div1").toggleClass("anotherClass") //重复切换anotherClass样式

JQuery属性操作

1. html() 取出或设置html内容
2. prop() 取出或设置某个属性的值

例子

// 取出html内容

var $htm = $('#div1').html();

// 设置html内容

$('#div1').html('<span>添加文字</span>');

// 取出图片的地址

var $src = $('#img1').prop('src');

// 设置图片的地址和alt属性

$('#img1').prop({src: "test.jpg", alt: "Test Image" });