jq的风靡是我们都看的到的,之所以它会在众多的框架中脱颖而出,必定有其优秀之处,我在下面文章中跟大家分享一下jq中工作中经常遇到的API总结,相信它可以让一个不懂jq的人迅速的掌握到jq的强大,好了,废话不多说,一点点看
1
第一种:
$(function(){
});
第二种:
$(document).ready(function(){
});
第三种:
jQuery(function(){
});
需要注意的是
js和jq的入口函数不同点:
1:js的入口函数只能有一个,如果写了多个只执行最后一个
2:jq的入口函数可以写多个,并且顺序执行
2 Dom对象和jq对象是不能通用方法属性的,必须要通过转化才可以
dom转jq:$(ele)
jq转dom: 1、$(‘div’).get(0) 2、$(‘dv’)[0]
3 jq控制css属性
使用.css()方法来实现
语法:
1、 单属性修改: .css(‘属性名’,’属性值’);
2、 多属性修改: .css({‘属性名1’:’属性值1’,’属性名2’:’属性值2’…..});
3、 属性获取: .css(‘属性名’);
4 jq控制标签属性
只要使用.attr()方法即可,它的语法和css()的语法完全一样
5 jq设置html内容
使用.html()方法即可
获取html内容: $(‘span’).html();
设置html内容: $(‘span’).html(‘呵呵’);
6 jq的简单动画
对角线动画:
1、 show() 显示
2、 hide() 隐藏
3、 toggle() 切换
注意:对象线动画如果不添加时间参数,就没有动画效果哦
滑动动画:
1、slideUp() 隐藏
2、slideDown() 显示
3、slideToggle() 切换
注意:如果控制滑动动画的元素没有宽高属性,那么jq就会把动画改为对角线动画来展示
注意:时间参数可以写数字,也可以写英文单词字符串-fast、slow、normal
7 jq的基本选择器
$("#id") : id选择器,document.getElementById("id");
$(“div”) :标签选择器
$(".myClass") : 类选择器,返回所有class="myClass"的元素
$("*") : 返回所有元素,多用于结合上下文搜索
$("div,span,p.myClass") : 多条件选择器,返回所有查到的元素
$(‘.ul01 .li02’) :后代选择器
$(‘.ul01 .li02>li’):表示子代选择器 , 只能选择第一级的后代。
$('.ul01 .li02+li'):表示选中指定标签后面紧挨着的一个同级标签
$('.ul01 .li02~li'):表示选中指定标签后面的所有同级的某种标签
8 过滤选择器
过滤选择器的特点是在小括号中写冒号
:gt(2) 大于2
:lt(2) 小于2
:not(.class01) 排除某些元素
:eq(1) 选索引值
:first 选第一个
:last 选最后一个
9 筛选选择器
选父级元素 .parent()
选儿子级元素 .children()选兄弟级元素 .siblings()
10 hover事件
语法格式:
.hover(function(){
//这里是鼠标移入执行的代码
},function(){
//这里是鼠标移出执行的代码
})
注意:如果只写了一个匿名函数,就代表移入和移出执行的是同样的代码
11 jq动画排队机制
在jq中如果多次触发动画,那么这些动画就会排队等待执行,如果不想要这个排队效果,我们就在动画之前添加一个.stop()方法即可
$('.demo>li').hover(function(){
//鼠标移入和鼠标移出执行的是一样的代码
$(this).children('ul').stop().slideToggle();
})
12 jq中的索引值
直接使用.index()即可获取索引值
13 jq的链式编程
在jq中,如果是针对同一目标进行的操作,就可以使用“点“语法来实现连续书写代码
$('.conCenter li').eq($(this).index()).siblings().hide()
14、jq中控制类
addClass(‘myClass’) 添加类名
removeClass(‘myClass’) 删除类名
hasClass(‘myClass’) 判断是否含有某一个类名
toggleClass(‘myClass’) 切换某一个类名