前后端分离之jQuery入门

jQuery入门

基本概念：jQuery是一个快速，小型且功能丰富的JavaScript库。借助易于使用的API（可在多种浏览器中使用），使HTML文档的遍历和操作，事件处理，动画和Ajax等事情变得更加简单。

个人理解：jQuery是js的一个库，本质就是封装好的js函数，可以和javascript一起使用，使用jQuery可以简化开发

1、加载方式：

传统的dom编程的方式
	<script>
		window.onload=function(){
		alert("页面加载成功");
		}
	</script>

jquery 的方式
	<script src="lib/jquery-1.8.0.js"></script>
	<script>
		$(function(){// '$' 可以换成 'jQuery'
			alert("页面加载成功,jquery");
		});
	</script>

二者的区别：
1) window.onload 的方式,在页面完全加载成功(比如图片,框架集中的网页等)以后触发，而jquery的 $() 事件,是在页加载完以后就触发,不用等图片等相关资源加载完，也就是说,jquery的 $() 事件比较早。
2) window.onload,不可以迭加, 如果有多个,最后只会执行最后一个,而jquery的可以迭加

2、jquery中的遍历

1)$.map(array, fn(value,index){})array 是一个数组, fn 是一个函数 $.map 的作用就是对数组 array中的每个元素,调用 fn这个函数进行处理, 处理完以后,会返回一个新的数组
2)$.each(array, fn(index,value){})array 是一个数组, fn 是一个函数 $.each 的作用就是对数组 array 中的每个元素,调用 fn这个函数进行处理, 没有返回值

3、jquery对象和dom对象

dom 对象

就是传统的javascript中通过 dom api得到的对象

//获取dom对象 var dom1 = document.getElementById("h11"); console.log(dom1.innerText);

jquery 对象

通过jquery选择器,或用jquery包装普通的dom对象得到

//获取jquery对象 var jquery1 = $("#h11"); console.log(jquery1.text());

二者之间的转换：
1）dom对象转成jquery对象
	//dom对象转成jquery对象
	var jquery2 = $(dom1);
	console.log(jquery2.html());
2）query对象,变成dom对象
	//query对象,变成dom对象
	var dom2 = jquery1.get(0);
	//或者var dom2 = jquery1[0];
	console.log(dom2.innerHTML);

附: 关于this
    JavaScript this 关键词指的是它所属的对象。
      在方法中，this 指的是所有者对象。
      单独的情况下，this 指的是全局对象。
      在函数中，this 指的是全局对象。
      在函数中，严格模式下，this 是 undefined。
      在事件中，this 指的是接收事件的元素。

4、jquery 选择器

基本 层级 定位 内容 可见性 属性 子元素 表单 表单属性

(1)基本
  1. #id
  2. element
  3. class
  4. *
  5. selector1,selector12

(2)层级
  1. ancestor descendant 选中ancestor里面的所有 descendant 元素,不管多少层级
  2. parent > child 只选择直接子级
  3. prev + next 匹配的是prev后面的所有 next元素
  4. prev ~ siblings 选中prev的所有兄弟元素

(2)定位
  1. :first			//匹配找到的第一个元素
  2. :last			//匹配找到的第一个元素
  3. :not(选择器)	    //反选(选取不符合某一组选择器的元素)
  4. :odd			    //奇数（下标从0开始算）
  5. :even		    //偶数（下标从0开始算）
  6. :eq 			    //等于（下标从0开始算）
  7. :gt			    //大于（下标从0开始算）
  8. :lt 			    //小于（下标从0开始算）注：:gt和:lt可以一起使用$("tr:gt(0):lt(2)").css("background","gold");  //选中的是第二,三 行
  9. :header  		//匹配如 h1, h2, h3之类的标题元素
  10. :animated		//匹配正在做动画的元素

(4)内容
  1. :contains
		包含某文本元素
  2. :empty
		匹配所有空元素
  3. :has(选择器)
		包含某个子元素
  4. :parent
		匹配含有子元素或者文本的元素, (找做父亲的元素)

(5)可见性
	(1) :hidden
			匹配所有不可见元素 (display:none) ,包括隐含控件 (type = hidden)

	(2) :visible
			和上例相反

(6)属性 7 个
	(1) [attribute=value]  匹配某个属性是某个值的元素
	(2) [attribute!=value] 和上例相反
	(3) [attribute$=value] 选择属性值以value结尾的
	(4) [attribute^=value] 匹配以属性值 以value 开头的,正好和 $相反
	(5) [attribute*=value] 匹配以属性值包含value的
	(6) [selector1][selector2][selectorN] 复合的多条件属性选择器
	(7) [attribute] 匹配含有这个属性的元素

(7)子元素
	(1) :first-child 匹配其父元素下的第一个子元素
	(2) :last-child  匹配其父元素下的最后一个子元素
	(3) :nth-child   匹配其父元素下的第n个子元素（(n=1,2,3,4...)）或奇偶元素
		注：此选择器下标从1开始，上述:even和:odd从0开始）
			:nth-child(even)
			:nth-child(odd)
			:nth-child(3n)
			:nth-child(2)
			:nth-child(3n+1)
			:nth-child(3n+2)
	(4) :only-child  如果某个元素是父元素中唯一的子元素，那将会被匹配 (独生子)

