jQuery入门-1

jquery的引入

一般script标签写在body里的最下面,script的标签是按照顺序先后导入并执行的,在第一个script标签执行完毕之前不会执行第二个script,多个script标签,本质上是将其中的代码拼接在了一起,所以他们处于同一个全局作用域

导入jquery必须写在使用它之前,然后再在下面创建script标签写js代码

<script src="jquery.js"></script>

导入jquery之后,在全局域增加了两个变量,$和jQuery,这两个变量都指向jq函数

为了不污染开发者的全局作用域,jquery只使用了两个全局变量,$和jquery(就是用来调用jq对象的方法的)

可以在script里console.log一下$和jQuery

$函数,参数写为一个选择器的字符串时,用于查找DOM中符合这个选择器的所有元素,返回值是一个类数组(这个类数组称为jq对象,功能非常强大),它是一个容器,其中包含了所有本次查找到的元素

var $title = $(".line");

这句代码是找到html中所有类名包含line的元素,但一般不会把jq对象赋值给变量(但偶尔也会,所以把变量名命名为$符开头,表示接收的是jq对象)

使用$进行查找,即使结果只有一个元素,返回值也是一个jq对象(可以创建多个相同类名的标签console一下)

jqueryDOM属性操作

jq对象有大部分DOM操作方法,其中用于修改元素属性的方法都是针对jq对象中所有元素进行的,例如设置字体为红色,则jq对象中所有元素都设置为了红色.(line是一堆p标签的类名)

 $(".line").css("color","red");

对于获取jq对象中元素的属性的方法，大部分都是获取其中第0个元素的属性

 

jq对象的的.css方法,用于设置或获取元素的样式值

设置样式时,第一个参数是样式名,第二个参数是样式值,设置的样式是行内样式(毕竟jQuery只是封装了js,js添加的样式就是行内样式)

$(".line").css("color","red");

如果要同时设置多个样式,参数还可以写为对象

$(".line").css({
        // 如果对象中 键 名字中有特殊符号,必须加"",
        "font-size":"20px",
        margin:"40px"
    });

.css方法,也可用于获取元素的样式,写一个参数表示 获取 某个样式,参数是要获取的样式名,相比于原生的style属性,style属性只能获取行内样式值,而css获取的样式值是元素实际显示的样式值(优先级最高的样式值).

console.log($(".line").css("color"));

jq对象的.text方法,用于设置或获取元素的内容

写一个参数时,表示设置内容,不写参数时表示获取

// 设置,()中不写参数为获取
$("#title").text("jq设置元素内容");

jq对象的.html方法,也用于设置或获取元素内容,和.text的区别是.html设置的标签会被显示为标签元素,而.text设置的标签会显示为字符串(textContent和innerHTML的区别)

$("#title").html("<i>html方法也可用于设置内容</i>");

jq对象的.addClass方法,用于为元素添加一个class值(同理也可删除一个class)

$(".line").addClass("border");

切换一个class

$(".line").toggleClass("border");

jq对象的hasClass方法,用于判断是否包含某个class值,包含则为true,反之为false

console.log($("#title").hasClass("border"));

jq对象的attr方法,用于设置或获取元素的属性,两个参数表示设置某个属性,写一个表示获取

$(".line").attr("title","鼠标悬停时的提示");
    console.log($(".line").attr("title"));

.prop方法,用于设置没有值的属性,写两个参数用于设置,第一个参数是属性名,第二个参数是布尔值,表示是否有这个属性,true表示添加这个属性,false表示删除这个属性,prop方法写一个参数也是获取这个属性的值(true or false);(这里#btn绑定的是html中的button,disabled属性是能否交互)

$("#btn").prop("disabled","true");

 

$("#field").val("写参数表示设置,不写表示获取");val是value的缩写,通常用于表单元素