jq与ajax
jq
用法:开始 $是简写,全写 $(“#nan”)==jQuery(“#nan”)
$('.class').click(function(){}) 单独加事件不要带on
对象写法
$('#div1').css({width:'300px','height':'400px','fontSize':'30px'});//批量修改 可以不带px,尽量复合写法把'-'去掉
this
$(this) 代表当前对象 $(this).index();代表当前索引值
通过点击调用开关方法,toggle()不给参数,里面集成显示与隐藏方法
animate({josn对象},时间毫秒,回调函数function(){重新调用动画方法,这样可以实现链式运动})
注意1.json对象里background-color不能用,CSS3的属性,是不能用的 注意2.同一个元素有多个动画,它是队列动画执行的,为了防止动画的累积,动画前加个.stop()方法,停掉之前的动画
哪些属性不能参与动画,一定死记
background-color 背景颜色 jQuery不能使背景颜色实现过渡动画,如果想要背景颜色过渡,需要使用CSS3的新特性;
background-position 背景定位
CSS3的属性,是不能过渡的,但是简单CSS3属性比如border-radius是可以的,复杂的比如transform属性是不能jQuery动画的
stop()方法
stop() 等价于.stop(false,false) 立即停止当前动画,立即进入下一个动画
stop(true)
等价于.stop(true,false) 立即停止当前动画,并清空动画队列
stop(true,true)
立即停止并完成当前动画,并清空动画队列
stop(false,true)
立即停止并完成当前动画,立即进入下一个动画
jq方法总结
text()添加内容 prevAll()返回之前所有的兄弟节点 end()结束当前链条最近的筛选操作,并且匹配元素集还原为之前的状态 nextAll()返回所有之后的兄弟节点 next()返回第一个弟弟对象 removeClass()从被选元素移出一个或多个类 toggleClass()对设置或移除被选元素的一个或多个类进行切换 addClass()向被选元素添加一个或多个类 attr()设置或返回被选元素的属性和值 css() 一个值获取 两个值修改 对象写法 去掉'-' html()获取文本内容 index()获得第一个匹配元素相对于其同胞元素的 index 位置 hide()隐藏元素 show()显示被隐藏的元素 fadeIn() 方法使用淡入效果来显示被选元素 fadeOut() 方法使用淡出效果来隐藏被选元素 animate() 方法执行 CSS 属性集的自定义动画 siblings() 所有的兄弟元素 data() 方法向被选元素附加数据,或者从被选元素获取数据 append() 子级追加到父级元素内部尾部 prepend :子级追加到父级元素内部前面 before()追加到同级元素前面 after()追加到同级元素的后面 remove() 方法移除被选元素,包括所有文本和子节点 find('') 找到某一个后代元素,记得带元素 parent()方法返回被选元素的直接父元素 replaceWith() 方法用指定的 HTML 内容或元素替换被选元素 slideDown() 方法通过使用滑动效果,显示隐藏的被选元素,默认状态是不可见的,滑动向下 slideUp()通过使用滑动效果,隐藏被选元素,滑动向上 stop()方法,停掉之前的动画 is()侦测某一个元素是否具备某种状态 children() 找到直接儿子 each(),规定为每个元素规定运行的函数 val()返回被选元素的值 hasClass() 方法检查被选元素是否包含指定的class clone()被选中元素的副本,包括子节点,文本和属性 appendTo()被选中元素的结尾(仍在内部)插入指定内容 insertBefore() 方法在指定的已有子节点之前插入新的子节点 last() 方法返回被选元素的最后一个元素 stopPropagation() 取消事件冒泡 preventDefault() 单独阻止默认 trigger() 方法触发jq自定义事件 :animated 选择器选取当前的所有动画元素 delay() 方法对队列中的下一项的执行设置延迟 releaseCapture()释放对鼠标的俘获 setCapture()俘获鼠标信息 insertAfter() 方法在被选元素之后插入 HTML 标记或已有的元素 one() ,每个元素只能运行一次事件处理器函数 noConflict(),jq放弃$所有权 scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置
事件绑定
0级事件 obj.事件名()click,mouseenter,mouseout,scroll,keydown,keyup,mousedown,mousemove,mouseup,resize窗口改变大小,change下拉列表改变事件,contentmenu 右键菜单事件,foucs,blur,submit提交事件,select选中事件,onload加载事件,onready加载事件
事件绑定方法 bind('不带on事件名[支持同时绑定多个事件]')
on 事件绑定-用法同bind 支持单个事件,多个事件,多个事件对象
on事件委托 :
事件委托原理:利用事件冒泡的特点,子级事件委托给父级
事件委托方法 $('父级').on('事件','事件源头标签',function(){})
js事件流-1.事件冒泡-从里往外冒执行事件,优点:事件委托就利用了这个特点。缺点:易触发多个事件
ajax
概念
是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术
两种数据格式:JSON(现在常用数据格式)与XML(跟html语法类似,早期的一种数据格式)-前端与后台打交道中间桥梁
Ajax原理实现
买手机 var xhr=new XMLHttpRequest()
拨打号码 xhr.open('get','url地址',true) //请求类型 get ,post 路径:url地址 true:异步请求 ,false :同步请示
按下拨号键 xhr.send() 发送
发送是否成功 xhr.onreadystatechange=function(){if(xhr.readyState==4){ //有没有发送成功: http请求状态 :0,1,2,3,4
成功的状态码
200 服务器成功返回网页 304 未修改
失败的状态码
404 – 请求的网页不存在 503 – 服务器暂时不可用 500 – 服务器内部错误
提交数据方式: get 和 post 的区别
1.get :通过url地址 名字=值&名字=值方式传输的使用频率高,常用于查询数据,没有post安全,传输数据不是很大
2.post:常用于提交安全数据(比如注册登录),不是明文发送,可传输数据量大
post方式要设置请求头setRequestHeader才可以发送数据到后台
用随机数解决缓存:Math.random() 或new Date().getTime()
跨域
注意!!!后台没有允许跨域时,可用代理请求 https://bird.ioliu.cn/v1?url=请求地址 或https://bird.ioliu.cn/v2?url=请求地址
三种跨域
1.代理跨域
2.jsonp请求跨域-后台配合获取callback,然后返回给你
3.后台语言不限制跨域,可把请求api写到后台,-java,php,nodejs,python
php
api地址与请求参数(.$_GET['wd'])拼接-注意https请求需要到相应版本中php.ini中把extension=php_openssl.dll前面的;删掉,重启服务就可以了
jq尺寸
$().width() 得到计算后的纯宽度(相当于原生:getComputedStyle(obj,属性)),不带px
$('div').innerWidth()
width+padding
outerWidth()
width+padding+border
outerWidth(true)
width+padding+border+margin值
获得整个窗口(可视区)的宽度 $(window).width()
$().position() 获取元素相对于定位元素的距离
$().offset() 获取元素到窗口的净距离
链式操作
链式操作.html()有返回值时不能进行链式操作