Jquery

Jquery

一、Jquery基础

1.jQuery介绍

官方介绍

jQuery是一个快速、小巧且功能丰富的JavaScript库

jQuery结合了多功能性和可扩展性,改变了数百万人编写JavaScript的方式

官网:https://jquery.com/

中文官网:https://jquery.cuishifeng.cn/

里面是jQuery的方法大全,而且是中文的

2.jQuery下载与安装

一、jQuery的下载
 
对于jQuery库文件,我们可以去“jQuery官网”下载。jQuery库文件有2个版本,分别是(1)1.x版本;(2)2.x版本。2.x版本是最新版本,与1.x版本有着相同的API。但是1.x版本支持IE6、IE7和IE8,而2.x则不再支持。由于当前IE6、IE7、IE8用户还是很多的,所以在实际开发用我们还是建议使用1.x版本。
 
jQuery库文件其实有2种类型:(1)开发版;(2)发布版。以下是这两种类型的比较:
 
jQuery2种库文件比较
类型                             说明
jquery.js(开发版)      完整无压缩,用于测试与学习
jquery.min.js(发布版)  高度压缩,用于实际开发
开发版是没有经过压缩的,供给开发者学习jQuery的源码,一般用jquery.js命名。而发布版是经过压缩的,供给我们使用jQuery,一般用jquery.min.js命名。
 
我们在开发过程中一般使用jQuery发布版,即jquery.min.js这种版本。这是因为发布版经过压缩,体积非常小。小伙伴们就会问了,干嘛不用jQuery开发版呢?其实开发版,顾名思义就知道了,这是供给大神们来学习jQuery源码或者开发jQuery的。这就好比你在用编程软件,你是软件的使用者。
 
二、jQuery的安装
 
jQuery库其实就是一个js文件来的,安装jQuery很简单,只要把jQuery库文件在HTML页面中引用即可使用,跟我们引用外部js文件是一样的道理。大家记住,不要随便动这个文件里面的源代码哈。
 
语法:
 
<!--jQuery库-->
<!--jquery两种安装方式 离线和在线-->
<script src="jquery-3.1.1.min.js"></script>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script  type="text/javascript">
    //这里编写你的jQuery代码
</script>
说明:
 
我们必须先把jQuery库文件引入,才能够使用jQuery。也就是说你写的jQuery代码必须在jQuery库文件下面才能生效。
像下面这种方式就是错误的,初学者很容易犯这种低级错误,大家好好好注意一下。
 
<script  type="text/javascript">
    //你的jQuery代码
</script>
<!—jQuery库-->
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>

3.jQuery语法

$(selecter).action()

  • 美元符号($)定义jQuery
  • 选择符(selector)查找HTML元素
  • 动作action()执行对元素的操作

举个栗子🌰

$(this).hide()	//隐藏当前元素
$('p').hide()	//隐藏所有p元素
$('#a').hide()	//隐藏id='a'的元素

二、选择器selector

1.选择器简介

在原生JavaScript中,如果想要选取元素,只能使用getElementById()、getElementsByName、getElementsByTagName()等几种有限的方法来获取,让人有一种力不从心、抓襟见肘的感觉。但是jQuery为我们提供了大量的选择器,极大地方便了我们快速选择元素来进行各种操作。

选择器,说白了,就是一种选中页面元素的方式。只要把元素选中,我们才能对被选中的元素进行各种操作。不同的选择器,在于它们选取方式的不同。

jQuery的选择器完全是继承了CSS选择器的风格。如果大家曾认真把CSS选择器学透的话,在接下来的学习会相当的轻松。大家在学习jQuery选择器的时候,一定要联系CSS选择器进行对比记忆。

2.基本选择器

jQuery选择器格式如下

$('选择器')

jQuery最基本的几个选择器。所谓的基本选择器,指的是在jQuery中使用最频繁的选择器。在jQuery中,基本选择器有5种

  • 元素选择器

    • $('元素名') => $('div')
  • id选择器

    • $('#id名') => $('#a')
  • class选择器

    • $('.类名') => $('.a')
  • 群组选择器

    • $('选择器1,选择器2,....') => $('div,.a,#b')
  • *选择器

    • 全选选择器,用于选择所有元素

3.层次选择器

在jQuery中,层次选择器共有4中

