js的28天 Jquery

概述

Jquery是一个轻量级的js库，它将js的功能进行了封装（所有的都是函数），它在封装的基础上做了进一步的兼容（兼容性好）。

特点

链式调用 （里面所有的方法返回的都是一个jquery对象）

丰富的选择器和筛选器

良好的动画兼容（动画库很强大 借助了animated.js (主要css3的动画)）

官方地址

中文网

简单入门

核心对象jQuery（是一个函数）简写为$

dom对象转为jQuery对象将dom对象传入jQuery的函数

将jQuery对象转为dom对象 使用下标获取对应的dom元素

<div>hello</div>

<div>world</div>

<script src="./jquery.min.js"></script>

<script>

// 核心对象 （都是函数）

console.log(jQuery);

console.log($);

//相对于是document.querySelectorAll

console.log(jQuery('div')); //jquery对象

//将jQuery对象转为dom对象使用下标获取就可以了

console.log(jQuery('div')[0]); //dom对象

//将dom对象转为jQuery对象

let dom = document.querySelector('div')

console.log($(dom));

</script>

jQuery的选择器

所有css选择器都可以使用

新增相关选择器（odd even first last eq）

//css选择器

console.log($('ul>li:nth-child(2)'))

console.log($('li:eq(1)'))//eq 传入的是下标 获取第二个

console.log($('li:odd'));//根据下标 获取下标为奇数的

console.log($('li:even'));//根据下标 获取下标为偶数的

console.log($('li:first'));//获取第一个

console.log($('li:last'));//获取最后一个

隔行变色功能实现

//隔行变色

let odd = $('li:odd')

let even = $('li:even')

//length获取里面元素的个数

for(var i=0;i<odd.length;i++){

odd[i].style.backgroundColor = 'red'

}

for(var i=0;i<even.length;i++){

even[i].style.backgroundColor = 'yellow'

}

Jquery的筛选器

它是用于筛选获取的元素的

它可以根据条件（根据选择器）及关系筛选（节点关系）

相关筛选器

eq 筛选对应下标的元素

last 筛选最后一个

first 筛选第一个

parent 父元素

children 子元素

siblings 兄弟元素

prev 前面的兄弟

next 后面的兄弟

prevAll 前面的所有兄弟

nextAll 后面的所有兄弟

find 查找子元素内容

// 获取元素进行筛选

console.log( $('ul>li').eq(2)); //得到第三个li

console.log( $('ul>li').first()); //获取第一个

console.log( $('ul>li').last()); //获取最后一个

//父子关系

console.log( $('ul>li').eq(2).parent('div')); //获取符合选择器的父元素 （不符合就没

有）

console.log( $('ul>li').eq(2).parent()); //获取对应的父元素

console.log( $('ul>li').eq(2).children()); //获取所有的子元素

console.log( $('ul>li').eq(2).children('a')); //获取所有的子元素a

//兄弟关系

console.log($('ul>li:eq(2)').children().eq(1).siblings('span'));//获取第三个li的第

二个子元素的所有span的兄弟

console.log($('ul>li:eq(2)').children().eq(1).siblings());//获取第三个li的第二个子元

素的所有的兄弟

console.log($('ul>li:eq(2)').prev());//获取第三个li的前一个元素

console.log($('ul>li:eq(2)').prev('.box'));//获取第三个li的前一个box元素(符合条件才返

回结果)

console.log($('ul>li:eq(2)').next());//获取第三个li的后一个box元素(符合条件才返回结果)

console.log($('ul>li:eq(2)').next('.box'));//获取第三个li的后一个box元素(符合条件才返

回结果)

console.log($('ul>li:eq(2)').nextAll());///获取第三个li后面的所有

console.log($('ul>li:eq(2)').nextAll('.box'));///获取第三个li后面的所有

console.log($('ul>li:eq(2)').prevAll());///获取第三个li前面的所有

