jQuery基本概念
JQuery基本概念使用javascript开发过程中,有许多的缺点:
1. 查找元素的方法太少,麻烦。
2. 遍历伪数组很麻烦,通常要嵌套一大堆的for循环。
3. 有兼容性问题。
4. 想要实现简单的动画效果,也很麻烦
5. 代码冗余。
什么是jQuery?
jQuery就是一个js库,使用jQuery的话,会比使用JavaScript更简单。
js库:把一些常用到的方法写到一个单独的js文件,使用的时候直接去引用这js文件就可以了。
jQuery其实就是一个js文件,里面封装了一大堆的方法方便我们的开发,其实就是一个加强版的common.js,因此我们学习jQuery,其实就是学习jQuery这个js文件中封装的一大堆方法。
jquery对象和js对象:
jquery对象:通过$()获取的元素
js对象:通过document的方式获取的元素
两者之间的区别与联系:
区别:jquery对象只能调用jquery对象的方法和属性,js同理,不能调用jquery的属性和方法
联系:jquery对象可以看作是由js对象组成的集合,可以遍历jquery对象得到js对象
jquery对象----> js对象 jquery对象[索引] jquery对象.get(索引)
js对象---->jquery对象 $(js对象)
入口函数:
window.οnlοad=function(){}
$(document).ready(function(){})
$(function(){})
$ 的实质 :函数
参数:①函数:入口函数 ②js对象:jquery对象 ③字符串: 获取的元素
选择器:
基本选择器:id选择器---获取指定ID的元素
类选择器---获取同一类class的元素
标签选择器---获取同一类标签的所有元素
并集选择器---使用逗号分隔,只要符合条件之一就可。
交集选择器---获取class为redClass的div元素
层级选择器:后代选择器---使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等
子代选择器---使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素
过滤选择器: :even---选择索引为偶数的元素
:odd---选择索引号为奇数的元素
:eq(索引)---选择索引号为2的元素,索引号index从0开始
:first
筛选选择器(方法): children(选择器)---相当于$(“ul>li”),子类选择器
parent()---查找父亲
siblings(选择器)---查找兄弟节点,不包括自己本身
next()---找下一个兄弟
prev()---找上一个兄弟
find(选择器)---相当于$(“ul li”),后代选择器
eq(索引)---相当于$(“li:eq(2)”),index从0开始
动画函数:
show() 显示
hide() 隐藏
fadeIn() 淡入
fadeOut() 淡出
slideUp() 用于向上滑动隐藏元素
slideDown() 用于向下滑动隐藏元素
SlideToggle() 如果元素向下滑动,则 slideToggle() 可向上滑动它们。如果元素向上滑动,则 slideToggle() 可向下滑动它们
第一个参数:动画执行的时间,固定的字符串,毫秒数字
第二个参数:回调函数,
第三个参数:动画执行的方式:swing linear
自定义动画函数: animate()
1:{属性键值对}
2:动画持续的时间
3:动画执行的方式: swing(摇摆) linear(匀速)
4:回调
动画队列:要执行动画,先排队,前面的动画执行完成后,在执行后面动画
停止动画:stop()
css操作:修改样式
css("样式属性","样式属性值")
css({"属性1":"属性值1","属性2":"属性值2"})
获取属性: css("属性名")
class操作:操作类
添加类名: addClass("类名")
删除类:removeClass("类名")
判断类是否存在:hasClass("类名")
移除类:removeClass(“类名”)
切换类:toggleClass("类名")
attr():操作普通的属性,用法和css()的用法一样
attr("属性","属性值");
attr({"属性1":"属性值1","属性2":"属性值2"});
attr("属性")
prop():操作属性值为bool类型的属性
节点的操作:
创建节点:$("标签和内容")
将节点添加到页面中
嵌套关系:
向后追加:父元素.append(子元素) 子元素.appendTo(父元素)
往前面添加: 父元素.prepend(子元素) 子元素.prependTo(父元素)
并列关系: 兄弟.after(元素) 兄弟.before(元素)
清空节点: 节点.empty()
删除节点:节点.remove()
克隆节点:节点.clone(true)
获取元素的文本内容:
表单元素的文本内容:
获取: 对象.val() 设置: 对象.val("设置的文本内容")
非表单的元素
获取: 对象.text() 对象.html()
封装的特殊的属性获取
获取元素的宽度和高度: width() height()
innerHeight(): height+padding
outerHeight(): height +padding + border
outerHeight(true): height +padding +border +margin
卷曲出去的值: scrollTop() scrollLeft()
获取位置:offset() position()
事件机制
简单的事件----》bind----》delegate事件 ----》on
绑定:对象.on("事件的类型","谁执行",数据,function(e){});
解绑:对象.off();//不写参数,将所有的事件都解绑,带有参数,解绑这个事件类型的所有事件
第三个参数:在回调函数中 e.data
阻止浏览器的默认事件: e.preventDefault()
阻止事件冒泡:e.stopPropagation()
return false;
ajax:asyns javascript and xml
ajax的原理:通过XMLHTTPRequest对象,向服务器发送请求,服务响应数据,把响应的结果通过JavaScript渲染到页面中
ajax的优点:异步加载,局部刷新
ajax的使用:
var xhr= new XMLHTTPRequest()
xhr.open('请求方式','url地址','是否异步')
xhr.send('');
响应---事件机制的方式 onreadystatechange readyState 0,1,2,3,4 status
dVObj.innerHTML=this.responseText;
异步:一次执行一堆,后面的内容不等前面的执行完。
响应内容:responseText----是一个字符串
序列化:将字符串格式转换为json格式 JSON.parse()
反序列化:将json格式的数据转换为string格式 JSON.stringfiy()
jquery封装ajax的方法
load(): $(对象).load('接口地址',{传递的参数:参数值},function(){})
jquery中get方法和post方法
$.get('url',传入的参数,成功的回调函数(response,status))
$.post('url','传入的参数',成功的回调函数,返回的数据类型)
jquery中的ajax()
$.ajax({
url:'请求地址',
type:'get/post',
data:'传入的参数',
dataType:'响应的数据类型',
success:function(response){},
error:function(){},
complete:function(){}
});
jsonp 的使用方法:ajax()
$.ajax({
url:'',
jsonp:'',
dataType:'jsonp',
success:function(){}
})
瀑布流
wrap盒子没有宽度,相框的宽度* 多少列相框
当滚动条滚到到最底部的时候,添加相框---ajax