jQuery基础 jQueryDOM操作

---

jQuery基础

jQuery 经典的前端开发工具包 提供了DOM操作 监听事件,做动画…等功能
使用jQuery之前,先引用后使用

导入jQuery之后 全局作用域下,多出了两个变量

$ 和 jQuery 这两个变量指同一个对象

为了尽可能减少污染js中的全局作用域,jquery将所有的功能函数都封装到了一个对象中,这个对象叫做jquery对象,一般情况下不会再找变量接受返回值,而是直接通过jquery对象操作DOM,如果非要接受,变量名前加上$符号,表示这是一个jquery对象

// $ 就是一个函数,可以调用,当参数传递的是一个选择器字符串时,
返回的就是一个jquery对象,它是一个容器,类似于数组,存放符合选择器的标签元素
		var $div = $("#box")
		console.log($div)

---

---

jQUeryDOM操作

jq对象.text() 用于设置或获取标签元素的文本内容

$("#box").text("我是通过jq对象.text函数设置的文本内容")

hmtl函数相当于js中的innerHTML属性

$("#box").html("<strong>我是html添加的内容</strong>")

jq提供了处理class的函数

addClass 添加class值
$(".line").addClass("item")
removerClass 删除class值
$(".line").removeClass("item")
toggleClass 切换class值 有则删除无责添加
$("#box").toggleClass("line")

style属性 操作css样式
css()函数 操作css样式

如果传递两个参数(设置样式),第一个参数是样式名,第二个参数就是样式值
	$("#box").css("font-size", "20px")

 css函数中传递一个对象,对象中以key:value形式添加css样式
 $("#box").css({
			// 有特殊字符也可以使用字符串表示
			"background-color":"red",
			border:"2px black solid",
			// 如果样式中有-分隔符,而且不想使用字符串形式,可以将-去掉,按照小驼峰命名法规则编写css样式名
			paddingLeft: "20px"
		})

操作普通属性 img的src 跟a标签的href

attr() attribute简写
attr中传递两个参数,设置属性值,第一个参数是属性名,第二个参数是属性值
$("#un").attr("placeholder", "username")
$("#a").attr("href","http://www.baidu.con")

val()函数 获取表单元素中的value属性值
		console.log($("#un").attr("value"))
		
click() 单击事件
		$("#box").click(function(){
			console.log("我被点了~")
		})

---