选择器			说明
$("M N")      后代选择器,选择M元素内部后代N元素(所有N元素)
$("M>N")     子代选择器,选择M元素内部子代N元素(所有第1级N元素,若N为*表示M元素内部所有元素)
$("M~N")     兄弟选择器,选择M元素后所有的同级N元素
$("M+N")    相邻选择器,选择M元素相邻的下一个元素(M、N是同级元素,若下一个元素相同也会被选中)

其中

  • $("M+N")可以使用 $(M元素).next()代替;
  • $("M~N")可以使用 $(M元素).nextAll()代替;

4.属性选择器

在HTML文档中,元素通常包含很多属性(attribute)。在jQuery中,除了直接使用id和class属性作为选择器之外(也就是之前我们讲解的“id选择器”和“class”选择器),还可以把各种属性作为选择器,这就是我们所说的属性选择器。

选择器                                         说明
$("selector[attr]")                      	  选择包含给定属性的元素
$("selector[attr='value']")              	  选择给定的属性是某个特定值的元素
$("selector[attr != 'value']")           	  选择所有含有指定的属性,但属性不等于特定值的元素
$("selector[attr *= 'value']")             	  选择给定的属性是以包含某些值的元素
$("selector[attr ^= 'value']")         		 选择给定的属性是以某些值开始的元素(比较少用)
$("selector[attr $= 'value']")           	 选择给定的属性是以某些值结尾的元素(比较少用)
$("selector[selector1][selector2]…[selectorN]") 复合属性选择器,需要同时满足多个条件时使用

:selector指的是选择器,attr指的是属性(attribute),value指的是属性值。
jQuery的属性选择器使得选择器具有通配符的功能。可以说,属性选择器这是一类参考正则表达式来设计的选择器。

5.伪类选择器

一说起伪类选择器,大家可能就会想起:link、:visited、:hover、:active这4个超链接选择器。没错,这几种就是伪类选择器。

伪类选择器,可以看成是一种特殊的选择器。伪类选择器都是以英文冒号“:”开头。jQuery参考css选择器的形式,为我们提供了大量的伪类选择器,使得我们可以快速地选择我们想要获取的元素。

在jQuery中常见的伪类选择器分为以下6种:

  1. 简单伪类选择器

在这里插入图片描述

  1. 子元素伪类选择器

在这里插入图片描述

  1. 可见性伪类选择器

    可见性伪类选择器,就是根据元素的“可见”与“不可见”这两种状态来选取元素

在这里插入图片描述

  1. 内容伪类选择器

    内容伪类选择器,就是根据元素中的文字内容或所包含的子元素特征来选择元素,其文字内容可以模糊或绝对匹配进行元素定位。

在这里插入图片描述

  1. 表单伪类选择器

在这里插入图片描述

  1. 表单属性伪类选择器

在这里插入图片描述

6.查找方法

在jQuery中查找方法,主要以“当前所选元素”为基点,查找它的父元素、子元素或者兄弟元素等。过滤方法和查找方法的出现,其实就是对jQuery选择器的一种补充,提供更多的方法使得我们更加方便灵活地操作元素。

在jQuery中,常见的查找方法共有5种:

方法                     说明
查找第一个元素        first()   		  获取当前元素的第一个子元素
查找最后一个元素     last()    		      获取当前元素的最后一个子元素
查找祖先元素         parent()  		    获取当前元素的父元素
                    parents() 	 		获取结构父级所有父元素
                    parents(选择器) 	  获取结构父级所有父元素中符合选择器的那一个元素
 
查找后代元素         children() 		   获取元素的所有子元素
                    children(选择器) 	  获取元素的所有子元素中符合选择器的那一个元素
 
                    find()     			找到元素中所有后代元素里面符合选择器条件的元素
 
向前查找兄弟元素     prev() 			 获取当前元素的上一个元素
                   prevAll() 			获取当前元素上面所有兄弟元素 
                   prevUntil(选择器)  	   获取当前元素上面所有兄弟元素,直到选择器元素为止(不包含选择器元素) 
 
向后查找兄弟元素     next()    			  获取当前元素的下一个元素
                   nextAll()  			 获取当前元素后面所有兄弟元素 
                   nextUntil(选择器)  	   获取当前元素后面所有兄弟元素,直到选择器元素为止(不包含选择器元素) 
 
查找所有兄弟元素     siblings()
 
查找元素集合中指定索引的那一个  eq()
查找元素在父元素里面索引位置  index() 

