入口函数
$(function(){
})//形成沙箱 不会变量污染
jquery转dom
$(‘li’).get(1)
$(‘li’)[1]
ID选择器 $(“#id”); 获取指定ID的元素
类选择器 $(“.class”); 获取同一类class的元素
标签选择器 $(“div”); 获取同一类标签的所有元素
并集选择器 $(“div,p,li”); 使用逗号分隔,只要符合条件之一就可。
交集选择器 $(“div.redClass”); 获取class为redClass的div元素
子代选择器 $(“ul>li”); 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素
后代选择器 $(“ul li”); 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等
:eq(index) $(“li:eq(2)”).css(“color”, ”red”); 获取到的li元素中,选择索引号为2的元素,索引号index从0开始。
:odd $(“li:odd”).css(“color”, ”red”); 获取到的li元素中,选择索引号为奇数的元素
:even $(“li:even”).css(“color”, ”red”); 获取到的li元素中,选择索引号为偶数的元素
:first $(“li:first”).css(“color”, ”red”); 获取到的li元素中的第一个
:last $(“li:last”).css(“color”, ”red”); 获取到的li元素中的最后一个
children(selector) $(“ul”).children(“li”) 获取当前元素的所有子元素中的li元素
find(selector) $(“ul”).find(“li”); 获取当前元素中的后代元素中的li元素
siblings(selector) $(“#first”).siblings(“li”); 查找兄弟节点,不包括自己本身。
parent() $(“#first”).parent(); 查找父亲
eq(index) $(“li”).eq(2); 相当于$(“li:eq(2)”),index从0开始
next() $(“li”).next() 找下一个兄弟
prev() $(“li”).prev() 找上一次兄弟
index() 获取元素索引值
attr() 设置属性
情况一: attr(name,value) //设置单个属性 $('img').attr("title","这是图片")
情况二: attr({key:value,key2:value2}) // 设置多个属性 $('img').attr({ "title": "这是图片", 'alt': '哈哈' })
情况三: attr(name) // 获取属性的值 $('img').attr('title')
removeAttr() 移除单个或者多个属性
$('img').removeAttr('alt') // 移除单个属性
$('img').removeAttr('alt title') // 移除多个属性中间用"空格隔开"
prop()
1.6版本以后凡是布尔类型属性如:checked disabled selected不在使用attr来操作,换成prop
attr() 处理非布尔类型的固有的或者 自定义属性
prop() 处理自带属性和布尔类型属性, 不能自定义属性
show(time,func) 展示动画
time:单位毫秒,可以直接数字,也可以固定字符串形式:fast:快=200ms normal:正常=400ms slow:慢=600ms
hide() 隐藏动画
toggle()动画切换
fadeIn()
fadeOut()
fadeToggle() 淡入淡出
slideDown()
slideUp()
slideToggle()拉/上卷动画(没有参数时默认是normal也就是400ms):本质就是改变元素的height属性
自定义动画 animate()
参数1:必填,给动画设置样式 是个对象
参数2:指定动画时间,默认是normal
参数3:指定动画效果 默认是swing ,常用的还有linear等等
参数4:回调函数,动画完成后执行
$('div').eq(0).animate({ left: 1000 }, 5000, function () {
console.log('动画执行结束了');
});
stop()停止动画
参数一:是否清除被选元素所有加入队列的动画?true/false,默认false
参数二: 是否直接跳到最后的执行结果?true/false,默认false
如果参数stop(true,true) 第一参数是true动画队列会被清除,所以即使第二参数也是true,但因为动画队列被清除后没有了后续动画也就执行不到最终的效果
$('<button>看我是一个按钮</button>')//创建元素
// parent.append(child)
$('div').append( $('<p>这是新建的p标签</p>') );//给该元素添加一个p
$('<span>这是个span </span>').appendTo($('div'));//该元素添加到div
$('div').prepend($('<div>这是新建的最前边?标签</div>'));//添加到最前面
$('<p>这是一个P</p>').prependTo( $('div') );
$('div').before('<p>前面一个P</p>') 同级的添加
$('div').after('<p>后面一个P</p>')同级的添加 放后面
remove()删除自身,内部子元素一并删除
empty()清空内部所有元素,不包括自身
clone()参数默认false,参数false:克隆标签元素等,参数true: 深度克隆 包括事件
val() 设置和获取表单元素的值,如text,textarea等等
html() 相当于 innerHtml
text() 相当于 innerText
width()无参数:获取元素width,有Number类型参数:设置width
innerWidth()获取元素panding和width
outerWidth()无参数,参数默认是false时:获取元素pading和border和width
参数是true时:获取元素pading和border和width和margin
height()同上
scrollTop()和scrollLeft()
scrollTop() 获取被卷曲的高度, 可设置卷曲高度
scrollLeft() 获取被卷曲的宽度,可设置卷曲高度
position()和offset()
offset方法和position方法都是用来获取盒子的位置的 left和top
offset方法获取的是盒子在整个'文档'中的位置
position方法获取相对父级元素[自身有定位,否则相对文档左上角]的偏移位置 offsetLeft和offsetTop
都是返回一个对象
$(selector).on( "click", function() {});事件注册
// 表示给$(selector)绑定代理事件,当必须是它的内部元素span才能触发这个事件,支持动态绑定
$(selector).on( "click",“span”, function() {});