JQuery

概念

概念：一个JavaScript框架。简化JS开发

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已

//根据id获取元素function get(id){var obj = document.getElementById(id);return obj;}

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title><script src=\"js/common.js\"></script></head><body><div id=\"div1\">div1</div><div id=\"div2\">div2</div></body><script>// var div1 = document.getElementById(\"div1\");// var div2 = document.getElementById(\"div2\");var div1 = get(\"div1\");var div2 = get(\"div2\");alert(div1);alert(div2);</script></html>

快速入门

步骤：

下载JQuery
* jquery-xxx.js 与 jquery-xxx.min.js区别：

jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些
jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快

导入JQuery的js文件：导入min.js文件

使用

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>jq快速入门</title><script src=\"js/jquery-3.3.1.min.js\"></script></head><body><div id=\"div1\">this is div1</div><div id=\"div2\">this is div2</div></body><script>//获取页面上的元素var div1 = $(\"#div1\");alert(div1.html());</script></html>

##JQuery对象和JS对象区别与转换

JQuery对象在操作时，更加方便。
JQuery对象和js对象方法不通用的.
两者相互转换

jq – > js : jq对象[索引] 或者 jq对象.get(索引)
js – > jq : $(js对象)

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>jq快速入门</title><script src=\"js/jquery-3.3.1.min.js\"></script></head><body><div id=\"div1\">this is div1</div><div id=\"div2\">this is div2</div></body><script>//获取页面上的元素// var div1 = $(\"#div1\");// alert(div1.html());//js和jq对象的相互转换var divArr = document.getElementsByTagName(\"div\");//alert(divArr);//可以当成数组来使用for (var i = 0; i < divArr.length; i++) {// divArr[i].innerHTML=\"aaa\";//js对象转换为jq对象//$(divArr[i]).html(\"aaa\");}var divArr2 = $(\"div\");//alert(divArr2);//也可以当成数组来使用//divArr2.html(\"ccc\");//divArr2.innerHTML=\"bbb\";js和jq对象的方法属性不通用for (var i = 0; i < divArr2.length; i++) {//jq转换为js对象divArr2.get(i).innerHTML=\"ddd\";}var $div1 = $(\"#div1\");$div1[0].innerHTML=\"eee\";</script></html>

选择器：筛选具有相似特征的元素(标签)

基本操作学习

事件绑定
//1.获取b1按钮
$(\”#b1\”).click(function(){
alert(“abc”);
});
入口函数
$(function () {

});
window.onload 和 $(function) 区别

window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉
$(function)可以定义多次的。

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>事件绑定</title><script src=\"js/jquery-3.3.1.min.js\"></script><script>window.onload=function () {$(\"#btn1\").click(function () {alert(\"132\");});}//定义多次，后面的会覆盖前面的window.onload=function () {$(\"#btn1\").click(function () {alert(\"abc\");});}$(function () {//dom文档加载完成之后，执行其中的代码$(\"#btn1\").click(function () {alert(\"456\");});});//可以定义多次$(function () {$(\"#btn1\").click(function () {alert(\"456\");});});</script></head><body><button id=\"btn1\">按钮</button></body></html>

DOM操作

1. 内容操作

html(): 获取/设置元素的标签体内容
内容 –> 内容
text(): 获取/设置元素的标签体纯文本内容
内容 –> 内容
val()：获取/设置元素的value属性值

2. 属性操作

1. 通用属性操作

attr(): 获取/设置元素的属性attribute
removeAttr():删除属性
prop():获取/设置元素的属性propertity
removeProp():删除属性

attr和prop区别？

如果操作的是元素的固有属性，则建议使用prop
如果操作的是元素自定义的属性，则建议使用attr

从jQuery1.6开始，使用attr()获取这些属性的返回值为String类型，如果被选中(或禁用)就返回checked、selected或disabled，否则(即元素节点没有该属性)返回undefined。
jQuery认为：attribute的checked、selected、disabled就是表示该属性初始状态的值，property的checked、selected、disabled才表示该属性实时状态的值(值为true或false)。

总结建议：

获取和设置disabled、selected、checked这些属性时，应该使用prop()方法，不要使用attr()方法！！能够用prop()操作的尽量用prop()操作，不要用attr()操作。

2. 对class属性操作

addClass():添加class属性值
removeClass():删除class属性值
toggleClass():切换class属性

toggleClass(“one”):
判断如果元素对象上存在class=“one”，则将属性值one删除掉。如果元素对象上不存在class=“one”，则添加

css():

3. CRUD操作:

append():父元素将子元素追加到末尾

对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾

prepend():父元素将子元素追加到开头

对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头

appendTo():

对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾

prependTo()：

对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头

after():添加元素到元素后边

对象1.after(对象2)：将对象2添加到对象1后边(外部)。对象1和对象2是兄弟关系

before():添加元素到元素前边

对象1.before(对象2)：将对象2添加到对象1前边（外部）。对象1和对象2是兄弟关系

insertAfter()

对象1.insertAfter(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系

insertBefore()

对象1.insertBefore(对象2)：将对象2添加到对象1前边。对象1和对象2是兄弟关系

remove():移除元素

对象.remove():将对象删除掉

empty():清空元素的所有后代元素。

对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点

JQuery（一）

JQuery

概念

快速入门

选择器：筛选具有相似特征的元素(标签)

基本操作学习

分类

1.基本选择器

2. 层级选择器

3.过滤选择器

4.表单过滤选择器

DOM操作

1. 内容操作

2. 属性操作

1. 通用属性操作

2. 对class属性操作

3. CRUD操作:

相关推荐

热门文章

热门标签

回顶部