console.log($('ul>li:eq(2)').prevAll('.box'));///获取第三个li前面的所有box

//查找 find

console.log($('ul').find('.box'));//查找所有子元素内容找到对应的条件 对应的class名字为

box的

console.log($('ul>li').eq(2).find('.box'));//查找所有子元素内容找到对应的条件(跨级)

jQuery的属性操作

prop 只能操作原生属性（原生属性 本身自带属性）

attr 可以操作任意属性

//jQuery属性操作可以操作所有获取元素属性

//属性名 属性值 如果传递的参数只有一个就是获取 如果是俩个就是设置

$('div').prop('class','box')//设置

console.log($('div').prop('class'));//获取

//prop只能操作原生属性

console.log($('div').eq(0).prop('id'));

//对应不是原生属性值获取的是undefined

console.log($('div').eq(0).prop('name'));

//设置到对应的元素对象上 element.id element.name

$('div').prop('content','我是内容')//设置

console.log($('div').prop('content'));

//attr 底层实现setAtrribute getAttribute

$('div').attr('message','ok')

console.log($('div').attr('message'));

console.log($('div').attr('id'));

console.log($('div').attr('name'));

console.log($('div').attr('content'));

removeProp 删除prop设置的属性（原生的属性）

removeAttr 删除属性（removeAttribute）

class相关操作

addClass 添加一个class

removeClass 移除一个class

toggleClass 切换（有就删除 没有就添加）

//class属性操作

//增删改查

//添加class

$('p').addClass('box')

$('p').addClass('red')

//获取 通过attr获取prop获取

console.log($('p').prop('class'));

//删除class

$('p').removeClass('box')

//修改

// 先删再加

$('p').removeClass('red')

$('p').addClass('green')

//切换 有就删除 没有就加上

$('p').toggleClass('green')

$('p').toggleClass('green')

样式操作

css方法

//样式操作 获取样式 设置样式

//传递一个参数就获取 传递俩个参数就是设置（参数传满了就是设置）

//可以获取所有的样式

console.log($('div').css('backgroundColor'));

console.log($('div').css('height'));

//设置样式

$('div').css('width','100px')

DOM操作

增删改查

append 从后面追到里面

prepend 从前面追到里面

before 插入到当前的前面

after 插入到当前的后面

empty 清空

remove 删除

replaceWith 替换

clone 克隆

//dom元素创建

let jqueryObj = $('<p>我是新建的标签</p>')

console.log(jqueryObj);

//增删改方法

//添加

$('div').append(jqueryObj) //从后面追加到div里面

$('div').prepend(jqueryObj)//从前面追加到div里面

$('div').before(jqueryObj) //插入到前面

$('div').after(jqueryObj) //插入到后面

//删除

// $('div').empty() //清空

// $('div').remove() //将自己删除

//改

$('div').replaceWith($('<b></b>'))

//克隆 深拷贝

let p = $('p').clone()

console.log(p);

宽高获取

width 获取本身的宽度

height 获取本身的高度

innerWidth 获取本身的宽度+填充

innerHeight 获取本身的高度+填充

outerWidth 获取本身的宽度+填充+边框

outerHeight 获取本身的高度+填充+边框

//宽高相关的方法 传参就是设置 没传参就是获取

// $('div').width(200) 只包含自身本身的宽度

console.log($('div').width());//返回number类型的值

console.log($('div').height());//返回number类型的值

//innerWidth innerHeight 包含padding

console.log($('div').innerWidth());

console.log($('div').innerHeight());

//outerWidth outerHeight 包含padding和border

console.log($('div').outerWidth());

console.log($('div').outerHeight());

获取位置

offset 获取当前的盒子离页面的距离

position 获取当前盒子离父元素的距离（不受margin影响）

//获取当前的p标签在页面上的位置 获取当前元素在页面上的位置

console.log($('p').offset());//返回一个对象

console.log($('p').offset().left);

console.log($('p').offset().top);

