jQuery

原创
2019/06/05 18:19
阅读数 39

一.万能的$($===jQuery)
 $是一个对象,也是一个方法
 1.1 直接获取页面的元素  
         $("选择器") 例:$("#id值")
 1.2 dom就绪后执行相应的代码
     window.onload = function(){...} -> 页面加载完毕后执行(所有数据请取完毕)
     $(function(){...}) -> dom加载就绪(只需要读取到标签与属性即可【速度更快,性能更好】)
 1.3 把一个原生的dom对象转成jQuery对象
         jQuery对象的功能更加强大 【object{...}】,是一个伪数组
         原生 -> jQuery : $(原生对象)
         jQuery -> 原生 : jQuery对象[0]/jQuery对象.get(0)
 1.4 直接创建一个元素  $("<div>")
 1.5 直接调用相应的方法  $.get(..)/$.parseJSON(..)
 
 二.选择器
  2.1 基本选择器(id,class,标签,多选择器)
  2.2 层级选择器(父子,后代)
  2.3 伪类选择器(:名称)
  2.4 属性选择器  -> $(div[name])/$(div[name=xx])
三.事件注册
  $(元素).click(function(){...})
  $(元素).bind("click",function(){...}) / unbind
  $(元素).on("click",function(){...})     / off
  =============事件委派===========
  $("tbody").on("click",".delBtn",function(){})
      监听tbody的点击事件,当你点击的位置(元素)符合 .delBtn -> 就触发事件
 
四.学习的内容的列举
    1.each() -> 遍历咱们的元素
        jQuery对象.each(function(index,ele){
            //index:遍历的下标
            //ele:遍历的每一个元素
        })
    2.length -> 一个jQuery元素(伪数组)的长度
         jQuery对象.length/jQuery.size()
    3.attr/prop -> 获取与设置某个元素的属性
            prop:支持多选与单选(attr支持有问题)
            var 属性值 = jQuery元素.attr/prop("属性名");
            jQuery元素.attr/prop("属性名","属性值");
      4.HTML代码/文本/值
          var html = jQuery对象.html() -> 获取一个对象中的所有html的内容
          jQuery对象.html("<div>xxx</div>") -> 设置一个对象中的所有html的内容
          //val只用于设置表单元素(input,textarea,select)的值
          var html = jQuery对象.val()
          jQuery对象.val("<div>xxx</div>")
      5.css -> 获取与设置元素的某个样式
            jQuery元素.css("样式名","样式值");
            jQuery元素.css("background-color","red");
      6.文本操作
        jQuery元素.append("元素"); -> 把括号中的元素放到jQuery元素中
        jQuery元素.appendTo("元素"); -> 把jQuery元素追加到元素中
        jQuery元素.empty():清空所有子元素
        jQuery元素.remove():删除自己
        jQuery元素.clone([true/false]):当前元素复制一下 (加true可以连事件一起复制)
      7.查询
          jQuery元素.closest("条件") -> 从当前元素向上查询,找到第一个满足条件的元素为止
          jQuery元素.parent() -> 找到当前元素的父元素
      8.ready(fn) :页面载入 [dom就绪后执行相应的代码]
          $(function(){...})

展开阅读全文
打赏
0
0 收藏
分享

作者的其它热门文章

加载中
更多评论
打赏
0 评论
0 收藏
0
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部