目录
jQuery介绍
jQuery是一个轻量级的兼容多浏览器的javascript库.它使用户能够更方便的处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Write less, do more.“
JQuery优势
它是一款轻量级JS框架, 核心文件只要10+kb.
是一个丰富的DOM选择器,
可以将多个操作写入一行代码里,是代码更加简洁,
事件,样式,支持动画, 支持Ajax操作.
跨浏览器兼容,
插件扩展开发.
'''版本区别'''
1.x:兼容IE678
2.x:不兼容IE678
3.x:不兼容IE678 学习直接使用最新版即可
使用JQuery必须要先导入, 其本质就是一个js文件.
jQuery必须先导入才可以使用(html页面上得写导入语句>>>:容易忘)
jQuery本身就是一个js文件 里面写了一些js代码而已
网络CDN服务, 是只要计算机能够联网就可以直接导入>>> bootcdn
下载链接:jQuery官网
中文文档:jQuery AP中文文档
'''导入方式'''
1.本地jQuery文件
不会收到网络影响
2.CDN加速服务
需要确保有互联网
min.js 压缩之后的文件 容量更小
.js 没有压缩的文件 容量稍大
jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象,那么它就可以使用jQuery里的方法:例如$(“#i1”).html()。
$("#i1").html()
的意思是:获取id值为 i1
的元素的html代码。其中 html()
是jQuery里的方法。
相当于: document.getElementById("i1").innerHTML;
虽然 jQuery对象
是包装 DOM对象
后产生的,但是 jQuery对象
无法使用 DOM对象
的任何方法,同理 DOM对象
也没不能使用 jQuery
里的方法。
一个约定,我们在声明一个jQuery对象变量的时候在变量名前面加上$:
var $variable = jQuery对像 var variable = DOM对象 $variable[0]//jQuery对象转成DOM对象
拿上面那个例子举例,jQuery对象和DOM对象的使用:
$("#i1").html();//jQuery对象可以使用jQuery的方法 $("#i1")[0].innerHTML;// DOM对象使用DOM的方法
jQuery基础语法
$(selector).action()
基本使用
将页面上的两个p标签文本内容一个变成红色 一个变成绿色
原生的js代码
let p1Ele = document.getElementsByTagName('p')[0]
let p2Ele = document.getElementsByTagName('p')[1]
p1Ele.style.color = 'red'
p2Ele.style.color = 'green'
jQuery代码
$('#d1').css('color','red').next().css('color','green')
JQ选择器 对比js
选择器 | JQuery | CSS |
id | $("#id') | #i1{ background -color:red; } |
元素选择器 | p {color :" red"} | |
标签 | $("tagName") | |
class | $(".className") | .c1 { front_si |