console.log($('button').offset());//返回一个对象

//获取当前的盒子在父元素内容的位置（不受margin影响）

console.log($('p').position());//返回一个对象

console.log($('button').position());//返回一个对象

事件

jQuery的事件用到的就是观察者模式，它设计了对应的方法。

on 监听事件

off 取消事件

one 执行一次

//事件名 处理函数

$('div').on('click',function(){

console.log('点击了');

})

$('div').on('click',handler)

function handler(){

console.log('点击了1');

}

//取消事件监听

$('div').off('click',handler)

//one方法 只执行一次(事件监听)

$('div').one('mouseenter',()=>{

console.log('鼠标移进');

})

jQuery针对所有的常用事件都实现了对应的方法

click

dblclick

mouseenter

mouseleave

keydown

keyup

change

hover (总和了mouseleave mouseenter)

...

//事件名 处理函数

$('div').on('click',function(){

console.log('点击了');

})

$('div').on('click',handler)

function handler(){

console.log('点击了1');

}

//取消事件监听

$('div').off('click',handler)

//one方法 只执行一次(事件监听)

$('div').one('mouseenter',()=>{

console.log('鼠标移进');

})

//针对对应的事件的相关函数

$('button').click(()=>{

console.log('button点击了');

})

$('button').mouseenter(()=>{

console.log('移进去了');

})

$('button').mouseleave(()=>{

console.log('移出去了');

})

$('button').mousemove(()=>{

console.log('移动');

})

$('input').change(()=>{

console.log('改变值');

})

//hover方法 结合了移进和移出（mouseenter和mouseleave）

$('p').hover(()=>{

console.log('移进');

},()=>{

console.log('移出');

})

jQuery实现对应的事件委托

// 利用事件委托来操作

$('ul').mouseover((e)=>{

//获取事件源

e = e || window.event

if(e.target.tagName == 'LI'){

//给对应的li添加class

$(e.target).addClass('selected')//给自己添加样式

$(e.target).siblings().removeClass('selected')//移出兄弟的样式

}

})

显示内容

html 相当于innerHTML

text 相当于innerText

val 相当获取value

//无参就是获取 有参数就设置

$('div').html('<b>你好</b>')

$('input').val('我是显示的值')

$('span').text('<b>你好</b>')

console.log($('div').html())

console.log($('input').val())

console.log($('span').text())

jQuery的动画

animate 动画

//option(需要变化的样式) 时间（执行时间） 回调函数 option里面只传number类型的值 (可以带单

位)

$('div').animate({

width:200,

left:200

},2000,()=>{

$('div').animate({

width:100,

top:300,

opacity:0.5

},2000,()=>{

console.log('动画完成了');

})

})

show 显示 hide 隐藏 toggle 切换

slideUp 上去 slideDown 下去 slideToggle 切换

//传入时间 回调函数

//宽高和透明度

$('div').show(2000,()=>{

$('div').hide(2000)

})

//显示隐藏 slideDown 变化高度

$('div').slideDown(2000,()=>{

$('div').slideUp(2000)

})

//show和hide配对的 显示就调用hide 隐藏调用show

//slideToggle 显示调用slideUp 隐藏调用slideDown

$('div').toggle(2000,()=>{

$('div').slideToggle(2000)

})

fadeOut 隐藏 fadeIn 显示 fadeToggle 切换 fadeTo 切换到对应透明度

//显示隐藏 只改变透明度 fadeToggle 如果显示fadeOut 隐藏调用fadeIn

$('div').fadeIn(2000,()=>{

$('div').fadeOut(2000,()=>{

$('div').fadeToggle(3000)

})

})

Jquery的ajax

概述：

jquery的ajax对应的原生的ajax进行了封装（xmlhttprequest），它对应xmlhttprequest进行了扩展，

xmlhttprequest只支持get请求和post，但是ajax它在此基础上进行了增强它还支持其他的请求（put

