元素的访问

  1. 元素属性操作

    • 获取:attr(name);$("#my").attr("src");
    • 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg");
      •  多个属性;attr({key1:value1,key2:value2});$("#myImg").attr({src:"images/1.jpg",title:"示例图片"});
      •  函数;attr(key,function(index){...});index是当前元素的索引,函数可返回字符串作为元素的属性值
    • 删除:removeAttr(name);
  2. 内容操作

    • html();获取元素的html内容

      •   html(val);设置元素的html内容
    • text();获取文本内容
      •   text(val);设置文本内容
  3. 元素值操作

    • val();获取元素的value值
    • val(value);设置元素的value值
    • val().join(",");获取select标记中多项值
    • val(array);数组形式,设置元素被选中
  4. 元素样式操作

    • 直接设置;.css(name,value);name为样式名,value为对应的参数值;$("p").css("font-size","16");
    • 增加css类;addClass(classname);$("div").addClass("clsDiv");
      •   addClass(class1 class2 ...);多个类,空格隔开
    • 类别切换:toggleClass(name);单击切换,再单击恢复
    • 删除类:removeClass();移除所有类别
      • removeClass(class);移除元素的某一个class类

创建元素节点

  1. 动态创建页面元素

    •  $(html);参数html是动态创建dom元素的html标记字符串;var $div = $("<div>hello world</div>");

      •  tips:var $str 和 var str 区别;$是jquery的一个标识,作为jquery的实例变量;两者本身意义一样;
  2. 复制节点

    •   clone();仅仅复制元素
    •   clone(true);复制元素,包括元素的行为方法
  3. 替换节点

    • replaceWith(content);替换内容
    • replaceAll(selector);替换的元素,替换后的元素的事件消失;
  4. 遍历元素

    •   each(function(index){...});使用this可获取该元素的属性或设置某属性

      •   $("img").each(function(index){ this.title = this.alt; });
  5. 删除元素

    • empty();清空页面元素
    • remove();删除页面元素,传入参数,可删除某指定元素

    

节点插入

  1. 内部插入

    •  append(content);插入content内容

    • append(function(index,html){...});插入函数返回的内容;index是对象索引,html是元素原来的html
      •   $("div").append(relHtml);function relHtml (){ var $str = "<p>hello world</p>"; return $str;}   
    • appendTo(content);将方法前部分内容插入到后部分中
      •   $("span").appentTo($("div"));即将span的内容插入到div中
  2. 外部插入

    •  after(content);向元素外部的后面插入内容

      •   after(function);向元素外部的后面插入函数返回的内容
    • before(content);向元素外部的前面插入内容 
    • insertAfter() ;将元素的内容插入到另一个元素的后面
    • insertBefore();

      

事件

  1. 事件机制

    • 事件触发

      •  捕获阶段
      • 冒泡阶段:子元素触发事件后,回向父元素或上级元素传递,使得父级的事件也被触发;
        •  阻止冒泡方法:.stopPropagation()或 return false;
  2. 事件载入

    • ready();$(document).ready(function(){...});
    • ready()和onLoad()的区别:
      • ready();页面dom元素加载完成执行
      • onLoad();全部元素加载完成执行
    • 简写:$(function(){...});
  3. 事件绑定

    • 直接绑定事件;$(".btn").click(function(){...});
    • bind()绑定;bind(type,[data],func);type-事件类型,[data]-event.data属性传递给事件对象,func-处理函数
      • $(".btn").bind("click",function(){...});
    • bind()绑定多个事件;
      • $(".btn").bind({focus:function(){...},change:function(){...}});
  4. 切换事件

    • hover(over,out);浮动切换,鼠标移出移进来样式改变;

      •  $("title").hover(function(){alert("over")},function(){alert("out")});
    • toggle(func1,func2,func3,...);单击依次调用函数
  5. 移除事件

    • unbind(type,func);移除绑定事件,该事件之前已经触发的行为结果不会被移除

      • 无参,移除所有绑定事件 
      • 有type,移除type事件
      • 有func,移除指定type中的func函数
  6. 鼠标事件

    • mouseenter();经过被元素触发,不冒泡  
    • mouseleave();移开被选元素触发,不冒泡
    • mouseover();经过被选元素以及子元素都触发
    • mouseout();移开被选元素以及子元素触发
    • mousemove();移入被选元素内后,在移动1px都会触发
  7. 其他事件

    • one(type,[data],func);为所选择的元素绑定,但只触发一次
    • trigger(type,[data]);dom加载后自动触发指定类型事件

    