(8)表单 11 个
	(1):input    	匹配所有 input, textarea, select 和 button 元素 请密切注意,它匹配  textarea,select,button
		$(":input")
	(2):checkbox  	匹配所有复选框
		$(":checkbox") = $("input[type=checkbox]")
	(3):button  	匹配所有按钮，但不匹配 input type="submit
		$(":button")
	(4):file		文件选择框
		$(":file")
	(5):image		所有图片
		$(":image")
	(6):radio		所有单选按钮
		$(":radio")
	(7):reset		所有重置按钮
		$(":reset")
	(8):password	所有密码框
		$(":password")
	(9):submit		所有的提交按钮
		$(":submit")
	(10):text		所有文本框
		$(":text")

(9)表单属性 4个
	(1) :enabled 	//选中有enabled属性的元素（enabled表示任何已启用的元素。如果元素可以被激活（例如被选择、单击、输入文本等），或者能够获得焦点，那么它就是启用的。）
	(2) :checked	//选中有checked属性的元素（checked表示在页面加载时应该预先选定 input 元素）
	(3) :disabled	//选中有disabled属性的元素（disabled表示元素不可变、不能聚焦或与表单一同提交
	(4) :selected	//选中有selected属性的元素（selected表示在页面加载时应预先选择一个选项。预先选择的选项将首先显示在下拉列表中）

5、jquery常用方法

（1）节点遍历
      next()        //选择下一个元素
      nextAll()     //选择当元素后的所有元素
      siblings()    //选择所有兄弟元素

（2）jquery的dom节点操作
    1.内部插入元素
        append()	//从后面插入
        prepend()	//从前面插入
        appendTo()	//从后面插入到元素中
        prependTo()	//从前面插入到元素中

			注：append()和appendTo()的区别：a.append(b)是在a中插入b；a.appendTo(b)是a插入到b中去。prepend和prependTo同理

    2.外部插入元素
        before()	//插入到当前元素的前面
        after()		//插入到当前元素的后面
        这两个方法,都是添加的 "兄弟"

    3.移除
        remove()
            从dom中删除所匹配的元素,但这个方法不会把匹配的元素从jquery对象中删除,这样我们将来还可以使用这些对象,但这些元素对应的数据和事件会丢失
        empty()
            清空元素中的子节点
        detach()
            从dom节点中删除匹配元素,但不会把元素从jquery对象中删除,以后还可以用,而且它绑定的数据和事件不会丢失

（3）jquery中的属性操作
      attr(key,value)		//给某个属性传值
      attr(key) 			//取某个属性的值
      attr(properties)	//给某个属性传一组值
      remveAttr(key)		//移除某个属性值

（4）jquery中的css操作
	  .css(k,v)		//一个个的设置css样式
	  .addClass(class名称);		//添加一组样式
	  .removeClass(class名称);	//移除样式
	  .toggleClass(class名称);	//切换样式

	  注：removeClass() 如果传入样式名,则移除样式名对应的样式,如果不传入,则移除所有的 class 样式

（5）query对文本/值的操作
	  //给表单元素的value 的取值或传值
	  val()
	  val(v)

	  //给 div ,span,td,a, li,p 之类的元素取值或传值
	  html()
	  html(v)

	  //给 div ,span,td,a, li,p 之类的元素取值或传值,取值的时候,不取html元素,只取文本
	  text()
	  text(v)

	  注：text(v)、html(v)会将 标签中的'文本和标签' 替换成 v

（6）动态效果
	  show()		显示（可选择的参数 speed，easing，callback）
	  hide()		隐藏（可选择的参数 speed，easing，callback）

	  toggle()	显示/隐藏（可选择的参数 speed，callback，switch）
	  注：show()、hide()、toggle() 沿对角线消失或出现

	  fadeIn()	淡入（可选择的参数 speed，callback）
	  fadeOut()	淡出（可选择的参数 speed，callback）

	  slideUp()	滑动向上隐藏（可选择的参数 speed，callback）
	  slideDown()	滑动向下出现（可选择的参数 speed，callback）

	  传递的参数：
	  speed		显示效果的速度(可以是毫秒值、"slow"、"fast")
	  easing		在动画的不同点上元素的速度("swing"--开头/结尾移动慢，中间移动快、"linear"--匀速移动；默认是"swing")
	  callback	回调 （方法调用之后，要执行的函数）
	  switch		取值true 即 toggle(true) 表示只会显示元素，等同于show()；取值false 即 toggle(false) 表示只会隐藏元素，等同于hide()

牛刀小试：

案例：现在有一个数组,有十条数据 var userList= [{id:10,userName:"admin",password:"123",note:"管理员",photo:"a.jpg"},{....},{}]

要求

1）用jquery把这个数组,构造出一个表格,显示出 id, userName 两列

2）隔行变色

3）鼠标滑过行高亮

4）鼠标滑过人的信息的时候, 在鼠标边上,显示这个人的头象,和其他信息(密码,备注)

本文案例及源代码：

链接：https://pan.baidu.com/s/14Ppk6verYinQBVNXv-cxvg?pwd=5u4e

提取码：5u4e