JQuery中的Dom操作和事件

(一)JQuery中的事件

1.常规事件,把js事件中的on去掉

  复合事件:hover(function(){},function(){}) ---- 相当于把鼠标移入移出事件和在一起执行

        toggle(function(){},function(){},....)可以写多个,点击事件循环执行

  未来元素:对象.live("事件名",function(){});   --- 对未来创建的元素进行操作

 列子:点击按钮,创建元素,并给创建的元素添加点击事件 

  //对象.append();在什么对象下添加元素 $("html中要创建的内容")
  $("#boss").append($("<div class=‘div1‘></div>"));

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="Js/jquery-1.7.1.min.js"></script>
    <title></title>
    <style type="text/css">
        .div1 {
            width:100px;
            height:100px;
            margin-left:20px;
            margin-top:20px;
            float:left;
            background-color:red;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <input type="button" value="提交" id="but"/>
        <div style="width:800px;height:600px;" id="boss">
            <div class="div1">
            </div>
            <div class="div1">
            </div>
            <div class="div1">
            </div>    

        </div>
    </form>
</body>
</html>
<script type="text/javascript">
    //对象.live未来事件
    $(".div1").live("click",function () {
        alert("aaa");
    });

    $("#but").click(function () {
        //对象.append();在什么对象下添加元素    $("html中要创建的内容")
        $("#boss").append($("<div class=‘div1‘></div>"));

    });

</script>

2.阻止事件冒泡的方法:直接在事件中加入  return false;

(二)Dom操作

1.操作属性:

  获取属性:var s = $("选择器").attr("属性名")

  设置属性:$("选择器").attr("属性名","属性值")

  删除属性:$("选择器").removeAttr("属性名")

2.操作样式:

  操作样式:获取样式: var s = $("选择器").css("样式名")

        设置样式:$("选择器").css("样式名","值")

  操作样式表的class:添加class     $("选择器").addClass("class名")

            移出class     $("选择器").removeClass("class名")

            添加移除交替class     $("选择器").toggleClass("class名")

3.操作内容:

表单元素的取值赋值和js中的一样,非表单元素中,.html赋值:标记会编译,取值:标记会取出

                       .text赋值:内容直接全部输入,取值:只取出文字内容

  表单元素:

    取值:var s = $("选择器").val()

     赋值: $("选择器").val("值")

  非表单元素:

    取值:var s = $("选择器").html(),  var s = $("选择器").text()

    赋值:$("选择器").html("内容"), $("选择器").text("内容")

4.操作相关元素:

  查找:父辈 --- parent()      前辈  ---  parents(选择器)

      子级 --- children(选择器)    后代 --- find(选择器)

      兄弟(哥哥) --- prev() ,prevAll(选择器)   弟弟 --- next()后面一个元素   nextAll(选择器)后面兄弟级的元素

  操作:新建元素$("html字符串")

      添加:对象.appen(jquery对象) --- 内部添加,给什么对象添加

          after(jquery对象)  --- 下部平级添加

          before(jquery对象)  --- 上部平级添加

      移出:empty()   ---  清空内部全部元素

          remove()  ---  移出元素

      复制:clone()     

时间: 2024-10-23 13:28:51

JQuery中的Dom操作和事件的相关文章

2017-6-3 JQuery中的Dom操作和事件

---恢复内容开始--- (一)JQuery中的事件 1.常规事件,把js事件中的on去掉 复合事件:hover(function(){},function(){}) ---- 相当于把鼠标移入移出事件和在一起执行 toggle(function(){},function(){},....)可以写多个,点击事件循环执行 未来元素:对象.live("事件名",function(){});   --- 对未来创建的元素进行操作 列子:点击按钮,创建元素,并给创建的元素添加点击事件 //对象

Jquerry:jquery中的DOM操作&lt;一&gt;

之前两天学习了Jquery强大的选择器,今天学习了一部分Jquery对DOM的操作,下面我将把自己今天的成果分享给大家,那些菜鸟们,你们是否需要巩固之前所学? 首先需要知道,DOM操作分为3个方面:DOM Core.HTML-DOM.CSS-DOM.我们很多情况下用到的getElementById().getElementByTagName().getAttribute()和setAttribute()等方法都是DOM Core的组成部分.而document.forms(获取表单对象).elem

dom core,html dom,css dom,jquery 中的dom操作

前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名")/attr("属性名"))获取属性值, html dom一般利用属性的形式(element.属性名)获取对应属性值,形式相对简洁.此外,针对于css相关的对象,还有css dom 前端开发中的节点有三种:元素节点:文本节点和属性节点 js一般对于dom core和html dom都支

锋利的jQuery ——jQuery中的DOM操作(三)

一.DOM的操作分类 1>DOM Core   2>HTML-DOM   3>CSS-DOM 二.jQuery中的DOM操作 DOM树 ①查找节点 1)查找元素节点 利用jQuery选择器来选中元素,获取元素节点. 2)查找属性节点 利用jQuery选择器查找到需要的元素后,用attr()方法来获取它的各种属性的值. ②创建节点 1>创建元素节点 创建节点利用$(html),加入元素用append()还可以连写. 2>创建文本节点 创建文本节点直接在创建的html元素里面直接

HTML5移动开发之路(36)——jQuery中的DOM操作

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(36)--jQuery中的DOM操作 1.查询 利用选择器查找节点 使用 html() / text() / attr() 输出节点文本和属性值. 注意:下拉列表使用 val() [html] view plain copy print? <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery

第三章(jQuery中的DOM操作)

3.1 DOM 操作分类 ①DOM Core 包括(getElementById() , getElementsByTagName() , getAttribute() , setAttribute() ) //获取表单对象 docuement.getElementsByTagName("form"); //获取某元素的src属性 element.getAttribute("src"); ②HTML DOM 专属HTML_DOM属性,提供一些更简明的记号来描述各种H

jquery中的DOM操作

DOM操作分为:DOM核心.HTML-DOM.CSS-DOM 1.节点操作 查找 查找元素节点:jquery选择器 查找属性节点:attr("")方法,参数为要查询的属性的名字 创建 创建元素节点:$("html")方法,参数为HTML标记字符串,如:<p></p> 注意:(1)动态创建的新元素节点不会被自动添加到文档中,需要用其他方法插入文档中(2)创建元素时注意标签闭合,可以用$("<p></p>&quo

jQuery之第3章 jQuery中的DOM操作

DOM操作分为3个方面: DOM Core(核心).HTML-DOM 和 CSS-DOM 1.查找节点: 查找元素节点: var $li = $("ul li:eq(1)"); var li_txt = $li.text(); 查找属性节点: var $p = $("p"); var p_title = $p.attr("title"); 注意: attr() 获取指定元素节点属性的值. 2.创建节点: 创建元素节点: var $li = $(&

1. jQuery中的DOM操作

1)查找节点 通过jQuery选择器来完成 2)创建节点 创建元素节点:var newTd = $("<td></td>") 创建文本节点:在创建元素节点时直接把文本内容写出来.var newTd = $("<td>文本内容</td>") 3)插入节点: append() 在每个匹配元素里面的末尾处插入参数内容.作为它的最后一个子元素. 参数 一个或多个DOM 元素,DOM元素数组,HTML字符串,或者jQuery对象