jQuery篇（write Less, Do More）

jQuery

快速、简洁的JavaScript框架，设计宗旨：write Less, Do More。
作用：简化原生js的语法，解决浏览器兼容性问题。

引入jQuery
可以直接引入在线地址，也可以在jQuery官方网站上下载，然后使用src属性引入：

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

基础语法：$(selector).action()

• $：jQuery对象
• selector：选择器，用于定位HTML元素
• action()：方法，用于对元素进行操作

文档就绪函数

//HTML文档加载完成后，再开始执行该方法里面的函数
$(document).ready(function(){
    //代码段
})

jQuery选择器

jQuery选择器相比原生JavaScript功能更加强大

元素选择器

• $('#id')：id选择器，类似document.getElementById("#id")
• $('.class')：class选择器，类似document.getElementsByClassName('.class')
• $('tag')：tag选择器，类似document.getElementsByTagName('tag')
• $('tag.class')：父子选择器

属性选择器

• $("[attr]")：选取所有带有attr属性的元素
• $("[attr='value']")选取所有带有attr属性并值为value的元素
• $("[attr$='value']")选取所有带有attr属性并以value结尾的元素

jQuery事件

事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。

常用事件：
ready()：文档就绪事件，HTML加载完成后调用
bind()：为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数
focus()：当元素获得焦点的时候调用
blur()：当元素失去焦点的时候调用
change()：当元素的值发生改变时调用（仅仅适用于form表单中的text、field、select、textarea）
click()：当点击元素的时候调用
dblclick()：当双击元素的时候调用
keydown()：当键盘按钮被按下时调用
keyup()：当键盘按钮被松开时调用
keypress()：当键盘按钮被按下时调用（必须插入字符才能被调用）
mousedown()：当鼠标指针移动到元素上方，并按下鼠标按键时调用
mouseup()：当在元素上放松鼠标按钮时调用，常与mousedown()一起使用
mousemove()：当鼠标指针在指定元素上移动时调用
submit()：当提交表单的时候调用

jQuery是为处理HTML事件而特别设计的，当遵循以下原则时，代码会更容易维护：

• 把所有jQuery代码置于事件处理函数中
• 把所有事件处理函数置于文档就绪事件处理器中
• 把jQuery代码置于单独的.js文件中

关于DOM

相比原生JavaScript，jQuery拥有更为强大的可操作HTML元素和属性的方法。

查找HTML元素

• $("#id")
• $(".class")
• $("tag")

对元素的操作

• append()：在被选元素的结尾插入内容
• prepend()：在被选元素的开头插入内容
• after()：在被选元素之后插入内容
• before()：在被选元素之前插入内容
• remove()：删除被选元素（及其子元素）
• empty()：从被选元素中删除子元素

对属性的操作

• attr()：设置或返回所选元素的属性和值
• removeAttr()：从所选元素中移除指定的属性
• addClass()：为所选元素添加指定的类名
• removeClass()：为所选元素删除全部或指定的类
• hasClass()：判断所选元素是否拥有指定的类

对文本的操作

• text()：设置或返回所选元素的文本内容
• html()：设置或返回所选元素的内容（包括HTML标记）
• val()：设置或返回表单字段的值

对CSS的操作

• css()：设置或返回所选元素的样式属性
• height()：设置或返回所选元素的高度
• width()：设置或返回所选元素的宽度