本帖最后由 924864695 于 2018-6-21 15:26 编辑
jQuery
1. 概念：jQuery是javascript函数库(库就是框架)
2. 导入：导入jQuery框架的script标签是独立的
3. 使用：
（1）复杂版：$(document).ready(function( ){ })
（2）简化版：$(function( ){ })
获取标签
1. var 变量名 = 选择集
（1）var $div = $(‘#app’)
（2）var $p = $(‘.box’)
（3）var $span = $(‘div span’)
（4）var $a = $(‘a[href=“www”]’)
2.对选择集进行过滤
（1）选择集.has()：当前选择集中包含某个元素的元素，var $div = $(‘div’).has(‘p’) 选择含有p标签的div标签
（2）选择集.not()：当前选择集中不包含某个元素的元素，var $div = $(‘div’).not(‘.classbox’) 选择不包含有class值为classbox的div
（3）选择集.eq(下标值)：当前选择集中下标为某个值的元素，var $li = $(‘li’).eq(3) 选择下标值等于3的li标签
选择集转移
1. 选择集.prev()：紧挨着当前选择集的前一个同级元素，$(‘#box’).prev(); id为box的紧挨着的前一个同级元素
2. 选择集.prevAll()：紧挨着当前选择集的前面所有的同级元素，$(‘#box’).prevAll(); id为box前面所有的同级元素
3. 选择集.next()：紧挨着当前选择集的下一个同级元素，$(‘#box’).next(); id为box紧挨的下一个同级元素
4. 选择集.nextAll()：紧挨着当前选择集的下面所有的同级元素，$(‘#box’).nextAll(); id为box后面所有通杯元素
5. 选择集.parent()：当前选择集的所有父元素，$(‘#box’).parent();id为box的父元素
6. 选择集.children()：当前选择集的所有子元素，$(‘#box’).children();id为box的所有子元素
7. 选择集.siblings()：当前选择集的所有同级元素，不包含当前选择集，$(‘#box’).siblings();id为box的同级元素
8. 选择集.find(类名)：当前选择集中类名等于某个值的元素，$(‘#box’).find(‘.myClass’)；id为box元素内class等于myClass的标签
jQuery样式操作
1. 获取操作样式：变量名.css(‘样式名’) ，相当于JS中的变量名.style.样式名
2. 单个样式值增加/修改：变量名.css(‘样式名’,’样式值px’) 或 变量名.css(‘样式名’,样式值)
3. 多个样式值增加/修改：以键值对的方式添加，变量名.css({‘样式名1’:样式值1 , ‘样式名2’:样式值2})
4. 注意：当选择器获取多个元素时，使用css获取的是第一个元素，比如$("li").css("width")，获取的是第一个 li 的 width
5. 变量名.addClass(‘类名’)：追加某个类名的样式
6. 变量名.removeClass(‘类名’)：删除某个类名的样式
7. 变量名.removeClass(‘类名1 类名2’)：删除多个类名的样式
8. 变量名.toggleClass(‘类名’)：重复切换某个类名的样式
绑定事件
1. 单击触发：变量名.click(function( ){ })
2. 双击触发：变量名.dblclick(function( ){ })
3. $(this)：可以实现多元素单独操作，点击谁，this就是谁
获取下标值
变量名.index()
jQuery动画
1. 添加动画：变量名/选择集.animate({‘样式名’:‘样式值px’},持续时间,‘运动方式’, function(){动画结束后的内容})
2.参数：
（1）{‘样式名’:‘样式值px’}：要改变的的样式属性，写成字典的形式
（2）持续时间：动画持续时间，单位毫秒
（3）运动方式：swing代表缓冲运动，linear代表匀速运动
（4）function(){动画结束后的内容}：动画回调函数，动画完成之后的匿名函数，动画完成之后想干什么
判断是否选择到了元素
变量名.length：因为变量为一个集合，所以用集合的长度来判断是否选择到元素
jQuery特殊效果
1. 变量名.fadeIn()：淡入
2. 变量名.fadeOut()：淡出
3. 变量名.fadeToggle()：切换淡入淡出
4. 变量名.hide()：隐藏元素
5. 变量名.show()：显示元素
6. 变量名.toggle()：切换元素的可见状态
7. 变量名.slideDown()：向下展开
8. 变量名.slideUp()：向上卷起
9. 变量名.slideToggle()：依次展开或卷起某个元素
10. 变量名.stop()：操作停止，stop之后代码的操作开始时，stop之前的代码会停止
jQuery属性操作
1. 选择集.html()：取出元素文本
2. 选择集.html(‘内容’)：设置元素文本
3. 选择集.val()：返回被选元素的值
4. 选择集.val(‘内容’)：设置被选元素的值
5. 选择集.prop(‘属性名’)：获取选择集的属性值
6. 选择集.prop({‘属性名’:‘属性值’})：设置属性值
jQuery循环
选择集.each(function(){})：从选择集中取出每一个
jQuery事件
1. 选择集.blur()：元素失去焦点
2. 选择集.focus()：元素获得焦点
3. 选择集.mouseover()：鼠标进入(进入子元素也会触发父元素的事件)
4. 选择集.mouseout()：鼠标离开(离开子元素也会触发父元素的事件)
5. 选择集.mouseenter()：鼠标进入(进入子元素不会触发父元素的事件)
6. 选择集.mouseleave()：鼠标离开(离开子元素不会触发父元素的事件)
7. 选择集.hover(function(){}，function(){})：是mouseenter和mouseleave的结合，括号里的两个function分别写进入和离开的代码
8. 选择集.ready()：DOM加载完成
9. 选择集.submit()：用户提交表单，当提交信息时，自动触发，可在方法中做最后的信息验证
10. 阻止submit()的默认提交
（1）场景：在submit()可以做最后一步的验证过程，当验证失败后，阻止提交到后端
（2）选择集.submit(function(参数){参数.preventDefault})
（3）选择集.submit(function(){return False})
表单验证
1. 定义正则表达式
（1）var re = new RegExp(‘规则’，‘可选参数’)
（2）var re = /规则1，规则2/参数；常用
2. 测试正则表达式：var result = re.test(‘要测试的字符’)
3. /b：匹配单词边界
4. /B：匹配非单词边界
5. {n, }：出现至少n次
6. 修饰参数：
（1）g：全文搜索
（2）i：忽略大小写
7. 函数：正则.test(‘要测试的字符’)
8. 常用规则：课件上有，写死的
（1）用户名验证：var reUser = /^\w{6,20}$/;
（2）邮箱验证：var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;
（3）密码验证：var rePass = /^[\w!@#$%^&*]{6,20}$/;
（4）手机号码验证：var rePhone = /^1[34578]\d{9}$/;
9. 正则默认规则：匹配成功就结束，不会继续匹配，区分大小写
事件冒泡
1. 概念：事件冒泡是一种常用的思想，是JS对对象事件的处理策略，是JS的一种实现机制，如果没有定义此事件的处理程序或者该事件返回true，子元素会把事件传递给它的父级并且层层传递，此时父级对象所有同类事件都将被激活，直至它被处理或者它到达了对象层次的最顶层，即document对象(有些浏览器是window)
2. 作用：事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上)，它还可以让你在对象层的不同级别捕获事件
3. 阻止事件冒泡：
（1）$grandson.click(function(参数) {alert('grandson'); 参数.stopPropagation(); }); /* 你们这个textarea没办法提供缩进和换行布局，麻烦改改代码，很难受 */
（2）在函数内部return false
事件委托
1.作用：
（1）事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作
（2）事件委托首先可以极大减少事件绑定次数，提高性能
（3）可以让新加入的子元素也可以拥有相同的操作
2.写法：父级变量名.delegate(‘子级标签’，‘事件类型’，function(){事件触发代码})，代表了父级代理了子级的事件
Dom操作
1.创建新标签
（1）第一步：var 变量名 = $('<标签名>') 或 var 变量名 = $('<标签名>内容</标签名>')
（2）第二步：$body.html(变量名)
2.移动或者插入标签的方法
（1）选择集.append(‘内容’)：在现存元素的内部，从后面放入元素
（2）$(内容).appendTo(选择集)：在现存元素的内部，从后面放入元素
（3）选择集.prepend(‘内容’)：在现存元素的内部，从前面放入元素
（4）$(内容).prependTo(选择集)：在现存元素的内部，从前面放入元素
（5）选择集.after(‘内容’)：在现存元素的外部，从后面放入元素
（6）$(‘内容’).insertAfter(选择集)：在现存元素的外部，从后面放入元素
（7）选择集.before(‘内容’)：在现存元素的外部，从前面放入元素
（8）$(‘内容’).insertBefore(选择集)：在现存元素的外部，从前面放入元素
3.删除标签：选择集.remove()，选择集自己删除自己
JavaScipt对象
1. 创建对象：var 对象名 = new Object()
2. 属性
（1）添加属性：对象名.属性名 = 属性值
（2）调用属性：对象名.属性名
3. 方法
（1）创建方法：对象名.方法名 = function(){方法内部代码}
（2）调用方法：对象名.方法名()
4. 简写创建对象的方法：var 对象名 = { 属性名: '属性值'，方法名:function(){方法内部代码} }
Json
1. 概念： JavaScript对象表示法，Json指的是类似于JavaScript对象的一种数据格式对象，是现在市面上普遍使用的数据传输形式，现在市场上使用Json比较多的原因是这种数据传输方式非常方便，简洁
2. Json与对象的区别
（1）内部数据不同：Json数据对象类似于JavaScript中的对象，但是它的键对应的值里面没有函数方法，值可以是普通变量，不支持undefined，值还可以是数组或者Json对象
（2）写法不同：Json对象的属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误
3. 写法
（1）格式：{ "name":"tom","age":18}
（2）数组写法：["tom",18,"programmer"]
ajax与jsonp
1. ajax的作用：
（1）ajax技术的目的是让javascript发送http请求与后台通信，获取数据和信息
（2）ajax技术的原理是实例化 xml http 对象，使用此对象与后台通信
（3）ajax通信的过程不会影响后续javascript的执行，从而实现异步
2. 同步和异步
（1）在程序中同步指的是程序挨个执行
（2）在程序中异步指的是程序同时执行
3. 局部刷新
（1）局部刷新(无刷新)指的是整个页面不刷新，只局部刷新
（2）ajax可以实现局部刷新，因为ajax可以不用通过浏览器的地址栏自己发送http请求，所以页面整体不会刷新，ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新
4. 数据接口：数据接口是后台程序提供的，它是一个url地址，访问这个地址，会对数据进行增、删、改、查的操作，最终会返回Json格式的数据或者操作信息，格式也可以是text、xml等
5. $.ajax的使用方法
（1）url、type和dataType这三个参数是必须设置的
（2）.done(function(参数) { })：当请求成功时执行的回调函数，参数用于在请求成功后接收后台返回的数据，返回的是一个Json
（3）.fail(function(参数) { })：当请求失败时执行的回调函数，参数用于在请求失败后接收后台返回的数据，返回的是一个Json
（4）执行过程：当启动代码后，本地服务器会接收到url参数，并且向目标服务器发送请求，目标服务器会将数据返回给本地服务器，最后本地服务器会将数据(Json)发送给function中的参数
6. $.ajax的简写方式
（1）get请求方式：$.get("url参数", data参数,function(参数){ });
（2）post请求方式：$.post("url参数", data参数,function(参数){ });
7. 同源策略：ajax请求的页面或资源只能是同一个域下面的资源，不能是其他域的资源，比如A公司的客户端只能请求A公司服务器的数据，不能请求其他公司服务器的数据，这是在设计ajax时基于安全的考虑
8. Jsonp：
（1）作用：可以实现跨域请求数据，jsonp 和 ajax 原理完全不一样，不过 jquery 将它们封装成同一个函数
（2）写法：dataType的值改为‘Jsonp’，url的值不同在写localhost，而是直接写想要请求的数据
（3）执行过程：客户端直接向目标服务器请求数据，不需要再通过本地服务器中转请求
9. ajax与Jsonp的区别：
（1）ajax接口不能跨域请求，返回json格式的数据字符串，比如'{"iNum":12,'sTr':'abc'}';
（3）jsonp接口可以跨域请求，jsonp的接口需要获取请求地址中的参数，也就是'callback'键对应的值(比如jQuery1124018787969015631711_1522330257607)，这个键值对是由$.ajax函数自动产生的，然后将这个值和json数据拼装成一个函数调用的形式的字符串返回(比如jQuery1124018787969015631711_1522330257607({"iNum":12,"sTr":"abc"})';)，这样就完成了一个jsonp的接口
|
|
收藏
淘帖
踩