从这个表,我们能够清晰地对比各类查找方法,以便加深记忆。
https://www.runoob.com/jquery/jquery-traversing-siblings.html

举个栗子🌰

在这里插入图片描述

三、基础动作action

1.内容操作

在jQuery中,关于元素内容操作共有两组方法

  1. html()和text()
  2. val()

其中html()和text()用于操作普通标签,而val()用于操作表单标签。

jQuery				原生js
$().html			innerHTML
$().text			innerText
$().val				value

举个栗子🌰

//给元素的innerHTML赋值
$('div').html('<span>hello world</span>')
//获取元素的innerHTML
$('div').html()

//给元素的innerText赋值
$('div').text('hello world')
//获取元素的innerText
$('div').text()

//给元素的value赋值
$('input').val('admin')
//获取元素的value值
$('input').val()

2.属性操作

  1. 给一个元素添加某个属性$().prop

    //给div元素添加一个id属性,值是box
    $('div').prop('id','box')
    //获取div的id属性
    console.log($('div').prop('id'))
    
    • prop这个方法只能添加元素自己本身就有的属性
    • 如果添加的自定义属性,不会显示在标签上,但是可以使用
  2. 给一个元素添加某个自定义属性$().attr()

    //给div添加一个index属性,值是1
    $('div').attr('index',1)
    //获取div的index属性值
    console.log($('div').attr('index'))
    
  3. 移除元素的某一个属性removeAttr()

    //移除元素自己本身的属性
    $('div').removeProp('id')
    //移除元素的自定义属性
    $('div').removeAttr('index')
    
  4. attrprop 的区别

在这里插入图片描述

在这里插入图片描述

  1. 给一个元素添加类名$().addClass()

    //给div元素添加一个类名action
    $('div').addClass('avtion')
    

    当需要使用jQuery为某些元素设置太多的CSS样式时,如果使用css()这个方法,jQuery里面的代码会显得比较臃肿。因此,我们更倾向于先在CSS代码中定义一个类,在这个类中定义相应的CSS代码,然后再使用jQuery对这个类名进行相应的添加、删除、切换,从而达到对样式进行批量操作,这就是CSS类名操作的真正意义所在!

  2. 删除类名$().removeClass()

    //给div元素移除类名action
    $('div').removeClass('avtion')
    
  3. 切换类名$().toggleClass()

    在jQuery中,我们可以使用toggleClass()方法为元素切换类名。toggle就是“切换”的意思,在后面课程里面我们会大量接触这个单词,例如toggle()、slideToggle()等等。

    toggleClass()方法用于检查元素是否具有某个类名。如果类名不存在,则为该元素添加类名;如果类名已存在,则为该元素删除类名。

    总结一下:使用jQuery操作元素样式时,当样式比较少,建议使用“CSS属性操作”;当样式比较多时,建议使用“CSS类名操作”。

3.操作样式

$().css

  1. 获取css属性

    //$().css('属性')
    //获取div的背景颜色
    $('div').css('background')
    
  2. 设置css属性值

    设置某个元素的CSS属性值,分为2种情况:(1)设置单个CSS属性;(2)设置多个CSS属性。

    • 设置单个css属性

      语法:$().css('属性','属性值')

    • 设置多个css属性

      语法:$().css({"属性1":"属性值1","属性2":"属性值2",……})

      //设置单个css属性
      $("p").css("color","red")
      //设置多个css属性
      $('p').css({
          'color':'red',
          'font-size':'16px'
      })
      

      同时设置多个CSS属性值时,应该用{}括起来,并且属性与属性值以“键值对”的形式,每个键值对之间用英文逗号隔开。这种 “键值对”的形式,跟JSON数据格式、JavaScript对象的属性形式是非常相似的。

4.操作事件

