jquery用法
引入jquery:
<script src=”js/jquery.mini.js”></script>
入口函数:等dom加载完毕执行
$(function(){
$(‘input’).hide();
})
$( ) = jquery( ) 包装jquery对象
声明并打印dom对象到控制台
var myDiv =document.querySelector(‘div’);
console.dir(myDiv)
打印jquery对象(伪数组形式包装)
console.dir($(‘div’))
dom转化为jquery
$(dom)
$(‘video’)
var myvideo=document.querySelector(‘video’);
$(myvideo)
jquery没有play方法
dom方法播放
myvideo.paly()
或者将jquery对象转换为dom对象
$(‘video’)[0].play()
$(‘video’).get(0).paly()
- jquery常用选择器
- jquery样式操作
- jquery动画
- jquery属性操作
- jquery元素操作
- jquery元素尺寸位置操作
$常用功能和方法
jquery选择器
$(“选择器”)
类选择 $(‘.nav’)
和css选择器基本一致
console.log($(‘ul li’));
隐形迭代
$(“div”).css(“background-color”,”pink”);
$(“ul li”).css(“color”,”red”);
筛选选择器
$(‘li:first’).css(“background-color”,”red”); /* 第一个 */
$(‘li:last’).css(“color”,”red”); /* 最后一个 */
$(‘li:eq(2)’).css(“color”,”red”); /* 第三个 */
$(“li:odd”).css(“color”,”red”); /* 奇数 */
$(“li:even”).css(“background-color”,”red”); /* 偶数 */
console.log((“.son”).parent()); /* 查找父级 */
console.log((“ul”).children(“li”)); /* 查找亲儿子 */
$(“ul”).find(“li”).css(“color”,”red”); /* 选择所有后代子孙,等同于$(“ul li”)的后代选择器 */
$(“ol .item”).siblings(“li”).css(“color”, “red”); //选择除了自己以外的兄弟元素
$(“ol .item”).nextAll()(“li”).css(“color”, “red”); //选择除了自己之后的兄弟元素
$(“ol .item”).prevAll().css(“color”, “red”); //选择除了自己之前的兄弟元素
$(“ol .item”).hasClass().css(“color”, “red”); //选择除了自己以外的兄弟元素
$(“div:first”).hasClass(“类名”); //是否含有类名,返回T/F
$(“ol .item:eq(2)”).css(“color”, “red”); //选择第三个的兄弟元素
<script>
$(function(){
$(“button”).click(function(){
$(this).css(“background-color”,”red”);
$(this).siblings(“button”).css(“background-color”,””)
});
})
</script>