jQuery的入门
一、引入jquery文件
二、jQuery的$函数
1.$()函数主要是用于获取元素,并将元素进行封装,使其成为一个jquery对象。
2.只要是$函数获取的元素都是jquery对象,只有jquery对象才可以调用jquery的函数库。
3.$函数的底层原理:通过判断你传入的参数来区分元素,并获取相应元素进行封装。
三、JS常见函数
1.变量处理函数
str.indexOf("#"):返回"#"在str中的位置下标。
str.substr(1):截取从下标为1开始,直到最后的整段字符串,并返回。
2.获取元素中的值
$('#input').value:获取输入框中的值。
$('#div').innerText:获取div中的值。
四、JS常见函数
1.attr():改变标签中的属性的值或者获取该元素属性值。
a)$("#img").attr("src","img/2.jpg"):将src的属性值改为img/2.jpg。
b)$("#img").attr("src"):获取src属性的值
2.text():改变html元素的文本内容,只能添加字符串
a)$("#div").text("<p>改变后的内容</p>"):将div中的值改变为“<p>改变后的内容</p>”。
3.html():改变html元素的文本内容,可以添加html标签
a)$("#div").text("<p>改变后的内容</p>"):将div中的值改变为“改变后的内容”。
4.val():改变input元素的文本内容
a)$("#input").val("改变后的内容"):将div中的值改变为“改变后的内容”。
5.addClass():向被选元素添加一个或多个类
a)$('#div').addClass('font-yellow font-red'):给div添加font-yellow和font-red两个类。
6.removeClass():从被选元素删除一个或多个类
a)$('#div').removeClass('font-yellow font-red'):从div删除font-yellow和font-red两个类。
7.toggleClass():对被选元素进行添加/删除类的切换操作
a)$('#div').toggleClass('font-red'):从div删除font-red样式和添加样式类之间相互切换。
8.csss():对被选元素进行样式的改变或获取
a)$('#div').css("color","green"):将div 的color值改为green。
b)$('#div').css("color"):获取div 的color值。
9.prepend():在被选元素之前插入内容。
10.append():在被选元素之后插入内容。
11.before():在被选元素之前插入内容。
12.after():在被选元素之后插入内容。
两者的区别:
append/prepend 是在选择元素内部嵌入。
after/before 是在元素外面追加。
13.remove():删除被选元素(及其子元素)或者删除指定的同级元素。
14.empty():从被选元素中删除子元素.