zhuhuiwen Front-end Dev Engineer

jQuery第三天操作对象和事件

2016-10-27
jQuery

10/27/2016 8:25:10 AM

jQuery中的其方法

第一类

  1. 方法一
    • $dv.append( $span );
      • 这个方法是把 $span 追加到 $dv 中去
    • $(selector).appendTo(node);
      • 作用：同append()，区别是：把$(selector)追加到node中去
  2. 方法二
    • $(selector).prepend(node);
      • 作用：在元素的第一个子元素前面追加内容或节点

第二类

  1. 方法一
    • $(selector).after(node);
      • 作用：在被选元素之后，作为兄弟元素插入内容或节点
    • $(selector).before(node);
      • 作用：在被选元素之前，作为兄弟元素插入内容或节点

注意点

往前添加（做为兄弟元素）

jQuery移除元素

  1. .empty()
    1. 作用：清空子元素
    2. $("div").empty();
  2. .html()清空子元素
    1. $("div").html("");
  3. .remove()
    • 作用：把当前元素从页面中删除（”自杀”）
    • $(‘div’).remove();

jQuery克隆节点

  1. .clone()
    • 作用：用来 克隆一个节点，不传参数表示深度复制！
  2. 参数
    1. 不传参数，默认值是false，节点和内容都被克隆
    2. 参数true，节点内容和事件都被复制了
  3. 返回值：是一个jQuery对象

