JQuery基础

一、JQuery基础

概念：是JavaScript的框架，简化JS开发

div1
div2

js文件

// 封装方法,根据ID来获取对象
function get(id){
var obj = document.getElementById(id);
return obj;
}

会弹出相应的信息：

javascript框架：本质上是一些js文件，封装了js的原生代码

二、JQuery快速入门

1、需要下载JQuery（官网下载）

2、导入JQuery的js文件（注意：导入min.js文件，一般新建一个JS文件，然后将这个下载的文件放进去）

3、使用（新建一个网页）

注意标签

div1

div2

用IDEA中右上角浏览器打开：

 

三、JQuery对象和JS对象的转换

1.JQuery操作时更加方便

2.两者设置的方法是不通用的

3.需要两者的转换

JQuery--js:JQuery对象[索引]  或者  JQuery.get(索引)

比如JQuery对象用JS对象方式转换标签

$divs[0].innerHTML="DDD";

$divs.get(1).innerHTML = "DDD";

js--JQuery: $(JS)对象

比如js对象用jQuery对象方式转换标签

$(divs[i]).html("ccc");

div1..
div2..

测试结果：

   JQuery对象和JS对象的转化：

div1..
div2..

四、选择器

1、选择器的作用：可以筛选具有相似特征的元素；

2、基本语法

时间注册：

div1...
div2..

点击“点我”

3、入口函数：

$(function(){
$("#b1").click(function () {
alert("abc");
});
});

或者：

window.onload = function(){
// 1、获取b1按钮
$("#b1").click(function () {
alert("abc");
})
}

两种方法的区别：

window.onload 只能定义一次，window.onload = fun1 与 window.οnlοad=fun2 中，同时运行，fun2的值一定会把fun1的值覆盖

但是function()可以定义多次

4、样式控制

div1设置背景色：

$(function(){
$("#div1").css("background-color","green");
});

五、选择器的分类

5.1基本选择器

标签选择器（元素选择器）

语法：$("html标签名") 获取所有匹配标签名称的元素

id选择器

语法：$("#id的属性值") 获得与指定id属性相匹配的元素

类选择器

语法：$(".class的属性值") 获得与指定的class属性值匹配的元素

并集选择器

语法：$("选择器1，选择器2....")获取多个选择器选中的所有元素

例子：

$(function(){
// 给one的元素背景设为黄色
$("#b1").click(function(){
$("#one").css("backgroundColor","yellow");
});
// div所有的元素背景色改为粉色
$("b2").click(function(){
$("div").css("background-color","pink")
});
});

5.2层级选择器

后代选择器

语法：$("A B ") 选择A元素内部所有的B元素（A的范围比B大）

子选择器

语法：$("A > B")选择A元素内部所有的B子元素

例子:

// 将内所有的
的背景色设置粉色
$(function(){
$("#b1").click(function(){
$("body div").css("backgroundColor","pink")
});
});

或者

$(function(){
$("#b1").click(function(){
$("body>div").css("backgroundColor","pink")
});
});

5.3属性选择器

属性名称选择器

语法：$("A[属性名]") 包含指定属性的选择器

属性选择器

语法：$("A[属性名='值']")包含指定属性等于指定器的选择器

复合属性选择器

语法：$("A[属性值='值'][]....")包含多个属性条件的选择器

例：

含有属性title的div元素，背景设为粉色

$(function(){
$("#b1").click(function(){
$("div[title]").css("backgroundColor","pink")
})
});

属性title值等于test的div元素，背景设为粉色

$(function(){
$("#b2").click(function(){
$("div[title='test']").css("backgroundColor","pink")
})
});

属性title值不等于test的div元素（没有属性title的也会被选中）

$(function(){
$("#b3").click(function(){
$("div[title!='test']").css("backgroundColor","pink")
})
});

属性为title，以te开始的div元素

$(function(){
$("#b4").click(function(){
$("div[title^='te']").css("backgroundColor","pink")
})
});

属性为title，以est结束的div元素

$(function(){
$("#b5").click(function(){
$("div[title$='est']").css("backgroundColor","pink")
})
});

属性为title，含有es的div元素

$(function(){
$("#b6").click(function(){
$("div[title*='es']").css("backgroundColor","pink")
})
});

选取有属性id的元素，然后在结果中选取属性title值含有“es”的div元素

$(function(){

$("#b7").click(function(){

$("div[id][title*='es']").css("backgroundColor","pink")

})
});

5.4过滤选择器

首元素选择器

语法：first

尾元素选择器

语法：last

例：

改变第一个/最后一个div元素的背景色

$(function(){
$("#b1").click(function(){
$("div：first").css("backgroundColor","pink")
})
});
$(function(){
$("#b2").click(function(){
$("div：last").css("backgroundColor","pink")
})
});

非元素选择器

语法：not(selector) 不包括指定内容的元素

例：

改变class不为one的所有div元素

$(function(){
$("#b3").click(function(){
$("div:not(.one)").css("backgroundColor","pink")
})
});

偶数选择器（从0开始计数）

语法：EVEN

奇数选择器

语法：ODD

$(function(){
$("#b4").click(function(){
$("div:even").css("backgroundColor","pink")
})
});
$(function(){
$("#b5").click(function(){
$("div:odd").css("backgroundColor","pink")
})
});

等于索引选择器

语法：eq(index)

大于索引选择器

语法：gt(index)

小于索引选择器

语法：lt(index)

例：改变索引值小于3的div元素的背景色

$(function(){
$("#b6").click(function(){
$("div:lt(3)").css("backgroundColor","pink")
})
});

标题选择器

语法：header(h1-h6)

5.5表单过滤选择器

可用元素选择器

语法：enabled

利用JQuery对象的val方法改变表内可用元素的值

$(function(){
$("#b1").click(function(){
$("input[type='text']:enabled").val("abc");
});

});

不可用元素选择器

语法：disabled

选中选择器

语法：checked 获得单选/复选框中的元素

例子：利用JQuery对象的length属性获取复选框选中的个数

$(function(){
$("#b2").click(function(){
alert($("input[type='checkbox']:checked").length);
});
});

选中选择器

语法：selected 获得下拉框选中的元素

$(function(){
$("#b3").click(function(){
alert($("#job:selected").length);
});
});

六、DOM操作

1.内容操作

标题标签

html():获取/设置元素的标签体内容

内容-----获取到内容

text()：获取/ 设置元素的纯文本内容

内容-----获取到  内容

val(): 获取/ 设置元素的value属性值

2.属性操作

通用属性操作

attr() :获取/ 设置元素的属性

removeAttr():删除属性

prop():获取/设置元素的属性

removeProp():删除属性

例子：

 北京 
天津

注意:attr和prop的区别？

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

对class属性操作

addClass():添加

removeClass():删除

toggleClass()：切换class属性

比如：toggleClass("one")：判断如果元素对象上存在class=“one”,则将属性one删除

例：

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后面，兄弟关系

before()

1.before（2）：将2添加到1前面，兄弟关系

insertAfter()

1.insertAfter(2)：将2添加到1后面，兄弟关系

insertBefore()

1.insertBefore(2)：将2添加到1前面，兄弟关系

remove（）

对象.remove()

empty（）

对象.empty()

例：

 北京 
天津
重庆



反恐
星际


hello

get！