zoukankan      html  css  js  c++  java
  • Jquery基础整理

      1.简单的JQuery

    (1)  $(document).ready(function(){           

        $(document).ready(mydays);

            alert(“加载完毕,请检查!”);              

          function mydays(){

            alert(“加载完毕,请检查!”)   };

    });                                          

    //注册事件的函数,和普通的Dom不一样,不需要再元素上面标记onload这样的事件。

    (2)当页面Dom元素加载完毕时执行代码,可以简写为:$(function(){ alert(“加载完成”) });

    (3)和onload类似,但是onload只能注册一次(window.onload=function….)(没有C#中的“+=“机制),后注册的取代先注册的,而ready可以多次注册都会被执行。

    (4)JQuery的ready和Dom的onload的区别:

      onload是所有Dom元素创建完毕,图片,CSS等加载完毕后才能被触发。ready则是Dom元素创建完毕后就被触发,这样可以提高网页的响应速度。

    1. JQuery提供的函数

    (1) $.map(array,fn) 对数组array中每个元素调用fn函数将逐个进行处理,fn函数将处理返回,最后得到一个新数组。

    例如:得到一个数组值是原数组值二倍的新数组

    var arr[3,4,7,8];

    var arr2=$.map(arr,function(item){  return item*2  });

    $.map不能处理Dictionary风格的数组。

    (2) $.each(array,fn) 对数组array中每个元素调用fn函数进行处理,没有返回值。

      var arr={“tom”:10,”jerry”:20,”lily”:30};

      $.each(arr,function(key,value){alert(key+”=”+value);});

      如果是普通风格的数组,则key的值是序列号。

    (3) 还可以省略function参数,这时候用this可以得到遍历的当前元素。

       var arr=[3,6,7];

       $.each(arr,function(){ alert(this);   });

    1. JQuery对象,Dom对象

    (1) JQuery对象就是通过JQuery包装Dom对象后产生的对象:alert($(“#div1”).html());。Dom对象要想通过JQuery进行操作,先要转换为JQuery对象。

    (2) $(“#div1”).html()等价于document.getElementById(“div1”).innerHTML;

    (3) $(“#div1”)得到的就是JQuery对象,JQuery对象只能调用JQuery对象封装的方法,不能调用Dom对象的方法,Dom对象也不能调 用JQuery对象的方法,所以这句话是错误的(alert($(“#div1”).innerHTML)),因为innerHTML是Dom对象的属 性。

    (4) Array是JS语言本身的对象,不是Dom对象,因此不需要转换为JQuery对象才能用。

    (5) 将Dom对象转换为JQuery对象的方法,$(Dom对象);当调用JQuery没有封转的方法时必须用Dom对象。转换方法:var domobj=jqobj[0]或者var domobj=jqobj.get(0)。

    (6) JQuery修改样式:$(“#div1”).css(“background”,”red”);  获得样式

    $(“#div1”).css(“background”);  修改value=$(“#un”).val(“abc”)。获得value;

    $(“#un”).val(),类似的获得,设置innerText,innerHTML用text()和html()。

    1. JQuery选择器

    (1) JQuery选择器用于查找满足条件的元素,比如可以用$(“#控件ID”)来根据控件ID获得控件的JQuery对象,相当于getElementById;

    $(“#div1”).html(“<font color=red>Hello</font>”);

    (2) $(“TagName”)来获取所有指定标签名的JQuery对象,相当于getElementByName;

     $(function(){

            $(“#btnclick”).click(function(){

                   $(“p”).html(“我们都是p”);              

    });      

      });                                

    隐式迭代,给所有选择出来的元素增加Click事件

    (3) css选择器,同时选择拥有样式的多个元素。

    <style type=”text/css”>

            .test{background-color:red; }

    </style>

    <script type=”text/javascript”>

            $(function(){

                   $(“.text”).click(function(){

           alert($(this).text());

    });        });

    </script>

    <p class=”test”>Test1</p>

    (4) 多条件选择器

            1) 多条件选择器:$(“p,div,span.menuitem”),同时选择p标签,div标签和拥有menuitem样式的.span标签元素。

            2) 注意:选择器表达式中的空格不能多,不能少,这是易错点。

            3) 层次选择器:

           $(“div li”)获取div下的所有li元素(后代,子,子的子)。

            $(“div>li”)获取div下的直接li子元素。

            $(“.menuitem+div”)获取样式名为menuitem之后的第一个div元素。

            $(“.menuitem~div”)获取样式名为menuitem之后的所有div元素。

    1. JQuery隐式迭代

    如何判断对象是否存在,JQuery选择器返回的是一个对象数组,调用text(),html(),click()之类的方法的时候其实是对数组中的每个 元素迭代调用每个方法,因此即使通过ID选择的元素不存在也不会报错,如果需要判断是否存在,因该这样 写:if($(“btn1”).length<=0){

         alert(“ID”为btn1的元素不存在,请您检查!);

    }

    1. JQuery节点遍历

    (1) next()方法用于获取节点后的第一个挨着的同辈元素 $(“.menuitem”).next(“div”);

      nextAll()方法用于获取节点后的所有同辈元素   $(“.menuitem”).nextAll(“div”);

    (2) siblings()方法用于获取所有的同辈元素。  $(“.menuitem”).siblings(“li”);

    1. JQuery基本过滤选择器

    (1) :first 选取第一个元素。$(“div :first”);  选取第一个<div>

    (2) :last 选取最后一个元素。  $(“div :last”)  选取最后一个<div>

    (3) :not(选择器)选取不满足”选择器条件的元素”   $(“input :not(.myclass)”);   选取样式名不是myclass的<input>。

    (4) :even,:odd  选取索引是奇数,偶数的元素。$(input:even)选取索引是奇数的<input>

    (5) :eq(索引序号),:gt(索引序号),:lt( 索引序号)选取索引等于,大于,小于索引序号的元素,比如 $(“input:lt(5)”)  选取索引小于5的<input>。

    (6) $(“:header”)选取所有的h1…..h6的元素。

    (7) $(“div:animated”); 选取正在执行动画的<div>元素

    (8) 属性过滤选择器

            $(“div[id]”)选取有ID属性的<div>

            $(“div[title=test]”)选取title属性为”test”的

    ,JQuery中没有对GetElementByName进行封装,用$(“input[name=abc]”);

            $(“div[title!=test]”)选取title属性不为”test”的<div>

            还可以选择开关,结束,包含等,条件还可以复合。

    (9) 表单对象选择器

            $(“#form1:enabled”);   选取id为form1的表单内所有启用的元素。

            $(“#from1:disabled”);   选取id为form1的表单内所有禁用的元素。

            $(“#form1:checked”);   选取所有选中的元素(Radio,CheckBox)。

            $(“selectLselected”);    选取所有选中的选项元素(下拉列表)。

    1. 元素的each

    JQuery元素也可以调用each方法,只是对$.each的简化调用。举例:显示选中的复选框

    1. JQuery表单选择器

    (1) $(“:input”);  选取所有的<input>,<textarea>,<select>和<button>元素, 和$(“input”)不一样,$(“input”)只能获得<input>控件。

    (2) $(“:text”);  选取所有的单行文本框,等价于$(“input:[type=text]”);

    (3) $(“:password”)选取所有的密码框,同理还有::radio,:checkbox,:submit,:image,:reset,:button,:file,:hidden。

    1. JQuery的Dom操作

    (1) 使用html()方法读取或者设置元素的innerHTML;

            alert($(“a:first”).html());              alert($(“a:first”).html(“Hello”));

    (2) 使用text()方法读取或者设置元素的innerText.

            alert($(“a:first”).text());               alert($(“a:first”).text(Hello));

    (3) 使用attr()方法读取或者设置元素的属性,对于JQuery没有封装的属性用attr进行操作。     alert($(“a:first”).attr(“href”));

            $(“a:first”).attr(“href”,”http://www.baidu.com&rdquo;);

    (4) 使用removeAttr删除属性

    1. 动态创建Dom节点

    (1) 使用$(html字符串)来创建Dom节点,并且返回一个JQuery对象,然后调用append等方法将新创建的节点添加到Dom中。

            var link=$(“<a href=’http://www.baidu.com’>百度</a>&rdquo;);

            $(“div:first”).append(link);

    $()创建的就是一个JQuery对象,可以完全进行操作。

            var link=$(“<a href=’http://www.baidu.com’>百度</a>&rdquo;);

            link.text(“百度”);

            $(“div:first”).append(link);

    append()方法用来在元素的末尾追加元素。

    prepend()在元素的开始添加元素。

    after() 在元素之后添加元素。

    before()在元素之前添加元素。

    1. 删除节点

    (1) remove()删除选择的节点

    $(“ul li.textitem”).remove();  删除ul下的li中有testitem样式的元素。

    remove方法的返回值是被删除的节点对象,还可以继续使用被删除的节点,比如重新添加到其他其他节点下:

           var list=$(“#ulsite li”).remove();

           $(“#ulsite2”).append(list);

    (2) empty()是将节点清空

    1. 节点操作

    (1) 替换节点

            $(“br”).replaceWith(“<hr />”);  注解:<br />替换为<hr />

    (2) 包裹节点

    warp()方法用来将所有元素逐个用指定标签包裹。

    $(“b”).warp(“<font color=’red’></font>”)将所有的粗体红色显示

    1. JQuery样式操作

    (1) 获取样式 attr(“class”)。

    (2) 设置样式 attr(“class”,”myclass”)。

    (3) 追加样式 addClass(“myclass”)。

    (4) 移除样式  removeClass(“myclass”)。

    (5) 切换样式(如果存在样式则去掉样式,如果没有样式则添加样式)  taggleClass(“myclass”)。

    (6) 判断是否存在样式  :hasClass(“myclass”);

    16  RadioButton操作

    (1) 取得RadioButton中的选中值

    $(“input[name=gender]:checked”).val();

    <input id=”Radio1”checked=”checked” name=”gender” type=”Radio” value=”男” />男

    <input id=”Radio2”checked=”checked” name=”gender” type=”Radio” value=”女” />女  <input id=”Radio3”checked=”checked” name=”gender” type=”Radio” value=”保密” />保密

    (2) 设置RadioButton的选中值

    $(“input[name=gender]”).val([“女”]);或者$(“:radio[name=gender]”).val([“女”]);

    注释:val中参数的[]不能省略。

    (3) 对RadioButton的选择技巧对于CheckBox和Select列表框也适用。

    (4) 除了可以使用val批量设置RadioButton,CheckBox等的选中以外,还可以设定checked属性来单独设置控件的选中状态。

    $(“#btn1”).attr(“checked”,true);

    17  JQuery事件

    (1) JQuery中的事件绑定  $(“#btn”).bind(“click”,function(){  });,每次都这么调用太麻烦,所以JQuery可以用$(“#btn”).click(function(){  })来进行简化。

    (2) 合成事件hover,hover(enterfn,leavefn); 当鼠标放在元素上时调用enterfn方法,当鼠标离开元素的时候调用leavefn方法。

    (3) 事件冒泡  JQuery中也向JavaScript一样是事件冒泡。

    (4) 调用事件对象的stopPropagation()方法终止冒泡。  e.stopPropagation();

    注:如果想要获得事件相关的信息,只要给响应的匿名函数增加一个参数e,e就是事件对象。

    $(“tr”).click(function(e){

    alert(“tr被点击”); e.stopPropagation();

    });            注意:函数的参数是e.

    (5) 阻止默认行为:有的元素有默认行为,比如超链接点击后会转向新连接,提交按钮会默认提交表单,如果想阻止默认行为只有调用事件对象的PreventDefault()方法和window.event.return.value=false效果一样。

    $(“a”).click(function(e){

    alert(“所有超链接暂时全部禁止”); e.PreventDefault();

    });

    (6) 属性  pageX,pageY,target获得触发事件的元素(冒泡的起始,和this不一样)。

    which如果是鼠标事件获得按键(1 左键,2 中键,3 右键)。altkey、shiftkey、ctrlkey获得alt,shift,ctrl是否按下,为bool值。keycode(键盘码,小键盘的1 和主键盘的keycode不一样),charcode(ASC码)属性发生事件时的keycode,charcode。

    (7) 移除事件绑定  bind()方法即可移除元素上所有绑定的事件,如果unbind(“click”)则只移除click事件的绑定。  bind  :  +=   unbind :  -=

    (8) 一次性事件:如果绑定的事件只想执行一次随后立即unbind.,可以使用one()方法进行事件绑定。

    18  JQuery鼠标

    (1) 获得发生事件时鼠标的位置

    $(document).mousemove(function(){

    document.title=e.pageX+”,”+e.pageY;

    });

    (2) 在mousermove,clcik等事件的匿名响应函数中如果指定一个参数e,那么就可以从e读取发生事件时的一些信息,比如对mousemove等鼠标事件来说,就可以读取e.pageX,e.pageY来获得发生事件时鼠标在页面的坐标

    注解:body只是元素的显示范围,document是整个文档。

    19  JQuery动画

    show(),hide()方法是显示,隐藏元素,用toggle()方法在显示,隐藏之间切换。

    $(“:button[value=show]”).click(function(){    $(“:button[value=hide]”).click(function(){

    $(“div”).show();                          $(“div”).hide();

    });                                     });

    注解:如果show(),hide()方法不带参数则是立即显示,立即隐藏,如果指定速度参数,则会用指定时间进行动态显示,隐藏,单位为毫秒,也可以使用三个内置的速度。

    fast(200毫秒),normal(400毫秒),slow(600毫秒)。

    20  JQuery插件  JQuery Cookie

    (1) 什么是Cookie  Cookie就是保存在浏览器上面的内容,用户在这次浏览页面的时候向Cookie中保存文本内容。下次在访问页面的时候就可以取出来上次保存的内容,这 样就可以得到上次”记忆的内容”。Cookie不是JQuery特有的概念,只不过是JQuery把它简化的更好用而已。

    (2) Cookie需要浏览器的支持,浏览器的Cookie是可以禁用的,如果禁用了Cookie就不能使用了,不过一般不用考虑禁用Cookie的情 况,Cookie的几个特征,Cookie是与域名相关的,所以163.com不能读取baidu.com记录的Cookie,因为如此读取,设置 Cookie的时候不用担心不同域名Cookie的冲突,一个域名能写入的Cookie总尺寸是有限制的,一般是几千字节,能写入的Cookie总条数一 般是几十条,超过以后浏览器自己会根据自己的策略移除一些Cookie,Cookie不是写入以后一定下一次能读取出来,浏览器可能会定期清除,用户也可 以手动清除。

    (3) Cookie就是存储在浏览器上面的一些数据。

    21  JQuery Cookie使用

    (1) 使用方法,Cookie保存的是键值对。

    1) 添加JQuery.Cookie.js

    2) 设置值, $.cookie(“名字”,”值”)。 Cookie中保存的值都是文本

    3) 读取值 var v=$.cookie(“名字”);

    4) $.cookie(“用户名”,”Tom”);在同域名的另外一个页面下面也能读到。

    (2) 设置值的时候还可以指定第三个参数, $.cookie(“名字”,”值”,{expires:7,path:’/’,domain:’itcast.cn’,secure=true});  expires表示要求浏览器保留Cookie几天,这个值只是给浏览器的建议,可能没到时间已经被清除了。

  • 相关阅读:
    Bit Manipulation
    218. The Skyline Problem
    Template : Two Pointers & Hash -> String process
    239. Sliding Window Maximum
    159. Longest Substring with At Most Two Distinct Characters
    3. Longest Substring Without Repeating Characters
    137. Single Number II
    142. Linked List Cycle II
    41. First Missing Positive
    260. Single Number III
  • 原文地址:https://www.cnblogs.com/kloseking/p/3175747.html
Copyright © 2011-2022 走看看