jQuery

Posted s593941

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery相关的知识,希望对你有一定的参考价值。

jsuery是一个库,它是由js封装过来的,所以js是包含jquery的.

1.对比

入口函数:$(document).ready(fn),$(function(){})

jquery的入口函数和window.onload()的区别:

  jQuery入口函数可以写多次,window.onload只能写一次

  执行的时机不同,jQuery的入口,一旦dom的结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成,window.onload是等页面文档,外部的js文件,css文件,图片加载完毕才执行内部代码.

 

js对象和jquery对象的转化:

  将js对象转换成jQuery对象:$(js对象)

  将jQuery对象转换成js对象:$(".box")[0]

 

2.选择器

  jquery的基本选择器:

    ID选择器(#)  作用:选择id为指定值的第一个元素

    类选择器(.)  作用:选择具有指定class类名的所有元素

    标签选择器(element)  作用:选择标签名为指定值的所有元素

    通配符选择器(*)  作用:选择所有元素

  层级选择器:

    后代选择器(空格表示)  作用:选择所有元素

    子代选择器(>)  作用:选择所有的子代元素

  基本过滤选择器:

    :eq(index)  index是从0开始的一个数字,选择序号为index的元素,选择第一个匹配的元素

    :gt(index)  选择序号大于index的元素

    :lt(index)  选择序号小于index的元素

    :odd  选择所有序号为奇数行的元素

    :even  选择所有序号为偶数的元素

    :first  选择匹配的第一个元素

    :last  选择匹配的最后一个元素

  筛选方法:

    find(selectop)  查找指定元素的所有后代元素(包括子子孙孙)  $("#box").find("p")

    children()  查找指定元素的直接子元素

    siblings()  查找所有兄弟元素(不包括自己)

    parent()  查找父元素

    eq(index)  查找指定元素的第index元素,index是索引

 

3.动画

  普通动画:

    show()  无参数,表示让指定的元素直接显示出来,有参数,通过控制元素的宽高,透明度,display属性,逐渐显示

    hide()  和show()相反

    开关时的显示隐藏动画:toggle(3000,fn)

  滑入和滑出,卷帘门效果:

    slideDown()  下拉动画,显示

    slideUp()  上拉动画,隐藏

    slideToggle()  开关式切换

  淡入淡出

    fadeIn(3000,callback)  让元素以淡淡的进入视线的方式展现出来

    fadeOut(3000,callback)  让元素以渐渐消失的方式隐藏起来

    fadeToggle(3000,callback)  通过改变透明度,切换匹配元素的显示或隐藏状态

  自定义动画

    语法:$(selector).animate({params},speed,callback):第一个参数表示要执行动画的css属性,第二个参数表示执行动画时长,第三个参数表示动画执行完毕后,立即执行的回调函数.

  停止动画

    语法:$(selector).stop(true,false)  默认是(false,false)

 

4.html值的操作

  html()  innerHTML实现,对文本和标签进行渲染,如果有参数表示设置值,如果没有参数表示获取值.

  text()  innerText实现,只对文本进行渲染

  val()  value的实现,只对标签中有value属性有效,比如input等.

 

5.html标签属性的操作:

  attr(key,value)  设置单个属性值

  attr({key1:value1,ley2:value2})  对标签设置多个属性值

  attr(key)  获取属性值,只对标签中属性操作,比如id,src,href,title等等

  removeAttr()  删除某个属性值

6.html对象属性操作

  prop()  对JSDOM对象属性的操作,比如单选框中checked属性的设置

  removeprop()  移除JSDOM对象属性

7.ajax

  jquery的ajax技术是底层的XMLHttpRequest()对象封装过来的

  1.创建XHR对象:var xhr = new XMLHttpRequest()

  2.打开请求地址:open(请求方式,url,true)  请求方式必须大写,GET或POST  url:表示请求的api接口地址  true默认的表示异步的

  3.send()  发送请求体的数据,如果是get请求,拼接到url上,如果是post请求,那么会在send()方法中当做实参传输

  4.xhr.onreadyStateChange()  状态机方法

  5.readyState

    0  为初始化:对象已经建立,单位初始化,open方法还未调用

    1  初始化:对象已经建立,但还未调用send方法发送请求

    2  发送数据:send方法已调用,但HTTP头未知

    3  数据传输中:已经接收部分数据,但相应不完全

    4  完成  数据接收完成,此时才可以获取完整的返回数据

  6.responseText  接收相应的文本内容

  7.get 请求:

    $.ajax({

      url:"api接口地址",

      type:‘get‘,

      dataType:‘json‘,

      success:function(data){},

      error:function(err){}

})

  

  8.post请求:

    $.ajas({

      url:"api接口地址",

      type:"post",

      data:{name:"张三"},

      dataType:"json",

      success:function(data){},

      error:function(err){}

})

 

8.位置信息:

  获取和设置宽度:width()

  获取和设置高度:height()

  获取内部宽,不包括border:innerWidth(),innerHeight()

  获取外部宽,包含所有:outerWidth(),outerHeight(),offset(),position(),scrollLeft()

 

以上是关于jQuery的主要内容,如果未能解决你的问题,请参考以下文章

JQueryJQuery基本操作

jQueryjquery插件封装

jQueryjQuery与Ajax的应用

jQueryjquery.metadata.js验证失效

Jqueryjquery刷新页面(局部及全页面刷新)

JqueryjQuery获取URL參数的两种方法