jQuery:轻量级js库,提供AJAX交互

1、$(document).ready(function(){.............})相当于onload事件JS

      简写$(function({.............});

2、var  val=$("div>p").html();获取文本值

      var  val=$("div>p").html("你好");设置文本值

      appendTo:增加元素,$("

增加的内容

").appendTo("body");

      attr:属性,设置或返回,$("body").attr("bgcolor","blue");

      hide():隐藏

      show():显示,$("FORM").show();

      find:复制一个函数对象,$("div")=div   var;       $(div).find("p").html();

      this.src="2.jpg":替换,each()所有都替换  

                $("img").each(function(){

                       this.src="2.jpg";

                 })

     eg();选择指定下标的匹配元素

     size()/length():获取标签数量长度

     val():获取表单字段的值,var   val=$("input").val()

3、选择器

      id选择器:$("#img_1").attr(src);

      类选择器:class,   $(".ps").size();

      通配符选择器:(*),    $("*").size();

      组合选择器:$("#img_2,#img_3").attr("width","300");

      层次选择器:

             获取当前元素中的指定元素:$("#div_1  p").get(2).innerHTML;

             获取元素级别的所有指定元素:$("#div_1  >p").get(2).innerHTML;

             选取下一个同辈元素:$("#img_1  +img").attr("src","1.jpg");

             选取跟在指定元素之后的所有的指定元素:$("#img_1~img").eq(1).attr("src","1.jpg");

      过滤选择器:

             选取第一个:$("img:first").attr("src","URL");

             选取最后一个:$("img:last").attr("src","URL");

             去除所有与给定选择器匹配的元素:$("img:not(.img_s)").attr("src","URL");

             索引偶数的元素:$("img:even").attr("src","URL");

             索引奇数的元素:$("img:odd").attr("src","URL");

             选取指定索引的元素:$("img:eq(1)").attr("src","URL");

             大于指定索引的元素:$("img:gt(0)").attr("src","1.jpg");

             小于指定索引的元素:$("img:lt(2)").attr("src","URL");

             选取所有标题元素:$(":header").eq(1).html();

             选取所有包含指定文本的元素:$(":header:contains("题")").eq(1).html();

             选择所有的空的指定标签:$("p:empty").eq(0).html("段落3");

             选取所有不包含指定冤死的标签:$("div:not(:has(p))").eq(0).html("不包含p标签");

             选择拥有子元素的元素:$("div:parent").eq(0).attr("style","color:red;");

             获取所有隐藏文本:$("input:hidden").eq(0).val();

             可见文本:$("input:visible").eq(0).val();

             获取含有指定值属性的元素:$("img[class]").eq(0).attr("src","1.jpg");

             选取属性值为指定值的元素:$("img[id=img-1]").attr("src","1.jpg");

             选取属性值不等于指定值的元素:$("img[id=img-1]").attr("src","1.jpg");

             选取属性值以指定值开始的元素:$("img[id=img]").attr("src","1.jpg");

             结束的元素:$("img[id=1]").attr("src","1.jpg");

             含有指定属性中字符的元素:$("img[id*=_]").attr("src","1.jpg");

             选取指定属性等于指定值或以指定值为前缀的元素:$("img[id=img]").attr("src","1.jpg");

             属性组合选择:含有id属性并以1结尾的元素,$("img[id][]id$=1").attr("src","1.jpg");

4、jQuery事件:

             $(function(){.................});加载函数

             $("#click").click(function(){...............});单击事件

             $("#foc").focus(function(){....................});获取焦点           

             $("#foc").blur(function(){.................});失去焦点

             $("#foc").keypress(function(){..................});键盘按下

             $("#img_1").mouseover(function(){.................});鼠标移入变化

             $("#img_1").mouseout()function(){..............};鼠标移出变化

             $("#paw").select(function(){..................});文本被选中

             $("#sel_1").chage(function(){....................});select菜单改变后弹出value值

             $("#form_1").submit(function(){...............});表单提交

             $("#bt_1").bind("click",function(){............});bind绑定事件

             $("#tx_1").bind({"focus":function(){获取焦点},"blur":function(){失去焦点}});绑定多个焦点

             $("#bt_2".click(function(){$("#tx_1").unbind("fous\\blur")}));解除绑定多个事件

             mouseenter():事件指针穿过被选中元素时发生

             mouseleave():与mouseenter()对应

5、通过.css方法设置元素样式

             $("#bt_3").click(function(){

                      $("body").eq(0).css("backgroundcolor":"blue");

             })

50、js\jquery函数:

http://www.w3school.com.cn/jquery/jquery_ref_effects.asp

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

你可能感兴趣的:(HTML标签)