jQuery学习

最新推荐文章于 2022-04-25 14:35:03 发布

夜店杰尼龟

最新推荐文章于 2022-04-25 14:35:03 发布

阅读量147

点赞数

文章标签： jquery javascript

本文链接：https://blog.csdn.net/qq_45072014/article/details/120208027

版权

JQuery框架的基本使用

一．jquery的导入jquery (v3.6.0) - jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务https://www.bootcdn.cn/jquery/ 1.本地导入:新建一个js，进入

找到JQuery的源码将源码复制到js中在html中用script导入

在线引入:在head中使用script标签

jQuery函数

通过"jQuery"和'$'来调用函数

1.$(选择器)

通过选择器选择到符合条件的Element元素，将其保存到jQuery对象中

2.$(html片段)

将html片段转换成Element元素，然后再封装成一个jQuery对象

3.$(Element元素)

将Element元素转换成一个jQuery对象

4.$(匿名函数)

匿名函数在文档加载完毕后执行，类似于window.οnlοad=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);

<div class="child">three</div>

</div>

2.html片段

将html代码片段转换成Element元素，封装成一个jQuery对象

var newChild=$('<div class="new">four</div>');

console.log(newChild)

3.Element元素

console.log($('div'))--转换成一个Jquery对象

4.$(匿名函数)

比较原生js和jQuery

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

<!DOCTYPE html>

<head>

<title>Document</title>

// 原生js来获取div并修改背景色

window.οnlοad=function(){

//1.获取element元素

var div1=document.getElementsByTagName('div')[0];

var div2=document.getElementsByClassName('box1')[0];

var div3=document.getElementById('box2');

console.log(div1,div2,div3)

//2.修改element元素背景色

div1.style.backgroundColor='red'

div2.style.backgroundColor='yellow';

div3.style.backgroundColor='cyan';

div1.style.width='400px';

div1.style.height='400px';

}

//利用jquery获取div并修改背景色

$(function(){

// 获取到element元素

var div1=$('div:first');

var div2=$('.box1');

var div3=$('#box2');

console.log(div1,div2,div3)

// 修改背景色

div1.css({

backgroundColor:'red'

});

div2.css({

width:'400px',

height:'200px',

backgroundColor:'yellow'

})

//如果是想要创建并插入节点

var div4 = $('<div id="box3">four</div>').appendTo('.parent')

})

</script>

</head>

<body>

</body>

</html>

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

原生js

1.如果编写了多个入口就函数，后面的会覆盖掉前面的

window.οnlοad=function(){

alert('我是入口函数1')

};

window.οnlοad=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')

})

八．jQuery对象

jQuery对象是类数组对象，jQuery方法都是对类数组对象中元素的批量操作.

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

$(function(){

$('.child').text('hello')

})

九．jQuery选择器

jQuery选择器与CSS选择器几乎完全一致，这里就不再赘述。

1.基本选择器

2.层次选择器

3.伪类选择器

4.伪元素选择器

5.属性选择器

jQuery中所有选择器都以美元符号开头：$()

十．jQuery的事件绑定

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

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

2.off(event,[selector],fn)

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

4.Trigger(event,[data]) 模拟事件

5.快捷绑定 click

十一．事件代理

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

console.log(event)

})

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.属性：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')

<div class="child">three</div>

</div>

5.toggleClass 切换类名原dom有类名删除，没有类名添加

$('.child').toggleClass('active')

<div class="child active">three</div>

</div>

使用this通过点击事件也可以切换

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

$(this).toggleClass('active')

})

6. 获取内容

console.log($('.parent').html());

console.log($('.parent').text());

console.log($('input[type=text]').val());

数组及对象操作

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)

夜店杰尼龟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习

JQuery框架的基本使用一．jquery的导入jquery (v3.6.0) - jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务https://www.bootcdn.cn/jquery/1.本地导入:新建一个js，进入找到JQuery的源码将源码复制到js中在.
复制链接

扫一扫