delete patch option...）

resultFul

resultFul是一种接口风格，它遵从rest规范，它是以返回json格式数据，以请求的方式来区分对应的功

能（跨平台）。

常见的result请求

get请求 获取数据

post请求 添加数据

delete请求 删除数据

put请求 修改一条

patch请求 批量修改数据

对应的方法

get方法

post方法

ajax方法

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name=

"

viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<button>get方法</button>

<button>post方法</button>

<button>ajax方法</button>

<script src="./jquery.min.js"></script>

<script>

$('button:eq(0)').click(()=>{

//url地址 参数 回调函数

$.get('https://jsonplaceholder.typicode.com/todos',{

_

limit:10

},(res)=>{

console.log(res);

})

})

$('button:eq(1)').click(()=>{

//url地址 参数 回调函数

$.post('https://jsonplaceholder.typicode.com/posts',{

username:

'

jack'

},(res)=>{

console.log(res);

})

})

$('button:eq(2)').click(()=>{

// $.ajax('https://jsonplaceholder.typicode.com/todos',{

// data:{

//

_

limit:10

// },

// method:'get',

// timeout:3000,

// async:true,

// dataType:'json',

// success(res){

//

console.log(res);

// },

// error(err){

//

console.log(err);

// },

// complete(){

//

console.log('完成了');

// }

// })

$.ajax({

url:'https://jsonplaceholder.typicode.com/todos',

data:{

_

limit:10

},

method:'get',

timeout:3000,

async:true,

dataType:'json',

success(res){

console.log(res);

},

error(err){

console.log(err);

},

complete(){

console.log('完成了');

}

})

})

</script>

</body>

</html>

ajax的钩子函数（生命周期函数 自动调用）

ajaxComplete 请求完成调用

ajaxError 请求错误调用

ajaxSend 请求发送调用

ajaxStart 请求开始发送

ajaxStop 请求发送停止

ajaxSuccess 请求发送成功

jQuery的多库共存

概述:

当你使用其他的库和jQuery库结合使用的，我们有可能在其他库里面有对应的一个方法叫做jQuery 或

者有一个变量叫$,那么这个时候就会发生冲突。多库共存就是为了解决这个问题。

noConflict

console.log(jQuery);

console.log($);

//如果不传参数 默认干掉$ 传入true俩个都干掉

let a = $.noConflict(true)

console.log($);//被干掉了

console.log(jQuery);

console.log(a);

jQuery的插件扩展

使用extend方法

给jQuery对象进行扩展

//给jQuery对象扩展 静态方法

//第一个名字 扩展的配置

$.extend({

sayHello() {

console.log('hello');

}

})

//调用

$.sayHello()

给jQuery的方法进行扩展

//给jQuery对象的方法扩展 原型方法

$.fn.extend({

redColor(){

$(this).css('color','red')

}

})

$('div').redColor()

$('p').redColor()

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • jQuery
    什么是jQuery? jQuery是一个快速的、轻量的、功能丰富的js库。 jQuery的官网 http://jq...
    小五同学H阅读 1,787评论 0赞 0
  • jQuery操作 0715~0718
    jQuery 1.jQuery和js入口函数 1.1jQuery和js入口函数的区别 window.onload ...
    煤球快到碗里来阅读 2,713评论 0赞 0
  • Jquery
    [if !supportLists]第一章 [endif]介绍 [if !supportLists]一、[endi...
    海绵宝宝_b8a2阅读 2,555评论 0赞 0
  • jQuery入门
    1. jQuery是一个JavaScript库 提供强大的选择器、简洁的API、优雅的链式、便捷的操作，核心理念 ...
    刘刀文阅读 3,294评论 0赞 3
  • jQuery的学习(上)
    最重要的:外联JS要放在jQuery引用的下面，否则jQuery将用不了，所以以后定要把jQuery库放在所有外链...
    欢喜宇你阅读 2,662评论 0赞 0