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类型。默认值: 当前页地址。发送请求的地址。

  

原文地址:https://www.cnblogs.com/kuai-man/p/10839532.html