JQuery基础知识前端jquery

1.JQuery介绍
JQuery是一个JavaScript库，是对ECMScript、dom、bom、的一个浅封装，让用户更方便操作。
理解成一个大的函数，函数内部封装了很多函数来供你使用。
学习jQuery之前需具备顶基础知识：
? Html Css JavaScript
jQuery库包含以下功能

* HTML选取 * HTML元素操作 * CSS操作 * HTML事件函数 * JavaScript特效和函数 * HTML DOM遍历和修改 * AJAX

提示：除此之外，Jquery还提供了大量的插件，目前jQuery兼容于所有主流浏览器
在线使用:https://www.bootcdn.cn/jquery/
中文文档:https://jquery.cuishifeng.cn/
1.2JQuery安装
jQuery安装十分简单，只需要将jQuery的库导入到html中即可，我们可以下载下来也可以使用CDN资源。
一般我们在下载或者使用cdn资源的时候，都会让我们选择jquery.js 与 jquery.min.js版本，它们的区别在于jquery.min.js是经过压缩的，体积更小，适用于部署环境。而jquery适用于源码研究，我们对于jquery的学习，应该要上升到源码层次。

1.本地引入

2.在线引入

Document - 锐客网 //本地引入//源代码引入one two three

1.3jQuery函数

通过"jQuery"和'$'来调用函数 1.$(选择器) 通过选择器选择到符合条件的Element元素，将其保存到jQuery对象中 2.$(html片段) 将html片段转换成Element元素，然后再封装成一个jQuery对象 3.$(Element元素) 将Element元素转换成一个jQuery对象 4.$(匿名函数) 匿名函数在文档加载完毕后执行，类似于window.onload=function(){}

// jquery核心函数 console.log($,typeof $) //function jQuery(selector, context)function // jquery核心对象 console.log($(),$() instanceof Object)//Object{}true 1.选择器选择到符合条件的Element元素，将其保存到jQuery对象中 console.log($('.box')); var children=$('.child'); console.log(children); one two three2.html片段将html代码片段转换成Element元素，封装成一个jQuery对象 var newChild=$('four'); console.log(newChild) 3.Element元素 console.log($('div'))--转换成一个Jquery对象 4.$(匿名函数)

1.比较原生js和jQuery

通过原生js和jQuery来获取到三个div并修改他们的背景色

Document - 锐客网

1.4比较原生js和jquery入口函数的区别

原生js 1.如果编写了多个入口就函数，后面的会覆盖掉前面的 window.onload=function(){ alert('我是入口函数1') }; window.onload=function(){ alert('我是入口函数2') } jquery 2.如果编写了多个入口函数，会依次执行 $(document).ready(function(){ alert('我是入口函数1jquery') }) $(document).ready(function(){ alert('我是入口函数2jquery') }) $(document).ready(function(){ alert('我是入口函数3jquery') }) 3.jquery入口函数的写法第一种: $(document).ready(function(){ alert('我是入口函数3jquery') }) 第二种 jQuery(document).ready(function(){ alert('我是入口函数4jquery') }) 第三种-->推荐写法 $(function(){ alert('我是入口函数5jquery') }) 第四种 jQuery(function(){ alert('我是入口函数6jquery') })

1.5jQuery对象

jQuery对象是类数组对象，jQuery方法都是对类数组对象中元素的批量操作.
注意：jQuery对象可以调用jQuery.prototype中声明的方法，普通的Element元素则不能调用。在使用jquery的时候，拿到一个对象务必要搞明白该对象是Element元素还是jQuery实例**

$(function(){ $('.child').text('hello') })

2.jQuery选择器

jQuery选择器与CSS选择器几乎完全一致，这里就不再赘述。
1.基本选择器
2.层次选择器
3.伪类选择器
4.伪元素选择器
5.属性选择器

$("form") $("ul.nav > li")

jQuery中所有选择器都以美元符号开头：$()
1.元素选择器在页面中选取所有元素

$("div")

实例
用户点击按钮后所有隐藏

$(function(){ var div= $('div'); console.log(div) var button=$('button'); button.click(function(){ div.hide() })}) 1 2 3 4 5

2.类选择器

var child1=$('.child1') var button=$('button'); button.click(function(){ child1.hide() }) 1 2 3 4 5

3.id选择器

$('#child2') var child2=$('#child2') var button=$('button'); button.click(function(){ child2.hide() }) 1 2 3 4 5

3.事件绑定
jQuery的事件绑定与Element元素不同，不可以使用onxxx属性，也不能使用addEventListener，而是使用on()，可以理解为on是对于Element元素事件绑定的封装。

on(event,[selector],[data],fn)

off(event,[selector],fn)

3.one(event,[selector],fn)