表单的操作

  1. 表单元素：
    1. input标签(text/radio/checkbox/button/submit/reset/password/file)
    2. select
    3. textarea
  2. .val()
    1. 作用：用来获取表元素的值
    2. 参数
      1. 不传入参数表示 读取
        • $("#txt").val();
        • $(“#txt”).val(“传入参数进行设置值”);
      2. 传入参数表示 设置

操作 文本内容

  1. .text()
  2. 作用： 用来读取或者是设置文本内容
  3. 获取内容
    • $(‘div’).text()
    • $(‘div’).html()
  4. 设置内容
    1. $(“div”).text( “陈奕迅” );
    2. 会把原来的内容清空，然后，再设置新的内容

获取和设置内容总结

  1. jQuery 上 .html()/.text()/.val()
  2. js中对应的， innerHMTL / innerText或者textContent / value
  3. 参数
    1. 有一个参数表示设置
    2. 没有参数表示获取

属性操作

  1. .attr()
  2. 作用：
    1. 用来设置或者是获取属性的值
    2. 这个方法用法跟 .css() 方法相同
  3. html的属性可能有多个，所以不管是设置还是读取都需要指定一个属性！
  4. 可以操作普通的属性或者 自定义的属性！
  5. code
    1. 获取属性
      1. $("a").attr("style")
    2. 设置属性
      1. $("a").attr("title", "这是设置的属性");
  6. .prop()特殊的属性
    1. 注意：checked、selected、disabled要使用 .prop() 方法。
    2. prop方法通常用来影响DOM元素的动态状态，而不是改变的HTML属性。
    3. 例如：input和button的disabled特性，以及checkbox的checked特性。
    4. 细节参考：http://api.jquery.com/prop/
    5. $("#cbx").prop("checked", false);

  7. 代码案例 7.1 样式 

     <br><hr>
 <a href="#">这是一个a链接，通过attr()设置title属性</a>
 <script>
     $(function(){
         /*需求一：
             通过attr()进行设置a的title属性
         */
         $("a").attr("title","这是通过attr设置的属性");

         /*
         需求二：
             点击按钮，进行设置选中和不选中
          */
         $("#btn1").click(function(){
             $("#cbx").prop("checked",true);
         });
         $("#btn2").click(function(){
             $("#cbx").prop("checked",false);
         });
     });
 </script>

jQuery其他的属性的操作

  1. height()/width()
    1. 与 .css() 的区别：height()/width() 方法的返回值是：数值类型
  2. .offset()位置操作
    1. 作用：用来获取或设置指定的jQuery对象相对于页面左上角的偏移
    2. 返回值：是一个对象，对象中包含了两个属性
      1. 一个left属性：获取相对于页面左边的距离
      2. 一个top属性： 获取相对于页面上边的距离
    3. 注意
      1. 设置偏移的时候，参数必须是一个对象
      2. 对象属性的值：只能是数值
      3. 定位
        • 设置偏移的时候，如果当前的元素没有定位或者是 static
        • 那么，jQuery会自动将其定位修改为：relative
        • 但是如果有定位，那么jQuery就不会修改当前元素的定位
      4. 代码 $("#outer").offset({left: 100, top: 100});
      5. 注意
        1. 有定位的情况
        2. 注意：不管有没有定位的父元素，都是相对于页面左上角的偏移
  3. .position()
    1. 注意： 只能读取，不能设置！
    2. 作用： 获取相对于有定位的父元素的偏移
    3. 如果想要设置位置，要通过 .css() 方法来设置！
    4. 返回值：也是一个对象
    5. 代码 console.log( $("#inner").position() );
  4. .scrollTop().scrollLeft() 获取或设置卷去的高度
    1. .scrollTop() 作用：获取或设置垂直方向被卷去的高度
    2. .scrollLeft() 作用：获取或设置水平方向被卷去的高度
    3. $(“.outer”).animate({scrollTop: 2000});

jQuery中的事件-绑定事件

js 绑定的事件

var dv = document.getElementById(“dv”);

  1. dv.onclick = function() {}
  2. W3C标准的事件绑定方式：
    • dv.addEventListener(eventName, handler, useCapture);
    • dv.addEventListener(“click”, function() { });
  3. IE中的事件绑定方式：
    • dv.attachEvent(“on”+eventName, handler)
    • dv.attachEvent(“onclick”, function() {});

jQuery中绑定事件的方式

  1. click / mouseenter / blur ….
  2. bind()
  3. delegate()
  4. on() ===> 重点

2.bind() 绑定事件

  1. 同时绑定两个事件， 事件处理程序相同
    • 注意：多个事件之间通过 空格 来分割！
    • $(“div”).bind(“click mouseenter “, function() { alert(“绑定了单击事件”);

  2. 同时绑定多个事件，事件处理程序不同

             $("div").bind({
         click: function() {
             alert("单击事件");
         },
         mouseenter: function() {
             alert("移上来事件");

         },
         mouseleave: function() {

             alert("离开事件");
         }
     });

  3. delegate 委托代理
    3.1 特点：能够支持给动态创建出来的元素绑定事件

         样式
     <body>
         <button>创建元素</button>
         <div></div>
         <p>这是p元素</p>
     </body>
		
     $("button").click(function() {
     $("body").append("<div></div>");
     });
		
     $("div").click(function() {
             alert("how are you ?");
         }); 3.2 为什么不支持给动态创建出来的元素绑定事件？？？
    • 问题： 这个事件是什么时候绑定的？
    • 页面加载的时候就绑定了事件
    • 通过 “div” 选择器获取到了：一个元素
  4. 解释
    • 这个例子中是让 body 代理绑定了 div 的事件
    • 因为 body 是一直存在的，然后，不管div是页面中已经存在的
    • 还是动态创建 出来的，都能够通过 事件冒泡 来达到触发事件的目的！

4.2 代码

$("body").delegate("p", "click", function() {
			alert("how old are you?");
}); - 参数
- 第一个参数：表示要触发事件的元素
- 第二个参数：表示事件类型
- 第三个参数：表示事件处理程序

  1. 代码

     <script type="text/javascript">
 $(function() {
     .on(事件名称, 触发事件的选择器, 事件处理程序)
     $dv.on("click", ".b", function() {});
		
     方式一：通过代理绑定事件的方式（支持动态创建出来的元素）
		
     通过这种方式绑定事件有什么优势？？
     1 支持给动态创建出来的元素绑定事件
     2 绑定事件的效率高、性能好
             比如：给100个li绑定事件，普通的方式需要绑定100次
                 通过on绑定事件只需要给 父元素ul绑定一次事件即可！
                 .on("click", "li", function() {})
     3 .on() 方法只能在 jQuery的1.7版本之后才能使用
     4 jQuery框架内部使用 on 统一实现了所有其他绑定事件方法
     5 兼容移动端 zepto.js 这个库，也支持on绑定事件！
		
     $("div").on("click", ".b", function() {
         alert("按钮！！");
     });

     方式二：同时绑定多个事件
     是给div元素绑定的事件，并且也是div元素本身触发事件
     没有限制哪个元素触发事件，也就是：任何在div元素中的内容都会触发
     这个事件！
     $("div").on("click", function() {
         console.log("事件执行了");
     });

     同时绑定两个事件，事件处理程序相同
     $("div").on("click mouseenter", function() {
         console.log("事件执行了");
     });	

     同时绑定了两个事件，并且事件处理程序不同
     $("div").on({
         click: function() {
             console.log("how are you ?");
         },
         mouseenter: function() {
             console.log("how old are you?");
         }
     });	

     $("input").click(function(){
         $("div").append( "<p class='b'>这是动态创建处理的p</p>" );
     });
 });  </script>

jQ中的事件解绑

<script type="text/javascript">
	$(document).ready(function() {
		绑定事件
		$("#btn1").on("click", function() {
			给div元素绑定事件
			$("div").on("click", function() {
				alert("饿了吗？");
			});
			$("div").on("mouseenter", function() {
				alert("饿了吗？ -------1");
			});

			通过代理事件绑定的方式
			$("div").on("click", "p", function() {
				alert("这是通过代理绑定的事件");
			});
			给元素自身绑定的事件
			$("div").on("click", function() {
				alert("饿了吗？");
			});
		});

		解绑事件
		$("#btn2").on("click", function() {
			$("div")
			如果使用的是on绑定的事件就用 off() 来解绑事件
			
			1 不传入参数，表示将所有的事件，全部都解绑
			$("div").off();

			2 传入参数：字符串形式的，事件名称
					用来解除某一个事件的绑定
			$("div").off("mouseenter");

			3 传入两个参数：
					第一个参数：表示要解除绑定的事件名称
					第二个参数："**", 用来指定只解除通过代理绑定的事件，
								给元素自身绑定的事件不会被移除！
			$("div").off("click", "**");
		});
	});
</script>

jQ中的事件对象

<script type="text/javascript">
	$(document).ready(function() {
		// 事件对象
		// 		事件不同，事件对象中的属性也是不同的！
		$("#btn1").on("click", function(cc) {
			// jQuery中的事件对象，是通过事件处理程序的参数来获得的！
			// 因为 event 是一个形参，所以，名字可以随意起
			console.log(cc);
		});

		$(document).on("keyup", function(e) {
			console.log(e);
		});
	});
</script>

案例按钮变色

<script>
$(function() {
    有三个事件与 按键相关： keydown / keypress / keyup
    1 给doucment文档绑定 keydown 事件
    
    创建一个对象，用来实现控制颜色
    var bgObj = {
        "82": "red",
        "72": "hotpink",
        "71": "green"
    };

    $(document).on("keydown", function(e) {
        // console.log(e.keyCode);

        // 2 展示按键的 值
        $("#keyCodeSpan").text( e.keyCode );

        3 根据按键的键值，来改变div的颜色
             改变颜色思路：
             1 使用if-else判断
             2 使用switch-case判断
             3 使用对象（键为：数值，值为：颜色值）

        4 设置默认颜色
        如果访问了对象中不存在的属性，属性的值为： undefined
        逻辑或：如果第一个表达式的值能够转化为布尔值false，就会返回第二个表达式的值
        $("#bgChange").css("background-color", bgObj[e.keyCode] || "gold");

    });
});
</script>

上午总结

<script type="text/javascript">
	1 append() / appendTo() 追加
	2 prepend() / prependTo() 插入元素
	3 before() / after()
	
	4 empty() / html("") 清空元素 / remove() 移除元素
	5 clone() 克隆元素
	6 val() / text() / html() 
	7 attr() / css() 一个参数表示获取属性，两个参数表示设置属性
	8 height() / width() 用来获取或设置高度和宽度
	9 offset() 获取是相对于页面的左上角，参数是一个对象
		 position()这个方法无法进行设置，需要通过css方法来设置样式
		 返回值：都是对象，有两个属性：top / left
	10 scrollLeft() / scrollTop() 
</script>

下午总结

<script type="text/javascript">
	1 jQuery中的事件- 绑定事件
			.on("click", function() {});
			.on("click mouseenter", function() {});
			.on({ click: function() {}, mouseenter: function() {} });
			.on("click", "li", function() {});
	
	2 jQuery中的事件- 解绑事件
			.off()		会将所有的事件全部解除绑定
			.off("click") 会解绑click事件
			.off("click", "**") 会解绑通过代理绑定的事件
			
			.bind() / unbind()
			.delegate() / undelegate()
	
	3 jQuery中的事件- 事件对象
</script> 10/28/2016 1:22:03 AM

上一篇 jQuery第二天css样式选择器及常用方法和动画

下一篇 jQuery第四天触发事件链式编程和隐式迭代多库共存插件插件

Comments

Content