一. jQuery 对象和原生 Dom 对象有什么区别？
- DOM对象是我们用传统的方法（javascript）获得的对象，jQuery对象就是用jQuery的类库选择器获得的对象。
- jQuery选择器得到的jQuery对象和标准的js中的document.getElementById()取得的dom对象是两种不同类型,两者不等价。
注意 ：js原生获取的dom是一个对象，jQuery对象就是一个数组对象，其实就是选择出来的元素的数组集合。所以说他们两者是不同的对象类型不等价。jQuery无法使用DOM对象的任何 方法，同理Dom对象也不能使用jQuery里的方法.乱使用会报错。
二. Dom对象与jQuery对象互相转换：
- 原生DOM对象转jQuery对象：
var box = document.getElementById('box');
var $box = $(box);
- jQuery对象转原生DOM对象：
var $box = $('#box');
var box1 = $box[0];
var box2 = $box.get(0);
三. 使用jQuery修改DOM元素相当简单。
只需要把DOM字符串传入$方法即可返回一个jQuery对象：
var obj = $('<div class="test"><p><span>Done</span></p></div>');
四. jQueryDom与函数
1. 添加元素append()
append() 方法在被选元素的结尾插入内容。
<div>中午好！</div>
<div>该吃午餐了</div>
<div>要一起吗？</div>
<button>添加</button>
<script>
$(document).ready(function() {
$('button').click(function() {
$('div').append('<span>我还有点事，谢谢！</span>')
// 不用加上span标签也可以实现添加
//$('div').append('abc')
})
})
</script>
可以一次添加多个内容，内容可以是DOM对象、HTML string、 jQuery对象。
append.png
appen2.png
如果参数是function，function可以返回DOM对象、HTML string、 jQuery对象，参数是集合中的元素位置与原来的html值
- 使用函数在指定元素的结尾插入内容。
<div>中午好！</div>
<div>该吃午餐了</div>
<div>要一起吗？</div>
<button>添加</button>
<script>
$(document).ready(function() {
$('button').click(function() {
$('div').append(function(n) {
return '<span>我有事呢，不去了' + n + '</span>'
})
})
})
</script>
2. prepend()
向对象头部追加内容，用法和append类似，内容添加到最开始
<div>中午好！</div>
<div>该吃午餐了</div>
<div>要一起吗？</div>
<button>添加</button>
<script>
$(document).ready(function() {
$('button').click(function() {
$('div').prepend('abc')
})
})
</script>
prepend.png
prepend2.png
3. before()参数和append类似
在对象前面插入内容，插入内容会自成一行。
插入内容不会在被选元素的后方显示，而是另起一行，如果有多次插入都会在另起行显示
<div>中午好！</div>
<div>该吃午餐了</div>
<div>要一起吗？</div>
<button>添加</button>
<script>
$(document).ready(function() {
$('button').click(function() {
$('div').before('abc')
})
})
</script>
after.png
before.png
before2.png
4. after()参数和append类似
after() 方法在被选元素后插入指定的内容。插入内容不会在被选元素的后方显示，而是另起一行，如果有多次插入都会在另起行显示
<div>中午好！</div>
<div>该吃午餐了</div>
<div>要一起吗？</div>
<button>添加</button>
<script>
$(document).ready(function() {
$('button').click(function() {
$('div').after('abc')
})
})
</script>
after.png
after2.png
af.png
5. remove()
remove() 方法移除被选元素，包括所有文本和子节点。
该方法不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素。
但除了这个元素本身得以保留之外，remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。
<p>中午好！</p>
<div>该吃午餐了</div>
<div>要一起吗？</div>
<button>删除</button>
<script>
$(document).ready(function() {
$('button').click(function() {
$('div').remove()
})
})
</script>
remove.png
remove2.png
或者使用选择器操作
<script>
$(document).ready(function() {
$('button').click(function() {
$('.span').remove()
})
})
</script>
6. empty()
empty() 方法从被选元素移除所有内容，包括所有文本和子节点。
<header>
<p>中午好！</p>
<button>删除</button>
<script>
$(document).ready(function() {
$('button').click(function() {
$('p').remove()
})
})
</script>
看到这里，empty和remove都是移除内容，文本与子节点，到底两者有什么不同？
做个案例：
<header>
<p>中午好！</p>//元素设置背景色，高度和宽度
<button>删除</button>
<script>
$(document).ready(function() {
$('button').click(function() {
$('p').empty()//删除p元素
})
})
</script>
empty1.png
用empty方法删除p元素后，css样式保留的下来，内部文本消失了
empty2.png
现在用remove方法试一下：
<p>中午好！</p>
<button>删除</button>
<script>
$(document).ready(function() {
$('button').click(function() {
$('p').remove()
})
})
</script>
empty1.png
remove3.png
用remove方法后点击删除，页面就仅剩下删除按钮了。
7. html()
- 当传递了一个string参数的时候，修改元素的innerHTML为参数值。
- 如果结果是多个进行赋值操作的时候会给每个结果都赋值。
- 如果结果多个，获取值的时候，返回结果集中的第一个对象的相应值。
<header>
<p>中午好！</p>
<button>改变p元素内容</button>
<script>
$(document).ready(function() {
$('button').click(function() {
$('p').html("晚上好！")
})
})
</script>
html1.png
html2.png
8. text()
读取或修改元素的纯文本内容。和html方法类似，操作的是DOM的innerText值.
text()：取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。返回的是一个String
text(val)：设置所有匹配元素的文本内容, 与 html() 类似, 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体).返回一个jquery对象
<p>中午好！</p>
<button>改变p元素内容</button>
<script>
$(document).ready(function() {
$('button').click(function() {
$('p').text("很饿啊")
})
})
</script>
html1.png
text.png
注意：
html与text虽然类似，但是返回结果是不一样的
例子：
<p>中午好！</p>
<p>该吃饭了</p>
<button>改变p元素内容</button>
<script>
$(document).ready(function() {
$('button').click(function() {
alert($('p').html())
})
})
</script>
如果html方法未设置参数，则返回被选元素的当前内容。如果元素有多个，它会返回第一个匹配元素的内容。
html3.png
text 取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本
<p>中午好！</p>
<p>该吃饭了</p>
<button>改变p元素内容</button>
<script>
$(document).ready(function() {
$('button').click(function() {
alert($('p').text())
})
})
</script>
text2.png
jQuery函数
1. val()
-
这是一个读写双用的方法，用来处理input的value，当方法没有参数的时候则返回被选元素的当前值，当传递了一个参数的时候，方法修改input的value值为参数值。
<p>今天怎么样：<input type="text" name="uaer" value="中午好" /></p>
<button>改变文本域的值</button>
<script>
$(document).ready(function() {
$('button').click(function() {
$(':text').val('到晚上了')
})
})
</script>
val.png
val1.png
-
当方法没有参数的时候则返回被选元素的当前值，有多个则是选择第一个。
<script>
$(document).ready(function() {
$('button').click(function() {
alert($(':text').val())
})
})
</script>
val2.png
-
没有设置value时可以val()方法来添加。
<p>今天天气怎么样：<input type="text" name="uaer" /></p>
<p>今天阳光好吗：<input type="text" name="uaer" /></p>
<button>添加文本域的值</button>
<script>
$(document).ready(function() {
$('button').click(function() {
$(':text').val('还不错')
})
})
</script>
val3.png
val4.png
-
或者用function参数来在value原有的值后方添加
<p>今天天气怎么样：<input type="text" name="uaer" value="还不错" /></p>
<button>添加文本域的值</button>
<script>
$(document).ready(function() {
$('button').click(function() {
$(':text').val(function(a, b) {
return b + ',就是太热'
})
})
})
</script>
val5.png
val6.png
2. attr()
attr() 方法设置或返回被选元素的属性值。
<img src="C:/Users/asus/Desktop/3.jpg" width="200px" height="200px" />
<button>获取元素的宽度</button>
<script>
$(document).ready(function() {
$('button').click(function() {
alert('img宽度是:' + $('img').attr('width'))
})
})
</script>
attr.png
-
还能设置img的值：
<img src="C:/Users/asus/Desktop/3.jpg" width="200px" height="200px" />
<button>获取元素的宽度</button>
<script>
$(document).ready(function() {
$('button').click(function() {
$('img').attr('width', "300px")
})
})
</script>
attr1.png
attr3.png
-
设置宽与高的值
<img src="C:/Users/asus/Deskt/3.jpg" width="200px" height="200px" />
<button>获取元素的宽度</button>
<script>
$(document).ready(function() {
$('button').click(function() {
$('img').attr({
width: '300px',
height: '300px'
})//注意设置宽高时需要用上大括号圈住。
})
})
</script>
3. removeAttr()
- removeAttr() 方法从被选元素中移除属性。
- removeAttr() 方法使用原生的 JavaScript removeAttribute() 函数,但是它的优点是可以直接在一个 jQuery 对象上调用该方法，并且它解决了跨浏览器的属性名不同的问题。
<h1>2018-12</h1>
<p style="color:red">我在学习</p>
<p>呃，想不到了</p>
<button>去除p元素的css样式</button>
<script>
$(document).ready(function() {
$('button').click(function() {
$('p').removeAttr('style')
})
})
</script>
removeAttr.png
removeAttr1.png
4. prop()
添加并移除名为 "color" 的属性.
- prop() 方法设置或返回被选元素的属性和值。
当该方法用于返回属性值时，则返回第一个匹配元素的值。
当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。
注意：prop() 方法应该用于检索属性值，例如 DOM 属性（如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected）。 - 提示：如需检索 HTML 属性，请使用 attr() 方法代替。
- 提示：如需移除属性，请使用 removeProp() 方法。
5. css()
- css() 方法更改匹配的元素一个或多个样式属性。
<h1>2018-12</h1>
<p>我在学习</p>
<p>呃，想不到了</p>
<button>更改p元素字体颜色</button>
<script>
$(document).ready(function() {
$('button').click(function() {
$('p').css('color', 'red')
})
})
</script>
css.png
css1.png
- 或者用css()方法获取目标元素的值。注意：如果有多个目标只能获取第一个。
<h1>2018-12</h1>
<p style='color: red'>我在学习</p>
<p style='color: #f80'>呃，想不到了</p>
<button>获取p元素字体颜色值</button>
<script>
$(document).ready(function() {
$('button').click(function() {
alert($('p').css('color'))
})
})
</script>
css2.png
6. addClass()
addClass() 方法向被选元素添加一个或多个类名。
该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。
提示：如需添加多个类，请使用空格分隔类名。
<style>
.abc {
color: red;
border: 1px solid #000;
}
</style>
</head>
<body>
<h1>2018-12</h1>
<p>我在学习</p>
<p>呃，想不到了</p>
<button>给p元素设置类名</button>
<script>
$(document).ready(function() {
$('button').click(function() {
$('p').addClass('abc')
})
})
</script>
给p元素设置类名匹配到css样式。
addClass.png
addclass2.png
- 利用function（a）参数添加多个类名匹配css样式
<style>
* {
padding: 0;
margin: 0;
}
.abc0 {
color: red;
border: 1px solid #000;
}
.abc1 {
color: #f80;
}
</style>
</head>
<body>
<h1>2018-12</h1>
<p>我在学习</p>
<p>呃，想不到了</p>
<button>给p元素设置类名</button>
<script>
$(document).ready(function() {
$('button').click(function() {
$('p').addClass(function(a) {
return 'abc' + a
})
})
})
addClass.png
addclass3.png
7. removeClass()
removeClass() 方法从被选元素移除一个或多个类。
注意：如果没有规定参数，则该方法将从被选元素中删除所有类。如需移除多个类，请使用空格来分隔类名。
<h1>2018-12</h1>
<p class="abc0">我在学习</p>
<p class="abc1">呃，想不到了</p>
<button>给p元素删除类名</button>
<script>
$(document).ready(function() {
$('button').click(function() {
$('p').removeClass('abc0 abc1')//删除多个用空格隔开
})
})
</script>
removeClass.png
removeClass2.png
8. hasClass()
hasClass() 方法检查被选元素是否包含指定的 class。返回true/false
<h1>2018-12</h1>
<p class="abc0">我在学习</p>
<p>呃，想不到了</p>
<button>检查p元素类名</button>
<script>
$(document).ready(function() {
$('button').click(function() {
alert($('p').hasClass('abc0'))
})
})
</script>
hasClass.png
9. toggleClass()
语法：$(selector).toggleClass(class,switch)
toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
class：必需。规定添加或移除 class 的指定元素。
如需规定若干 class，请使用空格来分隔类名。
switch：可选。布尔值。规定是否添加或移除 class。
- 用toggleClass给p元素添加css样式
<h1>2018-12</h1>
<p>我在学习</p>
<p>呃，想不到了</p>
<button>切换p元素类名</button>
<script>
$(document).ready(function() {
$('button').click(function() {
$('p').toggleClass('abc0')
})
})
</script>
结果：
-
打开页面
-
点击切换
toggleClass1.png -
再次点击切换，变回原样
10. each()
each() 方法规定为每个匹配元素规定运行的函数。
注意：返回 false 可用于及早停止循环。
<h1>2018-12</h1>
<p>我在学习</p>
<p>呃，想不到了</p>
<button>输出p元素内容</button>
<script>
$(document).ready(function() {
$('button').click(function() {
$('p').each(function() {
alert($(this).text())
})
})
})
</script>
each.png
-
点击按钮会弹出元素内容
each1.png -
点击确定会继续弹出
each2.png
11. $.extend()
jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。
注意：
- 如果只为$.extend()指定了一个参数，则意味着参数target被省略。此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。
- 如果多个对象具有相同的属性，则后者会覆盖前者的属性值。
12. clone()
clone() 方法生成被选元素的副本，包含子节点、文本和属性。
<h1>2018-12</h1>
<p>我在学习</p>
<button>复制p元素</button>
<script>
$(document).ready(function() {
$('button').click(function() {
$('body').append($('p').clone())
})
})
</script>
clone.png
-
点击按钮复制p元素的文本内容
clone1.png -
再次点击，复制页面的两行文本内容，依次往下。
clone2.png
13. index()
index() 方法返回指定元素相对于其他指定元素的 index 位置。
这些元素可通过 jQuery 选择器或 DOM 元素来指定。
注意：如果未找到元素，index() 将返回 -1。
<h1>2018-12</h1>
<p>我在学习</p>
<p>呃，想不到了</p>
<script>
$(document).ready(function() {
$('p').click(function() {
alert($(this).index())
})
})
</script>
-
点击页面 p标签的文本，会弹出对话框。
14. ready()
当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。
由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。正如上面的例子中那样。
- ready() 函数规定当 ready 事件发生时执行的代码。
- ready() 函数仅能用于当前文档，因此无需选择器。
有三种语法：
<script>
// 语法 1 ：
$(document).ready(function)
// 语法 2 ：
$().ready(function)
// 语法 3 ：
$(function)
</script>
//注意：ready() 函数不应与 <body onload=""> 一起使用。
以下整理篇：
以上资料来源于网络，个人知识有限，希望有错的地方可以指出，谢谢。
