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();

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

 

jquery概要--基础01的更多相关文章

  1. jquery概要--基础02

    复制节点:clone();默认不会复制绑定事件,如果传入参数true会复制:替换节点: replaceWith()              //原节点放在前,新节点放在在后: replaceAll( ...

  2. Jquery语法基础

    Jquery语法基础 一.Jquery一般语法格式为:$(selector).action() l  美元符号定义 jQuery (又称工厂函数) l  选择器(selector)“查询”和“查找” ...

  3. [DOM Event Learning] Section 3 jQuery事件处理基础 on(), off()和one()方法使用

    [DOM Event Learning] Section 3 jQuery事件处理基础 on(),off()和one()方法使用   jQuery提供了简单的方法来向选择器(对应页面上的元素)绑定事件 ...

  4. javascript基础01

    javascript基础01 Javascript能做些什么? 给予页面灵魂,让页面可以动起来,包括动态的数据,动态的标签,动态的样式等等. 如实现到轮播图.拖拽.放大镜等,而动态的数据就好比不像没有 ...

  5. jQuery 插件基础

    jQuery 插件基础 翻译 How to Create a Basic Plugin 如果你需要在 jQuery 选择器上执行一系列重复操作, 这时候你需要编写 jQuery 插件. jQuery ...

  6. Androd核心基础01

    Androd核心基础01包含的主要内容如下 Android版本简介 Android体系结构 JVM和DVM的区别 常见adb命令操作 Android工程目录结构 点击事件的四种形式 电话拨号器Demo ...

  7. java基础学习05(面向对象基础01)

    面向对象基础01 1.理解面向对象的概念 2.掌握类与对象的概念3.掌握类的封装性4.掌握类构造方法的使用 实现的目标 1.类与对象的关系.定义.使用 2.对象的创建格式,可以创建多个对象3.对象的内 ...

  8. jquery插件开发基础入门

    jquery插件开发基础入门 入门 编写一个jquery插件开始于给jquery.fn加入新的功能属性,此处添加的对象属性的名称就是你的插件名称 jQuery.fn,myPlugin = functi ...

  9. jQuery官方基础教程笔记(转载)

    本文转载于阮一峰的博文,内容基础,结构清晰,是jquery入门不可多得的资料,非常好,赞一个. 阮一峰:jQuery官方基础教程笔记 jQuery是目前使用最广泛的javascript函数库. 据统计 ...

随机推荐

  1. topo排序 + 用邻接表优化后的

    输入数据: 4 61 21 32 33 42 44 2 4 61 21 32 33 42 41 2 topo排序为偏序: #include<stdio.h> #include<que ...

  2. Android--UI之EditText

    前言 上一篇博客介绍了Android的TextView控件,这篇博客来说一下EditText控件.EditText为一个文本控件,提供了文本输入的功能,而且继承自TextView,可以理解为可以输入的 ...

  3. [POJ1050]To the Max

    [POJ1050]To the Max 试题描述 Given a two-dimensional array of positive and negative integers, a sub-rect ...

  4. android 初探

    2014年7月27日 15:02:57 附: android 官方培训课程中文版 //官方简单的入门教程, 每个大类中只介绍了几个知识点, 可以快速搭建一个hello world android 开发 ...

  5. 转MYSQL学习(四) 查询

    MySQL中select的基本语法形式: select 属性列表 from 表名和视图列表 [where 条件表达式] [group by 属性名[having 条件表达式]] [order by 属 ...

  6. hdu 1232 畅通工程 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1232 并查集入门题.最近在学并查集,它无非包括三个操作:make_set(x).union_set(x ...

  7. Cocos2d-JS坐标系统

    标准屏幕坐标系 如果接触过iOS,Android,Windows Phone等系统的应用开发,或使用DOM,CSS开发过Web网页,开发者会非常熟悉所谓的标准屏幕坐标系:左上角为原点,向右为X轴正方向 ...

  8. HDU1695 GCD (欧拉函数+容斥原理)

    F - GCD Time Limit:3000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Stat ...

  9. WebStorm快捷键操作

    1. ctrl + shift + n: 打开工程中的文件,目的是打开当前工程下任意目录的文件. 2. ctrl + j: 输出模板 3. ctrl + b: 跳到变量申明处 4. ctrl + al ...

  10. python基础——使用list和tuple

    python基础——使用list和tuple list Python内置的一种数据类型是列表:list.list是一种有序的集合,可以随时添加和删除其中的元素. 比如,列出班里所有同学的名字,就可以用 ...