jQuery入门

作者: 刘刀文 | 来源:发表于2016-11-13 11:48 被阅读0次

1. jQuery是一个JavaScript库

提供强大的选择器、简洁的API、优雅的链式、便捷的操作，核心理念 The Write Less,Do More（写更少，做更多）。包括3个大版本:

1字开头的:做了很多低版本IE兼容处理的;
2字开头的:基本抛弃了低版本IE（9以下）;
3字开头的 :2开头的基础上加了些新的功能
http://jquery.com/ 英文站
http://www.jquery123.com/ 中文站

2. jQuery获取元素

$(callBack)
$(document).ready(callBack)
$( ).ready(callBack)
这三种方法就相当于JS中的window.onload用于获取加载页面中的元素，三种方法可以同时在一个页面中存在。

<pre>$(function(){
console.log($('input')); //length:2
console.log($('#box')); //length:1
console.log($('span','#div1')); //从div1身上去获取span标签
console.log($('li',$('.list')));
console.log($('.list li'));
console.log($('.list span')); //length:0
//用原生js获取到的元素不能使用jquery里的方法,如果想用的话那就把原生js获取到的元素转成jquery的形式.
var div2=document.getElementById("div2");
$(div2).css('background','red');//把原生js的对象包装成jquery的对象
});
</script>
</head>
<body>
<input type="button" value="按钮" />
<input type="button" value="按钮" />
<div id="box">123</div>
<div id="div1">
<span>Wendaoliu</span>
</div>
<ul class="list">
<li>Wendaoliu1</li>
</ul>
<div id="div2">Wendaoliu2</div>
</body> </pre>

3. jQuery中的事件

