1 jQuery 的属性操作
1.1 html()
- html() 它可以设置和获取起始标签和结束标签中的内容。 跟 dom 属性 innerHTML 一样。
??①当该方法用于返回内容时，则返回第一个匹配元素的内容。语法：$(selector).html()
??② 当该方法用于设置内容时，则重写所有匹配元素的内容。语法：$(selector).html(content)
??提示：如只需设置或返回被选元素的文本内容，请使用 text() 方法。
??例：改变所有 <p> 元素的内容
$("button").click(function(){
$("<p>").html("啦啦啦")
})
1.2 text()
- text() 它可以设置和获取起始标签和结束标签中的文本。 跟 dom 属性 innerText 一样。
??①当该方法用于返回内容时，则返回所有匹配元素的文本内容（会删除 HTML 标记）。语法：$(selector).text()
??②当该方法用于设置内容时，则重写所有匹配元素的内容。语法：$(selector).text(content)
??提示：如需设置或返回被选元素的 innerHTML（文本+ HTML 标记），请使用 html() 方法。
??例：设置所有 <p> 元素的文本内容
$("button").click(function(){
$("p").text("Hello world!");
});
1.3 val()
- val() 它可以设置和获取表单项 的 value 属性值。 跟 dom 属性 value 一样
??①当该方法用于返回内容时，该方法返回第一个匹配元素的 value 属性的值。语法：$(selector).val()
??②当该方法用于设置内容时，该方法设置所有匹配元素的 value 属性的值。语法：$(selector).val(content)
??提示：val() 方法通常与 HTML 表单元素一起使用。
??例：设置 <input> 字段的值
$("button").click(function(){
$("input:text").val("xxxxx");
});
1.4 attr()
- attr() 可以设置或返回被选元素的属性和值。
??①当该方法用于返回内容时，则返回第一个匹配元素的值。语法：$(selector).attr(attribute)
??②当该方法用于设置内容时，则为匹配元素设置一个或多个属性/值对。语法:
??设置单个属性$(selector).attr(attribute,value)
??设置多个属性和值$(selector).attr({attribute:value, attribute:value,...})
??提示：不推荐操作 checked、readOnly、selected、disabled 等等
??例：设置图像的 width 属性：
$("button").click(function(){
$("img").attr("width","500");
})
1.5 prop()
- prop() 设置或返回被选元素的属性和值。
??①当该方法用于返回属性值时，则返回第一个匹配元素的值。语法：$(selector).prop(property)
??②当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。语法:
??设置单个属性$(selector).prop(property,value)
??设置多个属性和值$(selector).prop({property:value, property:value,...})
提示：可以设置和获取属性的值,只推荐操作checked、readOnly、selected、disabled 等等
提示：如需检索 HTML 属性，请使用 attr() 方法代替。
提示：如需移除属性，请使用 removeProp() 方法。
??例：添加并移除名为 “color” 的属性：
$("button").click(function(){
var $x = $("div");
$x.prop("color","FF0000");
$x.append("The color 属性： " + $x.prop("color"));
$x.removeProp("color");
});
2 DOM 的增删改
2.1 内部插入
2.1.1 appendTo()
??appendTo() 方法在被选元素的结尾插入 HTML 元素。
??提示：如需在被选元素的开头插入 HTML 元素，请使用 prependTo() 方法。
??语法：$(content).appendTo(selector)把 content插入到 selector 所有子元素末尾，成为最后一个子元素
例：在每个 <p> 元素的结尾插入 <span> 元素
$("button").click(function(){
$("<span>Hello World!</span>").appendTo("p");
});
2.1.2 prependTo()
??prependTo() 方法在被选元素的开头插入 HTML 元素。
??提示：如需在被选元素的结尾插入 HTML 元素，请使用 appendTo() 方法。
??语法：$(content).prependTo(selector)把 content插入到 selector 所有子元素前面，成为第一个子元素
例：在每个 <p> 元素的开头插入 <span> 元素
$("button").click(function(){
$("<span>Hello World!</span>").prependTo("p");
});
2.2 外部插入
2.2.1 insertAfter()
??insertAfter() 方法在被选元素后插入 HTML 元素。
??提示：如需在被选元素前插入 HTML 元素，请使用 insertBefore() 方法。
??语法：(content).insertAfter(selector)
2.2.2 insertBefore()
??insertBefore() 方法在被选元素前插入 HTML 元素。
??提示：如需在被选元素后插入 HTML 元素，请使用 insertAfter() 方法。
??语法：$(content).insertBefore(selector)
2.3 替换
2.3.1 replaceWith()
??replaceWith() 方法把被选元素替换为新的内容。
??语法：$(content).replaceWith(selector)
例：把第一个 <p> 元素替换为新的文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p:first").replaceWith("Hello world!");
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>使用新文本替换第一个P元素</button>
</body>
</html>
2.3.2 replaceAll()
??replaceAll() 方法把被选的所有元素替换为新的 HTML 元素。
??语法：$(content).replaceAll(selector)
2.4 删除
2.4.1 remove()
??remove() 方法移除被选元素，包括所有的文本和子节点。
??该方法也会移除被选元素的数据和事件。
??提示：如需移除元素，但保留数据和事件，请使用 detach() 方法代替。
??提示：如只需从被选元素移除内容，请使用 empty() 方法。
??语法：$(selector).remove()
2.4.2 empty()
??empty() 方法移除被选元素的所有子节点和内容。
??注意：该方法不会移除元素本身，或它的属性。
??提示：如需移除元素，但保留数据和事件，请使用 detach() 方法。
??提示：如需移除元素及它的数据和事件，请使用 remove() 方法。
??语法：$(selector).empty()
3 CSS 样式操作
3.1 addClass() 添加样式
css样式如下：
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
例：向不同的元素添加 class 属性。
$(function(){
$("button").click(function(){
$("div").addClass("important blue");
$("p").addClass("important blue");
$("div,p").addClass("important blue");
});
});
3.2 removeClass() 删除样式
例：在不同的元素中删除指定的 class 属性
$(function(){
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
});
3.3 toggleClass() 有就删除，没有就添加样式。
例:对被选元素进行添加/删除类的切换操作：
$(function(){
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
})
4 jQuery 动画
基本动画
- show() 将隐藏的元素显示 ；
- hide() 将可见的元素隐藏；
- toggle() 可见就隐藏，不可见就显示。
以上动画方法都可以添加参数。
1、第一个参数是动画 执行的时长，以毫秒为单位
2、第二个参数是动画的回调函数 (动画完成后自动调用的函数)
淡入淡出动画
- fadeIn() 淡入（慢慢可见）
- fadeOut() 淡出（慢慢消失）
- fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。0 透明，1 完成可见，0.5 半透明
- fadeToggle() 淡入/淡出 切换
5 jQuery 事件操作
5.1 什么是事件？
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
例如：
5.2 $( function(){} ); 和window.onload = function(){}的区别？
触发时间：
1、jQuery 的页面加载完成之后是浏览器的内核解析完页面的标签创建好 DOM 对象之后就会马上执行。
2、原生 js 的页面加载完成之后，除了要等浏览器内核解析完标签创建好 DOM 对象，还要等标签显示时需要的内容加载完成。
触发的顺序
1、jQuery 页面加载完成之后先执行
2、原生 js 的页面加载完成之后后执行
执行次数
1、原生 js 的页面加载完成之后，只会执行最后一次的赋值函数。
2、jQuery 的页面加载完成之后是全部把注册的 function 函数，依次顺序全部执行。
5.3 常用的 jQuery 事件方法
- click() 它可以绑定单击事件，以及触发单击事件
- mouseover() 鼠标移入事件
- mouseout() 鼠标移出事件
- bind() 可以给元素一次性绑定一个或多个事件。
- one() 使用上跟 bind 一样。但是 one 方法绑定的事件只会响应一次。
- unbind() 跟 bind 方法相反的操作，解除事件的绑定
- live() 也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出 来的也有效
|