首页 / JAVASCRIPT / javaScript库
javaScript库
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javaScript库,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含9779字,纯文字阅读大概需要14分钟。
内容图文
![javaScript库](/upload/InfoBanner/zyjiaocheng/615/bc7050284b394dd783b2f417f05536a1.jpg)
jquery
用原生 js 写代码的时候,比如获取节点:
$('#test'); // jquery
再比如发送 ajax 请求:
let xhr = null;
// 处理代码的兼容性问题
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// jquery
$.ajax({
url : 'xxxxx',
type : 'GET',
success : function(data){
// 做数据拿回来之后的处理
}
})```
**jquery 的特点如下**
- 轻量
- 强大的选择器
- DOM 操作的封装
- 完善的 ajax
- 解决了大部分的兼容性问题
- 链式操作
**jquery 版本**
目前最新的版本是 3.x。
如果要考虑 IE8 及其以下版本的浏览器的兼容性,只能用 1.x 的版本。也就是说,2.x 和3.x没有考虑兼容性的问题。
一般每个版本的jquery有比如 jquery-1.1.2 和 jquery-1.1.2.min.js,有min的代表的是压缩版。
**jquery 核心方法**
在 jquery 中,最最最核心的就是 jquery 方法
`jquery()
// 该方法有一个别名
$()`
该方法可以将一个对象转换为 jquery 对象,注意jquery对象的方法和DOM对象的方法是不能够混用的。
如果是jquery对象,就只能调用jquery的方法,如果是DOM对象,就只能调用DOM对象的方法。
```// 我们通过这个方法,可以获取DOM节点
$('#test')
$(document.body)
$([1,2,3])
$('<p></p>')
通过上面的代码,我们可以看出,构建一个jquery对象的方式很多。
jquery对象如何转成DOM对象。
通过get方法,可以将一个jquery对象转换为DOM对象
$('#root')[0].innerHTML = 'xxx';
each 方法
循环 jquery 对象的方法
$('p').each((item)=>{ // 做具体的操作 })
document.ready 方法
这个方法就类似于原生 js 中的 window.onload 事件。
`$(document).ready(function(){});
// 或者
$(function(){})`
虽然这个方法类似于 window.onload 事件,但是两者还是有区别的。
window.onload 是在DOM文档树加载完所有文件(包括图片加载)后才会执行。
document.ready 方法是在 DOM 文档树加载后就马上执行。
jquery 选择器
jquery 中的选择器,绝大部分和 css 是相同的,但是也有一些 jquery 特有的选择方式:
- :first
- :last
- :even
- :odd
- :eq
- :gt
- :lt
- :header
- :animated
- :contains(text)
- :has(selector)
- :parent
- :hidden
- :visible
- :input
- :text
- :password
- :radio
- :checkbox
- :submit
- :image
- :reset
- :button
- :file
- :hidden
- :selected
jquery 筛选器
在 jquery 中,除了选择器以外,还提供了一组筛选器。
我现在已经有一组 jquery 对象
// 上面的代码,我们已经获取到了一组 jquery 对象,接下来我们就可以从这一组 jquery 对象中筛选我们要的某一个
jquery 对象
$('p').eq(0)
eq()
first()
last()
hasClass()
filter()
is()
map()
has()
not()
slice()
children()
find()
next()
nextAll()
nextUntil()
parent()
parents()
parentsUntil()
prev()
prevAll()
prevUntil()
siblings()
contents()
end
使用筛选器的时候,还需要注意 get 和 eq 方法的区别:
$('p').get(0); // 将 jquery 对象转为 DOM 对象
$('p').eq(0); // 选择第一个 jquery 对象
jquery 操作属性的方法
在 jquery 中,方法有一个特点,获取和设置方法同名。
console.log($('#op').attr('class'));
// 设置元素属性
// $('#op').attr('class','test2');
$('#op').attr({
'class' : 'test3',
'id' : 'opp'
});
removeAttr:删除某个属性
$('#op').removeAttr('id'); // 删除一个
$('#op').removeAttr('id class'); // 删除多个
- prop
- removeProp
这一组方法也是做属性操作,和 attr 那一组方法的区别。
prop 和 removeProp 和 attr 那一组的区别在于他们是操作特殊属性。
`$('#test').prop('checked'); // 获取这个复选框的选中状态
$('#test').prop('checked', false);
`
类似的属性还有:
-
disabled
-
autofoucus
-
readonly
-
mutiple
-
checked
-
selected
-
addClass:添加一个类
-
removeClass:删除一个类
-
toggleClass:如果有这个类,就删除,否则就添加
$('div').toggleClass('bgc');
});```
- html
- text
- val
这一组方法对应的是原生 js 的 innerHTML,innerText,value
``` console.log($('#btn').html())
$('#btn').html('这是一个按钮');
jquery 操作 css 的方法
最最核心的就是 css 方法。
$('#btn').click(function(){
// $('div').css('background-color','red');
$('div').css({
'background-color' : 'red',
'width' : '60px',
'height' : '60px'
})
})
- height
- width
- innerHeight
- innerWidth
- outerHeight
- outerWidth
- scrollTop
- scrollLeft
- offset:节点相对于视口的位置
- postion:相对于父元素的偏移位置
jquery 文档处理方法
这里就是涉及到节点的操作。所谓节点的操作,就是指创建节点、修改节点、删除节点。
在 jquery 中,就提供了大量的方法来简化这些操作 - append
- appendTo
这两个方法本质是一样的,主要就是顺序的区别。示例如下:
$('#btn').click(function(){
// $('div').append('<p>this is a test</p>');
$('<p>test!!!</p>').appendTo('div');
})
-
append
-
appendTo
-
prepend
-
prependTo
-
after
-
before
-
insertAfter
-
insertBefore
-
wrap
-
unwrap
-
wrapAll
-
warpInner
-
replaceWith
-
replaceAll
-
empty
-
remove
-
detach
remove 和 detach 的区别如下:
$('div>p:first').click(function(){
console.log('我是一个段落');
})
$('#btn').click(function(){
i = $('div>p:first').detach();
console.log(i);
})
$('#btn2').click(function(){
$('div').append(i);
})
-clone
jquery 事件处理
在 jquery 中,事件的绑定,根据事件类型提供了对应的方法。
$('p').click(function(e){
console.log(e); // 事件对象也能够正常获取
});
事件对象:所谓事件对象,首先它是自动生成,当你触发事件的时候,就会生成这么一个对象。通过这个对象,我们可以拿到用户触发事件时的一些具体信息。
key 事件,我们往往需要知道用户究竟按的是哪一个键,那么这个重要信息就在事件对象里面。
- ready
- on
- off
- one
- delegate
- hover
- blur
- change
- click
- dblclick
- error
- focus
- focusin
- focusout
- keydown
- keyup
- mousedown
- mouseenter
- mouseleave
- mousemove
- mouseout
- mouseover
- mouseup
- resize
- scroll
- select
- submit
- unload
在上面诸多的事件方法中,需要掌握的就是 on 和 off 方法。 - on:绑定事件
- off:删除事件
// console.log(e);
// });
$('p').on('click' ,function(){
console.log('aaaa')
});
off 示例如下:
<body>
<button id="btn">移除事件</button>
<p>this is a tesrt</p>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('p').click(function(){console.log('this is a p')});
$('#btn').click(function(){$('p').off()});
</script>
</body>
事件委托如下:
$('ul').on('click','.test',function(){
console.log('aaa')
})
- on
- bind
- live
- delegate
下面绑定事件的方式,目前 jquery 已经废弃掉了,现在官方推荐就使用 on 来绑定事件。
one:一次性事件
<body>
<p>this is a test</p>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('p').one('click',function(){console.log('this is a p')});
</script>
</body>
hover: 等价于移入移出两个事件的集合
<body>
<p>this is a test</p>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('p').hover(function(){
console.log('移入了');
},function(){
console.log('移出了');
});
</script>
</body>
jquery 动画
在 jquery 中,提供了很多种内置的动画方法:
- show
- hide
- toggle
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid;
background-color: red;
}
</style>
</head>
<body>
<button id="btn">隐藏</button>
<button id="btn2">显示</button>
<div></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('#btn').click(() => {
$('div').hide(500);
})
$('#btn2').click(() => {
$('div').show(500);
})
</script>
</body>
- slideDown
- slideUp
- slideToggle
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid;
background-color: red;
}
</style>
</head>
<body>
<button id="btn">隐藏</button>
<button id="btn2">显示</button>
<div></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('#btn').click(() => {
$('div').slideUp(500);
})
$('#btn2').click(() => {
$('div').slideDown(500);
})
</script>
</body>
- fadeIn
- fadeOut
- fadeTo
- fadeToggle
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid;
background-color: red;
}
</style>
</head>
<body>
<button id="btn">隐藏</button>
<button id="btn2">显示</button>
<button id="btn3">指定半透明</button>
<div></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('#btn').click(() => {
$('div').fadeOut(500);
})
$('#btn2').click(() => {
$('div').fadeTo(500,1);
})
$('#btn3').click(() => {
$('div').fadeTo(500,0.5);
})
</script>
</body>
- animate
- stop
- delay
- finish
在 jquery 中,也是给我们提供了一组 ajax 的方法。
jquery 中的 ajax 方法
- ajax
- load
- get
- post
- serialize
- serializeArray
ajax : 这是 jquery 中提供的 ajax 相关的最核心的方法:
// 当我们引入了 jquery 之后,就有一个最核心的方法,叫做 jquery()
// jquery() 方法有一个简写 $()
// 但是其实引入 jquery 之后,还会有一个 jquery 全局对象,简写就是一个 $
$.ajax({
url : '请求地址',
type : '请求类型',
async : 布尔值,(true 异步,false 同步)
data : 'name="xiejie"&age=18',
success : function(){}
})
下面是一个使用 jquery 的 ajax 方法来发送请求的示例:
<body>
<button id="btn">从服务器获取数据</button>
<table id="tab"></table>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
Mock.mock('/getStu',function(){
return Mock.mock({
'list|5' : [{
'id|+1' : 1,
'name' : '@cname()',
'age|18-30' : 1
}]
})
})
const render = function(arr){
let tHead = `<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
</tr>`;
let tBody = arr.map(item=>{
return `<tr>
<td>${item.id}</td>
<td>${item.name}</td>
<td>${item.age}</td>
</tr>`
}).join('');
$('#tab').html(tHead+tBody)
}
$('#btn').on('click',function(){
$.ajax({
url : '/getStu',
type : 'GET',
success : function(data){
render(JSON.parse(data).list);
}
})
})
</script>
</body>
- serialize:返回的是字符串的形式
- serializeArray:返回的是数组
示例如下:
<body>
<button id="btn">是否能够提交</button>
<form action="#" id="myForm">
<div>
<label for="stuName">name</label>
<input type="text" name="stuName" id="stuName">
</div>
<div>
<label for="stuAge">age</label>
<input type="text" name="stuAge" id="stuAge">
</div>
<div>
<label for="stuScore">stuScore</label>
<input type="text" name="stuScore" id="stuScore">
</div>
</form>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js">
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('#btn').on('click',function(){
if($('#myForm').serializeArray().every(item=>{
return item.value != ''
})){
alert('OK')
} else {
alert('No');
}
})
</script>
</body>
内容总结
以上是互联网集市为您收集整理的javaScript库全部内容,希望文章能够帮你解决javaScript库所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。