jquery动画和特效

  1. 显示,隐藏

    • show();可加入默认字符slow,normal,fast改变速度,也可直接传数值,可有回调函数
    • hide();
      •  $("div").show(2000,function(){...});
  2.     

    • toggle();切换元素样式,可见/隐藏

      •   toggle();
      •   toggle(switch);布尔值判断
      •   toggle(speed,func);
  3. 滑动,改变元素的高度

    • slideUp(speed,func); 
    • slideDown(speed,func);
    • slideToggle(speed,func);切换滑动
  4. 淡入淡出,改变元素的透明度

    • fadeIn();淡入,即显示
    • fadeOut();淡出,即隐藏
    • fadeTo(speed,opacity,func);改变透明度到opacity值
  5. 自定义动画

    • animate();

  

jquery--DOM操作基础的更多相关文章

  1. jQuery DOM操作之结点转移复制

    jQuery DOM操作之结点转移复制 $('div').append($('p'))这样即可把p标签移动到div标签里 $('div').append( $('p').html() )是把p标签里的 ...

  2. JQuery DOM操作(属性操作/样式操作/文档过滤)

    jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤) 一.DOM属性操作 1.属性 (1).attr() 方法 语法:$(selector).attr(name|prop ...

  3. JQuery DOM操作 、属性和CSS样式操作、其他函数

    DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...

  4. Jquery DOM 操作列表

    jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). jQuery 属性操作方法 下面列出的这些方法获得或设置元素的 DOM 属性. 这些方法对于 ...

  5. 事件冒泡及事件委托的理解(JQuery Dom操作)

    jQuery事件冒泡: click mouseenter 等事件没有绑定 也会触发,只是触发后没有任何结果 子元素触发事件后,会把触发事件传递给父元素,那么父元素也会被触发. 不管有没有绑定事件,都会 ...

  6. jquery DOM操作(一)

    上一篇文章是记录了jquery中选择器的作用,这里只要记录下jquery中的DOM操作,还是按照上篇的格式来. 下面是测试用的html代码,接下来DOM的操作会在下面的代码下进行. <body& ...

  7. JQuery -- Dom操作, 示例代码

    1.内部插入节点 *   append(content) :向每个匹配的元素的内部的结尾处追加内容 *   appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处 *   ...

  8. javascript DOM 操作基础知识小结

    经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的.   DOM添加元素,使用节点属性  <!DOCTYPE html PUBLIC ...

  9. JQuery dom 操作总结

    DOM 操作之获取值 获得内容 - text():设置或返回所选元素的文本内容 $("#btn1").click(function(){ alert("Text: &qu ...

  10. Query节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作

    一.创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...

随机推荐

  1. Android Animation 知识点速记备忘思维导图

    备注的大段文本,无法在图片中体现, 思维导图源文件放在附件中.使用 Xmind 8 制作. 附件:AndroidAnimation-xmind.zip

  2. C# 程序启动最小化至任务栏及闪烁

    主要功能: C#让窗体最小化至任务栏,同时在系统托盘区的图标点击左键能显示窗体,并使窗体闪烁. 首先: 创建窗体应用程序,并添加控件NotifyIcon及ContextMenuStrip控件 Noti ...

  3. named 快速部署及主机记录普及

    实验环境centos7.2,仅供参考 yum -y install epel-release    --安装最新yum配置源 cd /etc/yum.repos.d/ # wget http://re ...

  4. nginx 应用包编译及常用文件配置

    1.zlib wget http://www.zlib.net/fossils/zlib-1.2.8.tar.gz 2.openssl wget http://www.openssl.org/sour ...

  5. HTTP常用状态码大全

    HTTP状态码对照表 HTTP response codes 当浏览者访问一个网页时,浏览者的浏览器会向网页所在服务器发出请求.当浏览器接收并显示网页前,此网页所在的服务器会返回一个包含HTTP状态码 ...

  6. MVC 接收参数时会自动解码

    MVC在接收传递过来的参数时,会自动对参数进行解码,无需手动解码 例: public ActionResult SendMsg2(string name) { return Content(name) ...

  7. 中间人攻击之劫持登录会话(cookies)

    关于中间人攻击 中间人攻击(Man-in-the-MiddleAttack,简称"MITM攻击")是一种"间接"的入侵攻击,这种攻击模式是通过各种技术手段将受入 ...

  8. miniui dataGrid detail grid

    <div >      <div id="vkhGrjx_grid" class="mini-datagrid" style="wi ...

  9. [19/03/30-星期六] IO技术_四大抽象类_ 字节流( 字节输入流 InputStream 、字符输出流 OutputStream )_(含字节文件缓冲流)

    一.概念及分类 InputStream(输入流)/OutputStream(输出流)是所有字节输入输出流的父类 [注]输入流和输出流的是按程序运行所在的内存的角度划分的 字节流操作的数据单元是8的字节 ...

  10. SpringMVC关于请求参数乱码问题

    String names =request.getParameter("name") request主要接收的参数是form提交 form提交有的时候会伴随着乱码,该乱码的格式为I ...