jquery复习1
jquery复习2
个人博客
总结
* 选择器:
* id选择器 $("#id属性的值")
* 标签选择器 $("标签名字")
* 类选择器 $(".类样式的名字")
* 交集选择器 $("标签.类样式的名字")---->标签+类选择器
* 并集选择器 $("选择器,选择器,选择器,...")---->多条件选择器
* 都可以看成是筛选器
* 索引选择器 $("选择器:eq(索引的值)")
* 奇数筛选器 $("选择器:odd")
* 偶数筛选器 $("选择器:even")
* 筛选器 $("选择器:lt(索引)")--->获取小于这个索引的元素
* $("选择器:gt(索引)")--->获取大于这个索引的元素
* 其他选择器
* $("选择器:last")---->最后一个
* $("选择器:first")---->第一个
* 获取当前元素的其他的方法
* 当前元素.next()---->下一个兄弟元素
* 当前元素.nextAll()--->后面所有的兄弟元素
* 当前元素.prev()---->前一个兄弟元素
* 当前元素.prevAll()-->前面所有的兄弟元素
* 当前元素.siblings()-->所有的兄弟元素(没有自己)
* 当前元素.parent()--->父级元素
* 当前元素.children()--->当前元素中所有的子元素(直接的子元素)
* 当前元素.find("选择器")--->从当前元素中找某个或者是某些元素
*
* 方法:
* .val()---->操作表单元素的value属性,可以获取也可以设置
* .text()---->操作元素中间的文本内容的,相当于innerText
* .html()---->操作元素中的html代码及内容,相当于innerHTML
* .css()----->操作元素的样式
* .addClass()--->添加类样式
* .removeClass()-->移除类样式
* .hasClass()---判断元素是否应用了类样式
* .index()---->元素的索引
*
*
* 下面的这些动画的方法,一般都可以使用两个参数,参数1:时间, 参数2:回调函数
* 参数---时间:1000毫秒---1秒
* 参数---时间:slow---慢,normal---正常,fast---快
* .show()--->显示
* .hide()--->隐藏
* .stop()---->停止动画
* animate()--->动画的方法
* slideUp()---->滑入
* slideDown()--->滑出
* slideToggle()--->切换滑入和滑出
* fadeIn()---->淡入
* fadeOut()--->淡出
* fadeToggle()--->切换淡入淡出
* fadeTo(时间,透明度的值)
*
* 元素创建:
* $("html的代码")
* 元素的添加
* 父级元素.append(子级元素);
* 子级元素.appendTo(父级元素);
*
* clone()克隆元素
* 父级元素2.append($("父级元素1>子级元素"));,相当于剪切过去的
* 元素的创建
* 1.
* $("html代码及内容")
* 对象.html("html代码及内容")
*
* 元素的添加
* 父级元素.append(子级元素);
* 子级元素.appendTo(父级元素);
*
* 父级元素.prepend(子级元素);加到第一个子级元素的前面
* 子级元素.prependTo(父级元素);加到第一个子级元素的前面
* 父级元素.after(元素);当前父级元素后面的第一个兄弟元素的位置
* 父级元素.before(元素);前父级元素前面的一个兄弟元素的位置
*
* 如何移除父级元素中的子级元素
* 父级元素.html("");
* 父级元素.empty();清空
* 父级元素.remove();---->自杀,自己被删除
*
* val()方法的使用,可以设置表单的value属性值
* val()方法也可以设置下拉框某个option选中
*
* 自定义属性的操作
* attr("属性","值");
* removeAttr("属性");移除这个自定义属性
* attr("属性");获取该属性的值
*
* 元素选中操作
* prop()方法
* prop("checked");---->布尔类型
* prop("checked",布尔类型的值);
*
* 元素的样式的操作
*
* 设置或者获取元素的宽和高
* .width()--->获取 .width(值);---设置宽度
* .height();-->获取 .height(值);--设置高度
*
* 获取或者是设置元素的left和top
* .offset()----->返回的是一个对象,该对象中两个属性,left和top
* 在offset()方法获取left或者是top的时候是包括margin的值
* .offset({"left":值,"top":值});---->设置
* .scrollLeft()---->向左卷曲出去的距离
* .scrollTop()---->向上卷曲出去的距离
*
* 事件的绑定
* 元素.事件名字(事件处理函数);
* 元素.bind("事件名字",事件处理函数);
* 元素.bind({"事件名字":事件处理函数});
* 父元素.delegate("子元素的选择器","事件名字",事件处理函数);
* 最终事件是在子元素上
* * 1.
* 对象.事件名字(事件处理函数);
* $("#btn").click(function(){});
* 2.
* 对象.bind("事件名字",事件处理函数);
* $("#btn").bind("click",function(){});
* 3.
* 对象.delegate("选择器","事件名字",事件处理函数);
* $("#div").delegate("p","click",function(){});
* 4.
* 对象.on("事件名字","选择器",事件处理函数);
* $("#div").on("click","p",function(){});
* 最终:推荐使用on的方法来为元素绑定事件
*
* 为元素解绑事件
* bind方式绑定事件,使用unbind()解绑
* 使用delegate绑定事件,使用undelegate()解绑
* 使用on绑定事件,使用off()解绑事件
* 总结:使用什么方式绑定事件,推荐用对应的方式解绑事件
*
* 事件参数对象,jQuery中事件参数对象同样存在
* e.button---->鼠标按键的键值
* e.altKey-----用户是否按下了alt键-----布尔类型
* e.shiftKey---用户是否按下了shift键---布尔类型
* e.ctrlKey----用户是否按下了ctrl键----布尔类型
* e.keyCode---键盘的按下键的值
*
* 链式编程的原理:对象调用的方法如果想要继续链式编程,那么就在这个方法中返回当前的对象(this)
* 包装集:就是把获取的元素通过jQuery的方式进行包装---如果想要判断这个元素在页面中是否存在,对象.length的方式来判断
*
* 例子:
* if($("#btn").length!=0){
* console.log("存在的");
* }else{
* console.log("不存在);
* }
* 多库共存:目的就是$这个符号如果被其他开发人员占用,那么此时可以使用.noConflict()对$释放权限
* var xy=$.noConflict();之后,xy就相当于原来的$,也可以使用jQuery这个对象
* 插件的使用的步骤:
* 1.去网上搜,下载,下载后的文件,一般都是一个压缩包,也可以是一个文件夹
* 2.引入下载后的插件的css文件
* 3.引入下载后的插件的js文件
* 4.复制html中的结构的代码
* 5.复制html中实现功能的代码到页面加载的事件中
*
* 一般情况在使用插件的时候,测试的时候,先把这个代码直接复制到一个div(一个标签),调整整体的大小,位置,样式,然后直接放在自己的页面的某个位置,进行使用
* 事件参数对象下的三个属性
*e.target这个属性得到的是触发该事件的目标对象,此时是一个DOM对象
*e.currentTarget这个属性得到的是触发该事件的当前的对象
*e.delegateTarget这个属性得到的是代理的这个对象
* */