trigger(event,[data]) 模拟事件

快捷绑定 click

1.on $('.child').on('click',function(event){ // this--dom节点 console.log(this) })

2.one $('.child').one('click',function(event){ // this--dom节点 console.log(this) })

3.trigger 先有一个点击事件 trigger模拟点击事件 $('.child').on('click',function(event){ // this--dom节点 console.log(this) }) // trigger 模拟事件触发 // 触发第一个child的点击事件 $('.child:first-child').trigger('click')

4.off 解绑解绑第二个参数必须是具名函数，匿名函数不可解绑 function handler(){ console.log(this) } $('.child').on('click',handler); $('.child').off('click',handler);

5.快捷绑定 $('.child').click(function(){ console.log(this) })

3.2事件类型
2.click()
click()方法是当按钮点击事件被触发时会调用一个函数
3.dblclick()
当双击元素时，会发生dbclick事件

$('.child').dblclick(function(){ console.log(this) })

4.mouseenter()
当鼠标指针穿过元素时，会发生mouseenter事件

$('.child').mouseenter(function(){ console.log(this) })

5.mouseleave()
当鼠标指针离开元素时，会发生mouseleave事件

$('.child').mouseleave(function(){ console.log(this) })

6.mousedown()
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件

$('.child').mousedown(function(){ console.log(this) })

7.mouseup()
当元素上松开鼠标按钮时，会发生mouseup事件

$('.child').mouseup(function(){ console.log(this) })

8.hover()
hover()方法用于模拟光标悬停事件
当鼠标移动到元素上时，会触发指定当第一个函数（mouseenter）；当鼠标移出这个元素时，会触发指定当第二个函数（mouseleave）

$('.child').hover(function(){ console.log(this) })

9.blur()
当元素失去焦点时，发生blur事件

$('input').blur(function(){ console.log(this) })

10.keydown()
键盘事件：按键按下事件

$('.child').keydown(function(){ console.log(this) })

11.keyup()
键盘事件：按键抬起事件

$('.child').keyup(function(){ console.log(this) })

3.3事件代理

$('body').on('click','button',function (event) { console.log(event) })

4.jQuery Dom操作

jQuery中提供了一系列的操作DOM节点的api,用于解决DOM原生API无法进行批量操作并且功能性较差的弊端。
插入方法：append、appendTo、prepend、prependTo、after、before、insertBefore、insertAfter
包裹方法：wrap、unwrap、wrapAll、wrapInner、
替换方法：replaceWith、replaceAll
移除方法：empty、remove、detach
克隆方法：clone

1.append 将内容插入到元素内同尾部 $(function(){ $('.parent').append('Hello') }) parent 2.appendTo 讲添加的元素插入到目标元素中 $(function(){ $('new').appendTo('.parent') }) 3.empty(); 无参数清空目标元素子节点 $('.parent').empty() 4.clone(); 默认浅克隆，只克隆节点不克隆事件；传递参数为true的时候深克隆，和dom事件一样克隆节点的时候,也会克隆事件 function myfun(){ console.log('dom克隆') } $('.child:last-child').on('click',myfun) $('.child:last-child').clone(true).appendTo('.parent'); one two three

4.2属性操作

1.属性：attr、removeAttr
2.css：addClass、removeClass、toggleClass
3.内容：html、text、val

1.atte 获取属性一个参数代表获取属性值两个参数代表修改当前属性值为第二个参数 console.log($('.parent').attr('class'))$('.parent').attr('title','one') console.log($('.parent').attr('title')) 2.removeAttr $('.parent').removeAttr('title') console.log($('.parent').attr('title')) 3.removeClass 移除类名并且移除样式 $('.child').removeClass('child'); 4.addClass 添加类名 $('.child').addClass('active')one two three5.toggleClass 切换类名原dom有类名删除，没有类名添加 $('.child').toggleClass('active')one two three使用this通过点击事件也可以切换 $('.child').on('click',function(){ $(this).toggleClass('active') }) 6.获取内容 console.log($('.parent').html()); console.log($('.parent').text()); console.log($('input[type=text]').val());

5.静态方法

静态方法属于定义在jQuery函数上的方法，通过jQuery或者$直接调用的方法
【JQuery基础知识】数组及对象操作：each、map、toArray

5.1数组及对象操作

1.each 遍历数组或者对象第一个参数要遍历的数组或对象第二个参数处理函数var obj={ name:"zhangsan", age:12 } $.each(obj,function(index,item){ console.log(index,item) }) 2.toArray 将类数组对象转换为数组 console.log($('.child').toArray()) 3.map() 将一个数组中的元素转换到另一个数组中 var arr=$.map([0,1,2],function(item){ return item+4 }) console.log(arr)