jquery概要--基础01

时间：2022-05-12 03:19:36

jquery对象,DOM对象

  • var $cr = $('#cr');          var cr = $cr[0]; /var cr = $cr.get(0);
  • var cr = document.getElementById('cr');       var $cr = $(cr);

JQ与其他库一起使用会有冲突的时候：

  • JQ先导入：使用'jQuery()'替代'$()';其他库可以使用$()；
  • JQ后导入：使用jQuery(function($){内部可以继续使用'$()'});其他库可以使用$()；

 $('a'):jquery获取的是永远的对象，即使没有这个对象也不会报错；所以判断的方法为：

  • if($('a').length>0){}
  • 或转化为DOM判断：if($('a')[0]){}

 选择器

  • 基本选择器：
  • 层次选择器:$('ancestor descendant');  $('parent > child');  $('prev + next');  $(prev ~ sibiling).
    • 等价：
      • $('.one+div')  ===  $('.one').next('div');
      • $('#prve~div') === $('#prve')nextAll('div');
      • $('#prev').siblings('div')   //同辈所有的。
  • 过滤选择器    //一般情况下过滤器的内容已经为字符串无需再加引号
    • 基本过滤选择器：
      • :first,:last,   :not(selector),    :even,:odd,    :eq(index),:gt(index),:lt(index)     //index从0开始
      • :header//所有标题元素，一般冒号前无元素，
      • :animated//当前正在执行动画的所有元素，
      • :focus//当前获得焦点的元素
  • 内容过滤选择器：
    • :contains(text)
    • :empty //不包含子元素（包括空格、换行）
    • :has(selector),   :parent //含有子元素
  • 可见性过滤选择器：
    • ：hidden,:visible
  • 属性过滤选择器：
    • [attr],[attr=value],[attr!=value],[attr^=value],[attr$=value]
    • [attr*=value]   //attr属性值含有value,[attr|=value]//attr属性值等于value或以value前缀（后面跟'-'）
    • [attr~=value]   //value左右无其他字符串（包括开头结尾或直接等价），[attr1][attr2=value]//同时满足
  • 子过滤选择器：（这个过滤器返回的是子元素）
    • :first-child,:last-child,:only-child    //不唯一不匹配
    • :nth-child(even/odd),:nth-child(index)//index从1开始,:nth-child(2*index) //2的倍数,:nth-child(3*index+1)
  • 表单对象属性过滤选择器：
    • :enabled,:disabled //设置disable='disable',
    • :checked   //单选(radio)，复选框(checkbox)，
    • :selected//下拉框
  • 表单选择器
    • :input   //所有<input><textare><select><button>元素,
    • :text     //单行文本框,
    • :radio,
    • :checkbox,
    • :submit,
    • :image,
    • :reset,
    • :button,
    • :file,
    • :hidden
  • 选择器中的一些注意事项：
    • 选择器中含有特殊字符： 如#（].等注意在转义，因为在字符串内，使用双反斜杠\\
    • 注意空格

筛选：filter()//自身集合中查找,find()//子集中查找

DOM操作分类:

  • DOM Core:任何支持DOM的语言都可以使用 如：document.getElementById();elem.setAttribute();
  • HTML-DOM：使用js和dom为html编写脚本时 如:document.fomes; elem.src;
  • CSS-DOM:针对css的操作 如: elem.style.color;

属性操作：

  • 获得属性：单个attr('')；多个attr('','','');
  • 设置属性：单个attr('':''); 多个attr({'':'','':''});
  • 删除属性：removeAttr();

插入节点: 名字短的方法都是将原节点放在前，新节点放在在后；

  • 成为最后一个子节点：append,appendTo;
  • 成为第一个子节点：prepend,prependTo;
  • 成为后一个节点：after,insertAfter；
  • 成为前一个节点：before,insertBefore;

删除节点：

  • remove();

删除的包括其以及其全局子元素；
返回一个该节点的引用，所以还可以继续使用，但注意其原本绑定的事件，附加的数据都会删除。
对于节点集合，还可以使用参数过滤要删除的节点；

  • detach();

效果与remove()相同，区别是会保留其原本绑定的事件和附加的数据。

  • empty();

清空元素所有的子节点，包括绑定的事件，附加的数据；
没有返回引用；
没有参数过滤；

相关文章