JQuery的基本用法总结

1、jquery概念

是js的一个类库    （对js中某些功能的封装）

用jq实现的功能一定能用js实现 反过来 不一定  ，js实现的功能jq不一定能实现

2、jquery好处

1、代码简洁

2、兼容性好

最少的代码做多的事情

性能支持比较好

节约学习成本

让DOM操作变的简单

jQuery框架支持链式写法

jQuery框架实现了跨浏览器的兼容包括IE低版本

jQuery1.x版本支持低版本IE浏览器

可以操作css3样式

jquery可以和原生js结合一起使用   setTimeout( function(){   jq代码   },1000 )

注意 ： 原生DOM对象不能使用jquery对象方法   document.getElementById("").dom的操作方式

用jq实现的用js一定能实现  反过来不一定

选择器、属性操作、样式操作、内容操作、文档操作(dom)、 动画  、事件处理 、  ajax 、jq插件

3、jquery选择器

$是jQuery的简写  含义一样

$ 符号 是一个函数 function

$() 返回值是对象object类型  同  jQuery()

也就是  $()  等价  jQuery()

注意 ：  通过jquery方式查找到的元素  不能使用js的方式操作 样式、属性、内容...   $("").style.color = ""  错

        通过js方式查找到的元素 不能使用jq的各种方法操作 样式、属性、内容...   document.getElementById().css()  错

基本选择器 ： 

id选择器  $("#id名")  

类选择器   $(".class名")

标签选择器  $("html标签")

组合选择器  $("id,class")

通用选择器  $("*") 查找所有的标签

层级选择器 : 

空格    查找当前元素里面的所有后代元素

>        查找当前元素里面的所有子代元素

+        查找当前元素下面的紧邻的兄弟节点

~        查找当前元素下面的所有的兄弟节点

查找过滤选择器(都是方法) ： 

first()  $("li").first()   ：first

last()                   :last

eq(下标)  下标从0开始   等价  :eq(下标)

find()   $("div.box").find("span")    查找给定元素的后代

children()   查找给定元素的子代   $().children("span")   $().children()

next()   $("p").next()       $("p").next("span")指定的下一个元素

prev()   前一个  用法同next()   

nextAll()    下面所有的  可以指定参数 也可以不指定  

prevAll()  前一个所有

siblings()  除了自身之外的所有兄弟元素（也可以指定参数）

parent()    查找某个元素的父元素   

filter()    参数可以是一个回调函数

        $("p").filter(function(){

            return 条件；返回满足某个条件的p元素

        })

not()   除了...之外   :not 

4、jquery中的样式操作

css()  获取样式

用法 ： .css("样式","值")

       .css({ "样式":"值" ，"样式":"值",.....})

       .addClass("类名")  添加样式类       .removeClass() 删除样式类

5、jquery中查找元素下标

index()  查找该元素在同辈元素中的位置

6、jquery对象和dom对象的互换问题

dom对象转成jq对象 ：  $( dom对象 )

var obj = document.getElementById("box")

$( obj )

jq对象转化成dom对象 ： 

    $().get(下标)---dom对象

    $()[下标] ---dom对象

var $list = $("li");

$list.get(2)

$list[2]

7、属性操作 

attr()   获取或设置标签元素的属性 (该方法不能操作属性值是布尔类型的属性  比如 ： checked     操作布尔类型属性 用 prop() )

获取 ： 对象.attr()

设置 ： 对象.attr("属性","值")

        对象.attr({

            属性 ： 值,

            ...

        })     

8、jquery中的样式操作

css()  获取样式

用法 ： .css("样式","值")

       .css({ "样式":"值" ，"样式":"值",.....})

       .addClass("类名")  添加样式类       .removeClass() 删除样式类   判断样式类  hasClass

 

9、jquery中的内容操作

标签 ： 

    html() 获取或设置 非表单元素的内容      设置内容html()方法会识别标记    获取时只获取第一个

    text()   纯文本操作    获取时获取所有的元素内容

表单 ：

    val()  获取或设置表单元素的内  获取：无参数   设置 ：有参数       

10、jquery的文档操作

append()  向指定的父元素后添加新子元素

appendTo()  将某个子元素添加到指定的父元素后面 

prepend() 前置新内容

prependTo()

after()

insertAfter()

before()

insertBefore()

empty()   清空

remove()  删除所有

detach()  删除某个指定的元素

clone()   克隆 

wrap() 把所有的元素用新创建的元素包裹起来

replaceWith()  将所有的元素替换成指定的元素  移动不是复制

replaceAll()  用匹配的元素替换掉所有 selector匹配到的元素

 

jquery的动画  

基本动画 ： 

show()  没有参数   等价   css：display：block

        可以有三个参数

        第一个参数 ：动画执行的时间 

        第二个参数 ： 动画执行方式  linear  swing

        第三个参数 ：动画完成后的回调函数

hide()    隐藏

toggle()  切换 显示 / 隐藏

上拉/下拉 ：

    slideDown()  通过高度的改变 显示 某个元素

    slideUp()   通过高度的改变 隐藏 某个元素

        slideToggle() 切换

 

透明度 ：

fadeIn(1000，function（） {   })  淡入  通过透明度的改变  显示 某个元素

fadeOut()     隐藏

fadeToggle()    切换

 

fadeTo()    调整某个元素的透明度

第一个参数 ： 时间  （不能省略）  时间为0  也要写出来

第二个参数 ： 透明度值

 

自定义动画 ：animate 

对象.animate( {  } , 时间 , 回调函数 )

 

