学会jQuery：现代Web开发的必备利器

jQuery是一种JavaScript框架,它封装JS常用的功能代码,提供一种更简便的JS设计模式,优化HTML文档操作,事件处理,动画设计和Ajax交互.
核心特性:
1.具有独特链式语法和短小清晰的多功能接口
2.具有高效灵活的CSS选择器,并且可对CSS选择器进行扩展
3.拥有便捷的插件扩展机制和丰富的插件
4.兼容各种主流浏览器

使用前提:jQuery使用前需要导包(与JS类似,注意先导后用否则会报错):
通过<script>标签属性scr="包路径"或者<link src="包路径" />

要点:
1.选择器:
1.元素选择器:
$("p")/$(“a”)/$(“div”)//选择各类标签, $(“”)//选择所有元素, $(this)//选择当前HTML元素
2.id选择器:
$(“#a1”)//选择id名为a1的元素
3.类选择器:
$(“.a1”)//选择类名为a1的元素
4.属性选择器:
$(“[name=‘name’]”)//选择name属性值为name的元素
$(“[href]”)//选择带有href属性的元素
$(“a[target=‘_black’]”)//选择target属性值为’_black’的a元素*

2.jQuery操作

• 1.操作内容:
  (1)html()方法:
  选中元素.html()//返回选中元素的内容(包括元素其中的html标签)
  选中元素.html(目标内容)//修改选中元素的内容 (会解析其中的html标签)
  (2)text()方法:
  选中元素.text()//返回选中元素的内容(不包括其中的html标签)
  选中元素.text(目标内容)//修改选中元素的内容 (不会解析其中的html标签)
  <重点>:

  解析html/不解析html元素:
  	用html()方法修改元素内容时可以直接带上html标签,该方法会在被修改元素中放置html标签及其中内容
  	而用text()方法修改元素内容时不能带上html标签,该方法直接修改html标签内的内容,而不解析目标内容的html标签,若带上html标签则会将原标签内内容直接变为输入的整个目标内容,包括html标签
  

  实例解释:

          用($("#d").html("<p>新段落</p>"));修改后页面显示为    新段落
  	    用($("#d").text("<p>新段落2</p>"));修改后页面显示为    <p>新段落2</p>
  

  (3)val()方法[用于操作表单元素]:
  	选中元素.val()//返回表单元素的value值,非表单元素会返回<empty string>
  	选中元素.val(目标内容)//修改选中表单元素的内容,非表单元素也可修改,value值会改变但页面不会有任何变化,修改后val()可以返回修改成的值
   常见表单元素:
   		  1.文本框(type=text)
  	      2.按钮(type=button)
  	      3.单选框(type=radio)
  	      4.复选框(type=chackbox)
  	      5.下拉列表(type=select)
  	      6.文本域(type=textarea)
  

• 2.添加新内容方法:
  (1)append():

  选中元素.append("追加文本")//在选中元素结尾插入内容
  

     (2)prepend():
  

  选中元素.prepend("追加文本")//在选中元素开头插入内容
  

  	(3)after():
  

  选中元素.after("添加文本")//在选中元素之后添加内容
  

  	(4)before():
  

  选中元素.before("添加文本")//在选中元素之前添加内容
  

  <重点>:
  区别:
  append()/prepend()是在所选元素内容前后插入内容
  after()/before()是在所选元素内容外部插入元素(即相当于在所选元素前面或后面新建一个元素存放插入内容)

• 3.删除元素和内容:

  	(1)remove():
  

  选中元素.remove()//直接删除选中元素及其子元素
  

     	 (2)empty():
  

  选中元素.empty()//删除选中元素的子元素,选中元素保留
  

  <重点>:
  区别:
  remove()直接删除整个选中元素,删除后无法继续在该元素内容中添加内容
  empty()只删除选中元素内容(子元素),删除后仍可以继续在该空元素中添加内容

3.jQuery操作CSS方法

1.jQuery使用CSS修改元素样式
	(1)返回属性值:

	选中元素.css("属性名")//返回选中元素某个属性的属性值

	(2)修改属性值:

	选中元素:css("属性名","属性值")//修改选中元素的某个属性

	(3)修改多个属性值:

	选中元素.css({"属性名1":"属性值1","属性名2":"属性值2".....})

2.设置类的样式方法
	(1)添加类(添加class):
		*注意:这里的添加不覆盖原有class,只是追加一个class*

	选中元素.addClass("class名")//为选中元素添加一个class

	(2)删除类(删除class):

	选中元素.removeClass("class名")//为选中元素删除一个class

	(3)切换类(添加或删除class):

	选中元素.toggleClass("class名")//若选中元素有这个class,则删除这个class

	*若选中元素没有这个class,则添加这个class*
	


3.隐藏显示效果:
	(1)隐藏

	选中元素.hide([speed],[easing],[fn])//按照要求隐藏选中元素

	(2)显示

	选中元素.show([speed],[easing],[fn])//按照要求显示选中元素

	(3)切换

	选中元素.toggle([speed],[easing],[fn])//若选中元素已显示,则按照要求隐藏选中元素;

	    *若选中元素已隐藏,则按照要求显示选中元素*