JQuery前端开发实战笔记

原2021/10/9所写

基本选择器

一听名称就知道是最基础的选择器，所以要好好学，这里面主要有哪些内容呢
它的标准解释是基于元素的id,css样式类，元素名称等使用基于CSS的选择器机制查找页面元素。


那么这里的选择器就主要是：
元素名称，id，css样式类。这里还要加一个组合选择器,多个选择器进行组合，之间用逗号分隔，都写在一个引号中。

层次选择器

通过DOM元素间的层次关系获取页面元素
这其中包括后代选择器 空格
选择当前祖先下面的所有子元素,它的范围一般比父子选择器大，富子选择器选择的相当是直接子元素，而祖先选择器匹配的是所有的子元素。
$("#srv li").css('color','red')
父子选择器 >
匹配当前父元素下的所有子元素
$("#srv2>li").css('color','red')
相邻选择器 +
匹配指定元素后面的元素
$("#srv2+li").css('color','red')
平级选择器 ~
$("#srv2~li").css('color','red')

过滤选择器

根据某类过滤规则进行元素的匹配
这里过滤选择器的种类最多，它的形式类似于CSS选择器中的伪类选择器，以冒号开头，冒号前是元素，冒号后是过滤的规则。
大致按照过滤规则的种类可以分为
基本，内容，可见性，属性，子元素，表单属性过滤选择器。

表单选择器

可以在页面快速定位某类表单对象
表单选择器规则列表大概有10种，他们的效果都是可以匹配当前文档或者是某一个表单内部的所有表格元素。
选择器的形式是冒号元素名
如下：
:input这个比较特殊，它可以匹配所有input,textarea,select和button元素。
还有这些元素也可以作为表单过滤规则：text,password,radio,checkbox,submit,image,rest,button,file.

修改元素属性

使用的是.attr(‘’)括号内填写的是属性的名称。还可以填写属性的值，这样就可以达到修改元素属性的目的了

修改元素内容

text(),html(),val()分别表示设置或返回所选元素的文本内容，设置或返回所选元素的内容(包括HTML标记)，设置或返回表单字段的值。设置值的话就把需要设置的值写在这些函数括号中即可

动态创建内容

使用append(),prepend(),after(),before()。分别表示在被选元素的结尾插入内容，在被选元素的开头插入内容，在被选元素之后插入内容，在被选元素之前插入内容。

动态插入节点

append(),prepend(),after(),before()；再加上个appendTo,prependTo和insertAfter()和insertBefore()

动态删除节点

remove()和empty()方法

什么是事件

界面发生了变化，或用户对界面进行某种操作。

有哪些事件

事件就有太多了，比如：鼠标作用的事件，键盘，文档，表单等

事件的作用是什么

更好的实现人机交互，提高人们的使用效果。

页面初始化事件

$().ready(function)或者
$(document).ready(function)

绑定事件

$(selector).on(event,data,function)

event参数必选，可以是所有的JavaScript对象，可选的data参数作为event.data属性值传递给事件对象的额外数据对象
function必选参数，是用来绑定的处理函数

移除事件

$(selector).off(event,function)

切换事件

$(selector).hover([over,]out)
这方法不太常用用来模拟鼠标悬停和鼠标移出的事件切换。

表单中的事件

表单元素焦点的获取：焦点也就是表单中刚开始的竖线|。
使用.focus(function)
添加焦点和失去焦点使用addClass和removeClass。

文本域的高度变化

表单的验证

AJAX是什么

无需网页重新加载就可以达到页面数据加载的目的,缘由是浏览器与服务器之间建立了一条通信。

用js写的AJAX与JQuery写的AJAX的区别

js编写的很长，还需自己编写回调函数，当然回调函数有新需求也需要自己编写，但JQuery编写的就很短。

function sendAjax(){
$.get('data.txt',function(data){
alter(data);
});
}