stop()  停止当前正在运行的动画  其余动画继续执行    （多个相同的元素含有多个同样的事件时  ）

delay() 动画延时

 

jquery遍历

$().each( function(){

 

} ) 

或  

$.each( $() , function(){

 

} )

 

jquery中阻止冒泡方式 ：return false

 

size()方法  length属性  获取jq元素的个数

 

jquery中的事件处理 

 

jquery的页面加载 ：

$(document).ready(function(){

 

})  简写成  

$(function(){

 

})

 

jquery的页面加载中的代码  不需要等页面所有内容全部加载完成后执行    dom元素准备就绪即可执行   

jquery的页面加载函数可以存在多个

$(document).ready( callback )

或简写成

jQuery（callback）   

$( callback )

 

 

事件处理 ： 

事件绑定 ：

bind()

用法 ：

    对象.bind("事件",function(){  })

    对象.bind({

        事件 ： function(){},

        事件 : function(){},

        .....

    })

    unbind() 解除绑定   unbind 也可以用来关闭on绑定的事件

 

事件委托 delegate： 

对象.delegate("事件源",事件,function(){

 

})

取消委托 ： undelegate   

 

事件绑定+事件委托 ：  on    ----  off  off可以用来关闭bind绑定的事件

事件绑定 用法 和bind()

事件委托 用法 ： 

    对象.on(事件 , "事件源" , function(){

 

    })

 

one() 只触发一次事件的事件处理方法

 

事件切换  hover  

用户 ：

    对象.hover(function(){

        mouseenter

    },function(){

        mouseleave

    })

 

 

 

 jquery插件

自定义插件 ：

方式一： 

$.extend({       自定义工具方法  全局函数

    方法名 : function(){},

    ....

})

调用 ：全局调用  $.方法名()  

 

方式二 ： 

$.fn.extend({    自定义对象的方法   不是全局方法

    方法名 ： function(){

 

    },

    ...

})

调用 ： 局部方法  使用 jq选择器.方法名()

注意 ：  $.fn是jQuery原型对象

 

扩展 ： 

$.函数名 = function(){  ... }   $.调用

$.fn.函数名 = function(){  ... }    jq对象调用

 

 

jquery的ajax  方法 ：$.ajax ()   $.get()    $.post()    $.getJson()     $.getScript()      load()

 

1、ajax的异步请求之 load    加载公共的html文件

 

load() 方法是一个局部的方法，通过jquery的选择器作为开始调用load方法

load()方法是异步的，加载的信息中如果需要事件响应，必须通过回调函数来实现（或者委托），也就是说所有load加载的数据中的事件都要写在回调函数中

load()方法如果想要请求不同结构的内容，可以把这些内容写到一个文件中，请求数据时，在url后加一个请求容器的选择器名称即可（这里选择器建议使用基本选择器）

 

 

load()方法的参数有三个：

第一个： 请求的url

第二个： 发送的数据  json格式  {}

第三个参数 ： 回调函数  

回调函数中有三个参数，分别是：

function(res,type,xhr){

       console.log(res);    //请求数据

       console.log( type );//请求的状态

        console.log(xhr);  //deffered  异步对象  （类似于js中promise对象）

}

 

2、ajax请求之  $.get 或 $.post

 

以 $. 开始的ajax请求方式是全局方法

$.get(三个参数)   以get方式请求数据

第一个参数：请求的路径

第二个参数：请求数据　　json对象   ｛｝

第三个参数： 回调函数   （回调函数中也有三个参数，同load）

 

$.post()  以post方式请求数据  用法同$.get()

 

3、ajax请求之  $.getJson()      $.getScript()

 

$.getJson("xxx.json"，data, 回调函数) 通过这种方式请求json数据   三个参数  ： url    data     function(){}

$.getScript("xxx.js"，回调) 通过这种方式请求js脚本数据 ，立即执行请求的脚本代码

 

4、$.ajax  

 

jquery的ajax请求服务器传递过来的数据一般都是object对象（请求的数据是object类型）

 

用法：

     $.ajax({

          type:"get",     请求数据方式

          url:"http://127.0.0.1/jqAjx1706/data.json";,    请求路径

          success:function(){     服务器通过 success  方法 获取处理的结果 

              console.log("成功");

          }

     });

或 $.ajax 方法返回一个deffered对象  （类似promise）    

如果请求数据成功，通过done方法获取服务器的数据

var deff = $.ajax({ type:,url: })

deff.done(function(){

 

})

关于deffered方法描述 ： 

deferred对象是jQuery的回调函数的解决方案。

deferred对象有done方法，表示成功时要调用的回调函数。

deferred对象有fail方法，表示失败时要调用的回调函数。

when方法表示都成功是再调用对应的回调函数。

 

常用方法：

     $.ajax({

          type:"get",

          url:"http://127.0.0.1/jqAjax1706/data.json";,

          datatype:"json",//指定请求数据的类型    请求数据类型如果是json   表示正常ajax请求   如果是jsonp，表示跨域请求

          data:{"name":"admin"},//向服务器发送数据

          success:function(res){

              //alert(typeof res);

              //此处处理服务器返回数据的业务逻辑

          }

     });

 

ajax跨域：

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+txt+"&cb=fn

$.ajax({

        type:"get",

        url:"https://api.douban.com/v2/book/search?q=css&callback=fn&start=0&count=10";,

        dataType:"jsonp",

        jsonCallback:"fn"   //设置回调函数

});

function  fn(msg){

    alert( msg );

}