zoukankan      html  css  js  c++  java
  • jq05--选择器与事件

    我们接着来学习一些jq的知识,现在说一下jq选择器与jq事件。

    1.jq选择器:

        $("*")            所有元素
        $("#eid")        id选择器
        $(".ecl")        所有class="ecl"的元素
        $("p")            所有<p>元素
        $(".intro.demo")所有class="intro"且class="demo"的元素
        
        $("p:first")    第一个<p>元素
        $("p:last")        最后一个<p>元素
        
        $("ul li:eq(3)")    列表中的第四个元素(index从0开始)
        $("ul li:gt(3)")    
        $("ul li:lt(3)")
        
        $(":header")    所有标题元素<h1> - <h6>
        
        $("[href]")        所有带有href属性的元素
        $("[href='#']")    所有href属性的值等于"#"的元素
        
        $(":input")        所有<input>元素
        
        $(":enabled")    所有激活的表单元素
        $(":disabled")    所有被禁用的元素
        $(":selected")    所有被选取的元素    
        $(":checked")    所有被选中的元素
    

     
    2.事件
        2.1 bind()            向匹配元素附加一个或更多事件处理器
        $(selector).bind(event,data,function)

    	//$(selector).bind(event,data,function)
    	$("button").bind("click",function(){
    						$("p").slideToggle();
    					});
    	//$(selector).bind({event:function, event:function, ...})
    	$("button").bind({
    		click:function(){$("p").slideToggle();},
    		mouseover:function(){$("body").css("background-color","red");},  
    		mouseout:function(){$("body").css("background-color","#FFFFFF");}
    	});
    

       2.2 blur()            当元素失去焦点时发生blur事件

    	$("input").blur(function(){
    		$("input").css("background-color","#D6D6FF");
    	});
    

      2.3 change()        当元素的值发生改变时发生change事件。该事件仅适用于文本域(text field),以及 textarea和select元素。当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生。

    	$(".field").change(function(){
    		$(this).css("background-color","#FFFFCC");
    	});
    

       注意:onchange与onclick是js事件,可在标签上作为标签属性使用。change与click是jq事件。

      2.4 click()    dblclick()    点击事件与双击事件

        $("button").click(function(){
            $("p").slideToggle();
        });
        $("button").dblclick(function(){
            $("p").slideToggle();
        });
    

      2.5 focus()  当元素获得焦点时,发生 focus 事件

    	$("input").focus(function(){
    		$("input").css("background-color","#FFFFCC");
    	});
    

      2.6 ready()  文档就绪事件

         resize()  调整浏览器窗口的大小时,发生 resize 事件

    	//ready()函数仅能用于当前文档,因此无需选择器
    	$(document).ready(function(){
    		...
    	});
    	$().ready(function(){
    		...
    	});
    	$(function(){
    		...
    	});
    
    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    x=0;
    $(document).ready(function(){
    $(window).resize(function() {
      $("span").text(x+=1);
    });
    
    });
    </script>
    </head>
    <body>
    <p>窗口大小被调整过 <span>0</span> 次。</p>
    <p>请试着重新调整浏览器窗口的大小。</p>
    </body>
    </html>
    

     3.事件与效果:

      hide()  show()

      fadeIn()  fadeOut()  fadeTo()

      slideDown()  slideUp()  slideToggle()

      animate()  stop()

      toggle()

    4.事件与文档操作:

      before()  after()

      append()  prepend()

      addClass()  removeClass()  toggleClass()

      attr()

      remove()

      val()  html()  text()

    5.JQuery Ajax:

      JQuery.load()

      JQuery.get()

      JQuery.post()

      JQuery.ajax()  执行异步http请求

    其中ajax是jQuery底层 AJAX 实现,简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。

    	$(document).ready(function(){
    		$("#b01").click(function(){
    			var htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
    			$("#myDiv").html(htmlobj.responseText);
    		});
    	});
    

     jQuery.ajax([settings]):

      options  可选,object类型,ajax请求设置

      async   Boolean值,默认值为true,异步请求。如果需要发送同步请求,请将此选项设置为 false

      cache  Boolean值,默认值为true,dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面

      contentType  String类型,默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型

      context  Object类型,这个对象用于设置 Ajax 相关回调函数的上下文。

      data    object类型。发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式

      dataType  string类型。预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML。可用值有“xml”、“HTML”、“script”、“json”、“text”

      success  function类型。请求成功后的回调函数

      type    string类型。默认值: "GET")。请求方式 ("POST" 或 "GET"、“PUT”、“DELETE”)

      url      string类型。默认值: 当前页地址。发送请求的地址。

      

  • 相关阅读:
    linux解压缩各种命令
    memset
    STRUCT_OFFSET( s, m )宏
    请问这个宏是什么意思 #define NOTUSED(v) ((void) v)?
    typedef特殊用法:typedef void* (*fun)(void*)
    localtime、localtime_s、localtime_r的使用
    Git使用(一)
    【转】linux gcc _attribute__((weak)) 简介及作用
    我的技术博客
    .net 4.0(2.0)“检测到有潜在危险的 Request.Form 值”的解决方法
  • 原文地址:https://www.cnblogs.com/kuai-man/p/10839532.html
Copyright © 2011-2022 走看看