JQuery基础

JQuery是JavaScript框架，简化js开发。

JQuery和JS

jquery和js区别与联系

// js获取元素
var divs1 = document.getElementsByTagName("div");
// 修改元素内容
for (var i=0; i<divs.length; i++){
    divs1[i].innerHTML = "xxx";
}

// jquery获取元素
var $divs2 = $("div");
// jquery修改元素内容
$divs2.html("xxx");

// js对象转化为jquery对象
div3 = $(divs[0])
// jquery对象转化为js对象
$div2[0].innerHTML("xxx");

入口函数

<script>
// jquery入口函数：DOM文档加载完成之后执行该函数
$(function () {

});
// js写法
// window.onload = function(){}
</script>

jquery入口函数和js区别：

• jquery可以定义多次，js的window.onload只能写一次；

事件

<input type="button" value="单击我" id="b1">
<script>
// jquery单击事件
$("#b1").click(function(){
    alert("abc");
});
// js单击事件
document.getElementById("#b1").onclick = function () {
    alert("hello");
}
</script>

样式控制

$("div1").css("backgroundColor", "red");
document.getElementById("div1").style.backgroundColor = "red";

选择器

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

基本选择器

标签选择器：$("html标签")

id选择器：$("#id的值")

类选择器：$(".class的值")

多个选择器：$("选择器1,选择器2,,,")

层级选择器

后代选择器：$("标签1 标签2") 标签1的所有后代所有标签2都会被选中

子选择器：$("标签1 > 标签2") 标签1的子元素标签2才会被选中

属性选择器

属性名称选择器：$("标签[属性名]")

属性选择器：$("标签[属性名='值']")

多个属性选择器：$("标签[属性名='值'] [属性名='值'] ...")

不等于：$("标签[属性名!='值']")

<div id="one" title="test">
  这是一个div，我是内容。
</div>
<script>
	$("div[title='test']").css("backgroundColor", "red");
</script>

过滤选择器

首元素选择器：$("标签:first") 选择第一个标签

尾元素选择器：$("标签:last")

非元素选择器：$("标签:not(内容)") 选择指定标签，并且不是指定内容的元素

偶数选择器：$("标签:event") 选择指定，并且索引为偶数的标签

奇数选择器：$("标签:odd")

等于索引选择器：$("标签:eq(index)")

大于索引选择器：$("标签:gt(index)")

小于索引选择器：$("标签:lt(index)")

标题选择器：$(":header") 选择所有标题h1-h6

表单过滤选择器

可用元素选择器：$("标签:enabled")

不可用元素选择器：$("标签:disabled")

选中选择器：$("标签:checked") 获得单选/复选框中选中的元素

选中选择器：$("标签:selected") 获得下拉列表中选中的元素

// 可用元素选择器
$("input[type='text']:enabled").val("aaa");
// 选中元素选择器(复选框)
alert($("input[type='checkbox']:checked").length);

DOM操作

内容操作

都是方法，有三个：

1. html() 获取、设置元素内容
2. text() 获取、设置元素的纯文本内容
3. val() 获取、设置元素的value属性值

属性操作

通用属性操作：

• attr()：获取、设置元素的属性
• removeAttr()
• prop()：获取、设置元素的属性
• removeProp()

attr和prop区别：

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

var name = $("#bj").attr("name");
$("#bj").attr("name", "北京");

对class属性操作：

• addClass()：添加class
• removeClass()：删除class
• toggleClass("one")：如果存在class="one"就删除，如果不存在就添加

$("#bg").addClass("mycolor");

CRUD操作

（这里的对象就是标签/元素）

添加

• 对象1.append(对象2)：将对象2添加到对象1末尾；
• 对象1.appendTo(对象2)：将对象1添加到对象2末尾；
• 对象1.prepend(对象2)：将对象2添加到对象1开头；
• 对象1.prependTo对象2)：将对象1添加到对象2开头；
• 对象1.after(对象2)：将对象2添加到对象1后面，是兄弟；
• 对象1.before(对象2)：将对象2添加到对象1前面，是兄弟；
• 对象1.insertAfter(对象2)：将对象2添加到对象1后面，是兄弟；
• 对象1.insertBefore(对象2)：将对象2添加到对象1前面，是兄弟；

删除

• 对象.remove()：将对象删除；
• 对象.empty()：将对象后代清空，但保留当前元素；

$("#city1").after($("#city2"));
$("#city1").remove();