jQuery封装了JavaScript中所有的事件,使得其操作更加简单方便,并且使得这些事件能够兼容各大浏览器,减少我们大量代码的编写。

  1. 事件绑定的方法

    //给button按钮绑定一个点击事件
    $('button').on('click',function(){
        console.log('我被点击了')
    })
    //给button按钮绑定一个点击事件,并且携带参数
    $('button').on('click',{name:'jack'},function(e){
        console.log(e)	//所有的内容都在事件对象里面
        console.log(e.data)	//{name:''jack}
    })
    //事件委托的方式给button绑定点击事件
    $('div').on('click','button',function(){
        console.log('我被点击了')
    })
    //事件委托的方式给button绑定点击事件并且携带参数
    $('div').on('click','button',{name:'jack'}function(e){
        console.log(this)	//button按钮
        console.log(e.data)
    })
    
  2. 只能执行一次的事件

    $('button').one('click',handler)

    这个事件绑定在button按钮上

    当执行过一次之后就不会再执行了

  3. 直接触发事件

    $('button').trigger('click')

    当代码执行到这里的时候,会自动触发一下button的click事件

  4. 可以直接使用的常见事件

    可以直接使用的事件就是可以不用on来绑定,直接就可以使用的事件方法

    click 语法 :$().click()

    blur 失去焦点事件

    focus 焦点事件

    hover 移入移出事件

    //这个事件包含两个事件处理函数
    //一个是移入的时候,一个是移出的时候
    $('div').hover(function(){
        console.log('移入的时候触发')
    },function(){
        console.log('移出的时候触发')
    })
    

    scroll 滚动事件

  5. 页面载入事件

    在jQuery中,对于页面载入事件,我们使用$(document).ready()方法来替代JavaScript中的window.onload方法。

    //页面加载事件
    $(function(){
    	// 代码部分
    });
    //其实这个就是jq ready()的简写,他等价于:
    $(document).ready(function(){
    	// 代码部分
    })
    

鼠标事件

鼠标事件,指的是操作鼠标时触发的事件。jQuery常见鼠标事件如下:
jQuery鼠标事件
鼠标事件            说明
click               鼠标单击事件
dbclick            双击事件
mouseover          移入事件
mouseout           移出事件
mousemove         移动事件
mousedown         按下事件
mouseup           松开事件

键盘事件

在jQuery中,键盘事件只有3个:
 
jQuery键盘事件
键盘事件  			说明
keydown  		  按下键事件(包括数字键、功能键)
keypress 		 按下键事件(只包含数字键)
keyup     		 放开键事件(包括数字键、功能键)
三个事件的执行顺序如下:keydown → keypress → keyup。

表单事件

在jQuery中,常用的表单事件有4种:
 
jQuery表单事件
表单事件  			  说明
focus()     		 获取焦点
blur()     			  失去焦点
change()  			  改变事件
select()    		 选择事件

解绑事件

在jQuery中,我们可以通过off()方法解除绑定的某一指定的事件或者所有事件。

$("button").click(function(){
    $("p").off("click");
});

四、动态获取DOM节点

1.创建节点

  • html方式:<p>内容</p>

  • DOM方式:document.createElement("p"); =><p></p>

  • jQuery方式:$('<p>').text('内容') =><p>内容</p>

    $('<p>内容</p>') =><p>内容</p>

2.添加节点

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

3.删除节点

$().empty() 会将该元素的所有子元素删除

在这里插入图片描述

$().remove() 会将该元素和所有子元素删除
在这里插入图片描述

4.替换节点

replaceWidth

replaceAll

//把div元素替换成p元素
$('div').replaceWidth($('<p>'))
//用p元素替换掉div元素
$('<p>').replaceAll($('div'))

在这里插入图片描述

5.复制节点

clone() 方法生成被选元素的副本,包含子节点、文本和属性。有两个参数

  • true:规定需复制事件处理程序。
  • false: 默认。规定不复制事件处理程序。

五、jQuery对象与DOM对象转换

jQuery对象->DOM对象

const jqObjToDom = $(".d1")[0]; //jquery对象转Dom对象 方法一
 const jqObjToDom =  $(".d1").get(0); //jquery对象转Dom对象 方法二

DOM对象->jQuery对象

const domObj = document.querySelector(".d2"); //dom对象
const domToJqObj = $(domObj);

举个栗子🌰

在这里插入图片描述

六、元素尺寸&位置

元素尺寸

  • 操作元素的宽和高

    //获取div元素内容位置的高,不包含padding和border
    $('div').height()
    //设置div内容的高为200px
    $('div').height(200)
    //宽高获取方式一样
    
  • 获取元素的内置宽和高,包含padding不包含border

    //获取div元素内容位置的高,包含padding 不包含border
    $('div').innerHeight()
    
  • 获取元素外置宽和高

    //获取div元素外置的高,包含padding和border
    $('div').outerHeight()
    //获取div元素外置的高,包含padding和border和margin
    $('div').outerHeight(true)
    