jquery里的事件(没有on)。
语法：$(元素).click(callBack);
<pre><script src="jquery-3.1.0.js"></script>
<script>
$(function(){
$('#btn').click(function(){
console.log(this); //原生的this一样是指向触发事件的对象
console.log($(this)); //指向jquery的对象
});

            $('#box').mouseover(function(){
                $(this).css('background','green');
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btn" value="按钮" />
    <div id="box"></div>
</body></pre>

4. jQuery中CSS方法

css( )关于样式style的一些操作:
1个参数:获取属性的值
参数为一个对象的话，表示设置属性，可以同时设置多个属性的值
2个参数:设置属性的值
第一个参数是属性名;第二个参数为属性名对应的值
表单的value值:
val( ):获取表单对应的value值
val(values):设置表单的value值
<pre><script src="jquery-3.1.0.js"></script>
<script>
$(function(){
console.log($('#box').css('width')); //100px
$('#box').css('width',200); //设置box的width为200
$('#btn').click(function(){
$('#box').css({width:200,height:200,background:'green'});
});
console.log($('#btn').val()); //按钮
$('#btn').val('Wen'); //有参数的话就是设置value值
});
</script>
</head>
<body>
<input type="button" id="btn" value="按钮" />
<div id="box"></div>
</body></pre>

5. jQuery中的attr( )、data( )、html( )、text( )和链式操作

attr( ):关于标签属性的操作
一个参数:获取元素的某个属性,参数的值就是属性名字；
两个参数:设置元素的某个属性，第一个参数为属性名字，第二个参数为属性要设置成的值。
data( )给标签添加数据
有参数的话，是添加数据（用对象的形式去表示）；没参数的话，是获取数据
html( )取元素里的内容，与js中的innerHTML的效果是一样的
text( )取元素里的文字，不取标签
链式操作：对一个元素进行连续的操作

<pre><script src="jquery-3.1.0.js"></script>
<script>
$(function(){
console.log($('p').attr('class')); //con
$('p').attr('class','text');
$('input').attr('value','按钮'); //这种方与val()这个方法的效果是一样的
$('input').attr('name',123); //可以添加自定义属性
console.log($('input').attr('name')); //123
$('p').data({'name':'Wendaoliu','age':25});
console.log($('p').data());
});
</script>
</head>
<body>
<p class="con">Wendaoliu</p>
<input type="button" value="按钮" />
</body></pre>
<pre><script src="jquery-3.1.0.js"></script>
<script>
$(function(){
console.log($('div').html( )); //这是<span>一个</span>无名<span>之地</span>
console.log($('div').text( )); //这是一个无名之地
$('div').html('<p><span>Wendaoliu</span></p>');
$('div').text('Wendaoliu123');
})
</script>
</head>
<body>
<div>这是<span>一个</span>无名<span>之地</span></div>
</body></pre>
<pre><script src="jquery-3.1.0.js"></script>
<script>
$(function(){
$('div').css({width:100,height:100,background:'red'}).html('<span>kaivon</span>').click(function(){
$(this).css('color','blue');
});
});
</script>
</head>
<body>
<div><span>这是一个无名之地</span></div>
</body></pre>

6. jQuery中节点的操作

子节点
.first( )：获取第一个子节点；
.last( )：获取最后一个子节点；
.slice(start,end)：截取部分子节点。start 起始位置；end结束位置,不包含结束位置，第二个参数不写的话，截到最后一位。
.children( )：获取到元素里的第一层子节点。参数如果没有的话，获取到父级下的所有子节点；有参数的话，参数是一个选择器，找到对应选择器的节点。
.find( )：获取元素里的所有节点；
.prev( )：上一个兄弟节点；
.next( )：上一个兄弟节点；

<pre><script src="jquery-3.1.0.js"></script>
<script>
$(function(){
$('li').first().css('background','red');
//$('li').last().css('background','green');
$('li').slice(2,4).css('background','yellow');
$('li').slice(4).css('background','blue');
});
</script></pre>
<pre><script src="jquery-3.1.0.js"></script>
<script>
$(function(){
$('ul').children().css('color','red');
$('ul').children('.blue').css('color','blue');
$('ul').find('li').css('background','pink');
$('ul').find('span').css('background','black');
})
</script>
</head>
<body>
<ul> <li>red</li> <li>green</li> <li class="blue">blue</li> <li>yellow</li> <li>pink<span>black</span></li> </ul>
</body></pre>

父节点
.parent( )：元素的第一层父节点
.parents( )：元素的所有父节点，它会一直往上找，直到找到html
.closest()：从自身开始找，一层一层往外找，找到最近满足条件的元素，找到一个以后就不再找了。
节点操作
父级.append(要添加的元素)：把要添加的元素添加到父级的最后面；
父级.prepend(要添加的元素)：把要添加的元素添加到父级的最前面；
元素.before(要添加的元素)：把要添加的元素添加到一个指定的元素的前面；
元素.after(要添加的元素)：把要添加的元素添加到一个指定的元素的后面；
要添加的元素.appendTo(父级):把要添加的元素添加到父级的最后面；
要添加的元素.prependTo(父级):把要添加的元素添加到父级的最前面；
要添加的元素.insertBefore(元素):把要添加的元素添加到一个指定的元素的前面；
要添加的元素.insertAfter(元素):把要添加的元素添加到一个指定的元素的后面；

<pre><script src="jquery-3.1.0.js"></script>
<script>
$(function(){
var li1=$('<li>red</li>'); var li2=$('<li>green</li>'); var div3=$('<div>blue</div>'); var div4=$('<div>yellow</div>');
$('#list').append(li1);
$('#list').prepend(li2);
$('#list').before(div3);
$('#list').after(div4);
});
</script>
</head>
<body>
<ul id="list"></ul>
</body></pre>
<pre><script src="jquery-3.1.0.js"></script>
<script>
$(function(){
var li1=$('<li>red</li>'); var li2=$('<li>green</li>'); var div3=$('<div>blue</div>'); var div4=$('<div>yellow</div>');
li1.appendTo($('#list'));
li2.prependTo($('#list'));
div3.insertBefore($('#list'));
div4.insertAfter($('#list'));
});
</script>
</head>
<body>
<ul id="list"></ul>
</body></pre>

4.remove( ) 删除元素：元素.remove()；
clone(blooen) 克隆元素：参数默认为空，表示只复制元素，不复制事件。如果参数为true，表示元素与事件都会被复制。
<pre><script src="jquery-3.1.0.js"></script>
<script>
$(function(){
$('li').first().remove();
$('span').click(function(){
alert(1);
});

            var newSpan=$('span').clone(true);
            newSpan.appendTo($('div'));
        });
    </script>
</head>
<body>
    `<ul>
        <li>red</li>
        <li>green</li>
        <li>blue</li>
    </ul>`
    <span>点击我</span>
    <div></div>
</body></pre>

7.索引、循环、get( )、wrap( )

index( )
没有参数:第一个元素（获取到的这个元素，因为jquery获取到的是一组数据）在兄弟元素中的排行;
有参数:代表前面的元素在参数的标签（所有标签，不分兄弟）里排行第几。
<pre><script src="jquery-3.1.0.js"></script>
<script>
$(function(){
console.log($('#div1').index()); //0
console.log($('div').index()); //1
console.log($('span').index()); //4
console.log($('#s1').index('span')); //2
console.log($('#s2').index('span')); //5
console.log($('.box').index('span')); //-1表示没有找到
});
</script>
</head>
<body>
<p>p</p>
<div>div</div>
<div>div</div>
<div>
<div id="div1"></div>
</div>
<span></span>
<span></span>
<div class="box">
<span id="s1">s1</span>
<span></span>
<span></span>
</div>
<div><span id="s2">s2</span></div>
</body></pre>
循环each(i,elem)
i：每个元素对应的下标（索引）；
elem：每个元素，原生的元素；
<pre><script src="jquery-3.1.0.js"></script>
<script>
$(function(){
$('li').each(function(i,elem){
console.log(i,elem);
console.log(this==elem); //true
if(i==3){
return false; //跳出循环
}
$(elem).html(i); //elem是一个原生的对象，需要要转成jquery的对象
});
});
</script>
</head>
<body>
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
</body></pre>
get(index):把jquery对象转成原生对象，index是元素的索引值。原生对象转jquery对象用$。
eq(index) ：参数为下标，通过索引找到对应的元素。
<pre><script src="jquery-3.1.0.js"></script>
<script>
$(function(){
console.log($('#div1').html()); //Wendaoliu
console.log($('#div1').innerHTML); //undefined
console.log($('div').get(0).innerHTML); //Wendaoliu
console.log($('div').get(1).innerHTML); //Wendaodao
console.log($('div').eq(1).html()); //Wendao
})
</script>
</head>
<body>
<div id="div1">Wendaoliu</div>
<div id="div1">Wendao</div>
<div>Wen</div>
</body></pre>
wrap( )：在标签外在加一层父级；
wrapAll( )：把所有的标签都拿过来放在一起，然后在他们的外面加一个父级；
wrapInner( )：在父级的里面添加一个标签，并把内容放到这个标签里面；
unwrap( )：删除父级(不包含body标签)；
<pre><script src="jquery-3.1.0.js"></script>
<script>
$(function(){
$('input').click(function(){
if($(this).val()=='管理员'){
$('span').wrap('<a href="#"></a>');
}else{
$('span').unwrap();
}
});
})
</script>
</head>
<body>
<input type="radio" value="管理员" name="user" />管理员
<input type="radio" value="普通用户" name="user" />普通用户
<span>登录</span>
</body></pre>

8. jQuery中的尺寸

元素的尺寸
width( )：获取元素的宽度（值不带单位），有参数的话，代表设置宽度，参数不用带单位；
height( )：获取元素的高度；
innerWidth( )：width+padding
innerHeight( )：height+padding
outerWidth( )：width+padding+border
outerHeight( )：height+padding+border
<pre><style>
#box{
width: 100px;
height: 150px;
background: red;
padding: 10px;
margin: 10px;
border: 1px solid #000;
}
</style>
<script src="jquery-3.1.0.js"></script>
<script>
$(function(){
console.log($('#box').width()); //100
console.log($('#box').height()); //150
console.log($('#box').innerWidth()); //120
console.log($('#box').innerHeight()); //170
console.log($('#box').outerWidth()); //122
console.log($('#box').outerHeight()); //172
$('#box').width(200);
$('#box').height(300);
console.log($('#box').get(0).offsetWidth); //222
});
</script>
</head>
<body>
<div id="box"></div>
</body></pre>
可视区的尺寸
<pre><script src="jquery-3.1.0.js"></script>
<script>
$(function(){
//页面的宽高
console.log($(document).width());
console.log($(document).height());
```
         //可视区的宽高
         console.log($(window).width());
         console.log($(window).height());
     });
 </script>
```
</head>
<body style="height: 2000px;">
</body></pre>
元素相对于文档的距离：
offset( ).left
offset( ).top
元素相对于父级的距离：
position( ).left
position( ).top
position的值是不会受margin影响的，或者说它的值不加margin。
offsetParent( )：找到最近的有定位的父级

<pre><style>
*{
margin: 0;
padding: 0;
}
#div1{
width: 200px;
height: 200px;
background: red;
position: absolute;
left: 50px;
top: 50px;
}
#div2{
width: 100px;
height: 100px;
background: green;
margin: 50px;
position: absolute;
left: 20px;
top: 20px;
}
</style>
<script src="jquery-3.1.0.js"></script>
<script>
$(function(){
console.log($('#div1').offset().top); //50
console.log($('#div1').offset().left); //50
console.log($('#div2').offset().top); //120
console.log($('#div2').offset().left); //120
console.log($('#div2').position().left); //20
console.log($('#div2').position().top); //20
//绿色块离红色块的真正距离
console.log($('#div2').offset().left-$('#div1').offset().left);//70
console.log($('#div2').offsetParent()); //div1
})
</script>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body></pre>

滚动条的距离:scrollTop()、scrollLeft()如果有参数，就代表设置滚动条的距离。
<pre><script src="jquery-3.1.0.js"></script>
<script>
$(function(){
console.log($(document).scrollTop());

            $(document).scrollTop(500);
        })
    </script>
</head>
<body style="height: 2000px;">
</body></pre>

9. jQuery事件

<pre><style>
#box{
width: 100px;
height: 100px;
background: #f00;
}
</style>
<script src="jquery-3.1.0.js"></script>
<script>
$(function(){
$('#box').click(function(){
console.log(1);
});
$('#box').on('click',function(){
console.log(3);
});
$('#box').on('click mouseover',function(){
console.log(4);
});

            $('#box').on('click',function(){
                console.log(5);
                $(this).off();      //移除事件
            });
        });
    </script>
</head>
<body>
    <div id="box"></div>
</body></pre>

clientX：不带滚动条的距离；pageX：带滚动条的距离。
<pre><style>
#box{
width: 100px;
height: 100px;
background: #f00;
}
</style>
<script src="jquery-3.1.0.js"></script>
<script>
$(function(){
$('#box').click(function(ev){
console.log(ev.clientY);
console.log(ev.pageY);
});
$(document).keydown(function(ev){
console.log(ev.keyCode);
});
});
</script>
</head>
<body style="height: 2000px;">
<div id="box"></div>
</body></pre>

事件委托
<pre><script src="jquery-3.1.0.js"></script>
<script>
//第二个参数是把事件添加到谁的身上
$(function(){
$('ul').on('click','li',function(){
//这里面的this指向第二个参数
console.log($(this));
$(this).css('background','red');
});
$('input').click(function(){
var li=$('<li>2222</li>');
$('ul').append(li); //li.appendTo($('ul'));
});
});
</script>
</head>
<body>
<input type="button" value="添加" />
<ul style="border: 1px solid #f00;"> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> </ul>
</body></pre>
自定义事件
<pre><script src="jquery-3.1.0.js"></script>
<script>
$(function(){
$('span').on('点击我',function(){
console.log('被你宠幸了');
});
$('div').on('鼠标移入',function(){
console.log('你进去了');
});

            $('span').click(function(){
                $('span').trigger('点击我');
            });
            
            $('div').mouseover(function(){
                $(this).trigger('鼠标移入');
            });
        });
    </script>
</head>
<body>
    <div><span>点击</span></div>

</pre>

10.jQuery工具方法、运动

<pre>1.$(选择器).css() $(选择器).html() $(选择器).trigger()
以上这些都是jquery里的方法，原生的不能直接用；
2.$.xxx() $.yyy()
这些方法是jquery里的方法，原生的也可以直接用。
$.type()：检测参数的类型
http://www.jquery123.com/jQuery.type/
$.isFunction()：检测参数是不是函数
http://www.jquery123.com/jQuery.isFunction/
$.isNumeric()：检测参数是不是个数字
http://www.jquery123.com/jQuery.isNumeric/
$.isArray()：检测参数是不是数组
http://www.jquery123.com/jQuery.isArray/
$.isWindow()：检测参数是不是window对象
$.isEmptyObject()：检测对象是否为空
$.isPlainObject()：检测对象是不是纯粹的对象，通过{}、new Object()创建的对象称为纯粹的对象
</pre>

show( )、hide( )、toggle( )、animate( )方法
show(duration,easing,complate)显示
hide(duration,easing,complate)隐藏
toggle(duration,easing,complate) 在两种效果之间进行切换
渐隐渐现：fadeIn(duration,easing,complate) 显示
fadeOut(duration,easing,complate)隐藏
fadeToggle(duration,easing,complate) 在两种效果之间进行切换
slideUp(duration,easing,complate)收缩
slideDown(duration,easing,complate)展开
slideToggle(duration,easing,complate)在两种效果之间进行切换
animate(property,duration,easing,complate)
property 要运动的属性，它是一个对象。
设置延迟:delay(time)
停止动画
stop():只停止当前的运动（属性），后面的运动还会接着走；
stop(true):所有的运动都停了；
stop(true,true)：当前的属性会马上到达目标点，后面的运动不会走；
finish()：所有的属性都会马上到达目标点，没运动的效果。
参数：
duration：slow-600；normal-400；fast-200
easing：linear,swing(默认)
complate：运动完成后执行的回调函数。

<pre>$(function(){
var btn=true;
$('input').click(function(){
if(btn){
/$('div').hide(500,'linear',function(){
console.log('隐藏运动完成了');
});/
$('div').hide(400); //默认是没有时间的，需要传一个时间参数
}else{
$('div').show(400);
}
btn=!btn;
});
})
</script></pre>
<pre>$(function(){
$('input').eq(0).click(function(){
$('#div1').animate({width:400},2000).delay(2000).animate({height:300},2000,function(){
$('#div2').animate({width:400},2000,'swing');
});
});

            $('input').eq(1).click(function(){
                $('#div3').animate({width:'-=100'},500,'linear');
            });
            
            $('input').eq(2).click(function(){
                $('#div4').animate({width:'toggle',height:"toggle"},500,'linear');
            });
        });
    </script></pre>

animate需要注意的问题：
<pre><script>
$(function(){
$('#div1').mouseover(function(){
$('#div1').stop().animate({width:400,height:400});
}).mouseout(function(){
$('#div1').stop().animate({width:300,height:200});
});
});
</script></pre>

jQuery入门

1. jQuery是一个JavaScript库

2. jQuery获取元素

3. jQuery中的事件

4. jQuery中CSS方法

5. jQuery中的attr( )、data( )、html( )、text( )和链式操作

6. jQuery中节点的操作

7.索引、循环、get( )、wrap( )

8. jQuery中的尺寸

9. jQuery事件

10.jQuery工具方法、运动

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

我爱编程