Jquery基础

首先您需要去jQuery的官网去下载jQuery文档,然后通过javescript的src链接进去即可。恩，然后我们就可以来进行代码操作了。

<!--第一种引入方式     下载--直接引入-->
<script src="js/jquery-3.0.0.min.js" type="text/javascript" charset="utf-8"></script>
 <!--第二种引入方式---使用CDN引入-->
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

1、当所有DOM加载完毕之后执行的回调函数

写法一：
jQuery(document).ready(function(){}）
写法二：
$(document).ready(function(){}）
写法三：
$(function(){}）
注意：
1、
window.onload与jQuery的区别：前者需要图片加载之后  后者不需要。
2.jQuery ==$

2、jQuery的优势与劣势：

jq的优势:
1、轻量级：包小
2、强大的选择器
3、出色的dom操作
4、可靠的事件处理机制
5、完善的ajax
6、出色的浏览器兼容
7、链式操作方式
8、丰富的插件支持
9、完善的文档
jq的劣势:
1、
jquery分1.x、2.x、3.x的版本  1.x兼容ie6.7.8  而2.x、3.x就不在兼容。
2、不支持移动端事件

3、属性添加方式：

 1、链式写法
$('#div1').css('width','100px').css('height','100px').css('background','red');
 2、简单写法  
     $('#div1').css({
      width:100,
         height:100,
         background:'red'
     })

4、事件绑定：

第一种  on方式参数为(‘事件类型’，回调函数)
       $(function(){
        $('#btn').on('click',function(){
        alert(1);
       })
第二种  直接使用事件名添加  参数为（回调函数）
      $('#btn').click(function(){
       alert(22);
      })
注意：
可以连加，同时给很多元素添加事件：
$('div,span,p,input').click(function(){
    console.log(this.nodeName);
   })

5、jQuery的一些选择器：

(除了常用的id、class、标签名 选择器，还有一些不常用选择器)
1、后代选择器
$('div ul').css({
   background:'red',
 })
或者：
$('#ul1>li').css({
    background:'red',
 })
2、临近选择器
$('#ul1~ul').css({
    background:'red',
   })
3、获取所有元素中第一个元素
  $('div:first').css({})
4、获取所有元素中最后一个元素
  $('div:last').css({})
5、获取该元素中某一个元素
  $('div:nth-child(3)').css({})
6、去除所有除了给定之外的元素
  $('div:not(#div1)').css({})
7、匹配所有的奇数元素，索引从0开始
  $('div:even').css({})
8、匹配所有的偶数元素，索引从0开始
  $('div:odd').css({})
9、选取索引为index的元素（index从0开始）
  $('div:eq(1)').css({})
10、选取索引大于index的元素（index从0开始）
  $('div:gt(2)').css({})
11、选取索引小于index的元素（index从0开始
  $('div:lt(1)').css({})

12、内容过滤选择器
  $('div:contains(1)').css({})
13、选取不包含子元素或者文本的元素
  $('div:empty').css({})
14、选取含有选择区所匹配的元素的元素
  $('div:has(p)').css({})
15、选取含有子元素或者文本元素
  $('p:parent').css({ })

属性选择器：
16、选取属性的值为value的元素
  $("div[leg=div2]").css({})
17、选取属性的值不等于value的元素
$("div[leg!=div2]").css({})
18、选取属性的值以value开始的元素
$("div[small^=1]").css({})
19、选取属性的值含有value的元素
$("div[leg*=2]").css({})
20、选取属性值以value结束的元素
$("div[leg$=2]").css({})
21、选择满足所有属性选择器的元素
$("[haha='div5'][haha*=5]").css({})

22、选取所有第二个元素
$('#wrap>div:nth-child(2)').css({})
23、选取第三个元素
$('#wrap>div:nth-child(3)').css({})
24、选取每个父元素的第一个子元素
$('#wrap>div:first-child').css({})
25、选取每个父元素的最后一个子元素
$('#wrap>div:last-child').css({})
26、选取父级中唯一的子元素。那么它将会被匹配
$('#wrap>div>p:only-child').css({})

事件绑定与移除

$('#div1').bind('mouseover mouseout mousemove',function(e){
    if(e.type =='mouseover' ){
     console.log('mouseover');
     $(this).animate({
      width:200,
      height:200
     },3000,'linear',function(){
      alert('game over');
     })
    }else if(e.type =='mouseout' ){
     console.log('mouseout');
     $(this).animate({
      width:100,
      height:100
     },3000,'linear',function(){
      alert('game over');
     })
    }else if (e.type =='mousemove' ) {
     console.log('mousemove');
    }
   })
   
  })
注意：
$(this)--jq的写法
index()--jq的写法

事件移除：
$(function(){
    $('.div1').bind('mouseover',over)
   //当点击document时移除div1的事件
   $('document').bind('click',function(){
    $('.div1').unbind('mouseover',over)
   })
    function over(){
    console.log('鼠标移入');   
   }
  })

js转jq

$(function(){
   //jq获取dom对象与js获取dom对象不一样
   var div1 = $('.div1');
   div1.css({
    width:300
   }) 
   //js转jq
  var div1 = $('.div1').get(0); 
  var div1 = $('.div1')[0];
  div1.style.height = '300px';
  })