元素位置

  • 元素相对页面的位置

    offset()读写

    返回一个对象,里面包含一个x信息和一个y信息,相对于页面左上角坐标

    设置值:$().offset({top:xxx,left:xxx})

    top|left值不写单位

    获取值$('div').offset().top
    在这里插入图片描述

  • 相对于父元素的偏移量

    position()只读

    返回一个对象,里面包含一个x信息和一个y信息,相对于元素定位关系获得坐标值,如果你定位元素right和bottom,那么会自动计算成left和top

    //获取div相对于父元素的偏移量
    $('div').position()
    
  • 获取页面卷进去的高度和宽度

    $(document).scrollTop() 获取滚动条到顶部的垂直高度(即网页被卷上去的高度)

在这里插入图片描述

  • 通过css样式改变位置

    css() 只写

    $().css({'left':xxx,'top':xxx})

七、jQuery效果动画

1.基本的隐藏显示

  • show

    //给div绑定一个显示的动画
    $('div').show()	//如果元素本身是display none的状态可以显示出来
    //给div绑定一个显示的动画,有三个参数
    //$().show('毫秒','速度','回调函数')
    $('div').show(1000,'linear',function(){
        console.log('显示完毕')
    })
    
  • hide

    //给div绑定一个隐藏的动画
    $('div').hide()	//如果元素本身是display block的状态可以显示出来
    //给div绑定一个隐藏的动画,有三个参数
    //$().hide('毫秒','速度','回调函数')
    $('div').hide(1000,'linear',function(){
        console.log('隐藏完毕')
    })
    
  • toggle

    //给div绑定一个切换的动画
    $('div').toggle()	//元素本身显示,那么就会隐藏,本身隐藏那么就会显示
    //给div绑定一个切换的动画,有三个参数
    //$().hide('毫秒','速度','回调函数')
    $('div').toggle(1000,'linear',function(){
        console.log('动画执行完毕')
    })
    

2.淡入淡出

在这里插入图片描述

3.滑动

在这里插入图片描述

4.animate()方法

语法:$().animate({params},speed,callback)

  • 必须的 params 参数定义形成动画的css属性

  • 可选的 speed 参数规定效果的时长。它可以取以下值:“slow”,“fast”,“毫秒”

  • 可选的 callBack 参数是动画完成后所执行的函数名称

    $('button').click(function(){
        $('div').animate({
            left:'200px',
            height:'150px'
        },1000,'linear',function(){
            console.log('动画执行完毕')
        })
    })
    

5.停止动画和结束动画

  • stop 立刻停止动画

  • finish 立刻结束动画

八、ajax

1.$.get()方法

$.get() 方法通过HTTP GET 请求从服务器上请求数据

语法2:$.get(url,[parma],callback,json)

//直接使用get方法发送一个请求
//参数一:请求地址
//参数二:请求时携带的参数
//参数三:请求成功的回调函数
//参数四:返回的数据类型
$.get('./ajax.php',{id:10},function(res){console.log(res)},'json')

2.$.post()方法

//直接使用post方法发送一个请求
//参数一:请求地址
//参数二:请求时携带的参数
//参数三:请求成功的回调函数
//参数四:返回的数据类型
$.post('./ajax.php',{id:10},function(res){console.log(res)},'json')

3.$.ajax()方法

  • type:类型,‘post’或者’get’,默认是’get’
  • url:发送请求的地址
  • data:是一个对象,连同请求发送到服务器的数据
  • dataType:预期服务器返回的数据类型,如果不指定,jQuery将自动根据HTTP包含的MIME信息来只能判断,一般我们采用json,可以设置为"json"
  • success:是一个方法,请求成功后的回调函数,传入返回后的数据,以及包含成功代码的字符串
  • error:是一个方法,请求失败时调用此函数,传入XMLHttpRequest对象
$.ajax({
    type:'post',
    url:'service.php',
    dataType:'json',
    data{
    name:$('staffName').val(),
    num:$('staffNum').val
},
       success:function(data){
    if(data.success){
        console.log(data.msg)
    }else{
        console.log(data.msg)
    }
},
    error:function(jqXHR){
        console.log(jqXHR.status)
    }
})

4.跨越

在这里插入图片描述

url?callback=funcjsonp: 'callback’jsonpCallback:‘func’ ’

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值