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这个属性得到的是代理的这个对象
  
    * */