jQuery基础知识

最新推荐文章于 2024-05-06 10:07:26 发布

陈皮小桔

最新推荐文章于 2024-05-06 10:07:26 发布

阅读量418

点赞数

分类专栏：学习笔记文章标签： jQuery基础知识

本文链接：https://blog.csdn.net/qq_40146447/article/details/90202000

版权

学习笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、使用JQuery

<script>
    $(document).ready(function(){
        alert("hello word");
    })
</script>
在这段代码中，$(document).ready()语句是当DOM已经加载，并且页面已经完全呈现时，会发生ready事件。由于该事件在文档就绪后发生，因此将其他的JQuery事件和函数置于该事件中是非常好的做法，例如：


  $(document).ready(function(){
        <!-- 执行代码 -->
    })
    类似下面的JS代码
    window.onload=function(){`
        <!-- 执行代码 -->
    };

1.4 语法结构
通过"$(document).ready()" 可以使用，这条语句主要包含3大部分： $() 、 d o c u m e n t 和 r e a d y (), 分别被称为工厂函数、选择器和方法 1.4.1 工厂函数$ ()
工厂函数就是指这些内置函数都是类对象，当调用他们时，实际上是创建了一个类实例，意思是当调用这些函数，实际先利用类创建了一个对象，然后返回这个对象。在JS中没有严格的“工厂函数”,但在JS中可以利用函数模拟类。
$(“div”) 用于获取文档中全部的div
$("#username") 用于获取文档中的ID属性值为username的一个元素；
$btn_grey) 用于获取文档中使用css类名为btn_grey的所有元素； 1.4.2 选择器选择器是jQuery的最基础功能，基本语法：$ (seletor)
ID 选择器、$(“id”)
$("#Name") //获取DOM中的ID名为Name的元素

$(document).ready(function(){
	$("input[type='button']").click(function(){
		var inputValue = $("#testInput").val();
		alert(inputValue);
		});
});

元素选择器
$(“element”) element:要查询元素的标记名
标签选择器、 $(“p”) //获取DOM中所有P的元素
类选择器的用法如下：
$(".className") //获取DOM中class类名为className的元素
复合选择器
使用方法
$(“selector1,selector2,selectorN”);
通配符选择器
所谓的通配符，指的是符号“”；使用$("")将取得页面上所有的DOM元素，集合jQuery包装集。
层级选择器
ancestor desceden选择器： $(" a n c e s t o r d e s c e n d a n t "); a n c e s t o r : 任何有效的选择器； d e s c e n d a n t ： a n c e s t o r 所指定元素的后代元素；示例：$ (“ul li”)

parent>child 选择器
使用方法： $(" p a r e n t > c h i l d "); 示例：$ (“form>input”).
prev+next选择器
相同级别的元素；
prev ~siblings 选择器
使用方法： $(" p r e v s i b l i n g s "); p r e v : 任何有效的选择器； s i b l i n g s ： p r e v 之后的所有同辈元素；如：$ (“div~ul”);

过滤选择器
1.4.3 事件处理方法
jQuery的最重要的方法就是事件处理方法，主要用来绑定DOM元素的事件和事件处理方法。在JQuery中，还有许多基础事件，如鼠标事件（click)、键盘事件(mouseover())和表单事件(onblur)等，都可以通过这些事件方法进行绑定。示例：

    <style>
        li{list-style: none;line-height: 24px;cursor: pointer;}
        #current{background: red;font-weight: bold;color: #fff;}
        </style>
    </head>
    <body>
        <ul>
            <li id="current">简介</li>
            <li>方法</li>
            <li>语法</li>
            <li>对象</li>
            <li>事件</li>
        </ul>
        <script type="text/javascript">
            $(document).ready(function(){
                $("li").click(function(){
                    $("#current").addClass("current")
                })
            })
        </script>

    addClass()方法是jQuery中用于进行CSS操作的方法之一，作用是为每个匹配的元素添加指定的样式类名。语法格式如下：jQuery对象.addClass([样式名])，其中样式名可以一个，可以多个，多个用空格隔开。
    注意：addClass选择器与使用选择器获取DOM元素不同，获取ID为current元素时，current前需要加ID符号#；而使用addClass()添加class为current的类样式时，该类名前不带有类符号"."。
    事件绑定
    可以使用bind()方法
    bind(type,[data],fn)    //type事件类型；data：额外数据对象；fn：绑定的事件处理程序。

$(“input:button”).bind(“click”,function(){alert(‘您单击了按钮’);});

1.5 jQuery编码风格
1.5.1 $的作用
    $是jQuery程序的标志，不仅用作选择器，还可以用作jQuery的工具函数前缀；
1.5.2 连缀的编程模式
    为了避免过度使用临时变量或者不必要的重复代码，在大多数jQuery代码中采用连缀的编程模式，它可以对一个对象进行多重操作，并将操作结果返回给该对象，以便应用于下一次操作。示例：


    <style>
    h2{padding: 5px;}
    p{display: none;}
</style>
</head>
<body>
    <h2>什么是jQuery?</h2>
    <p><strong>解答：</strong>
    jquery是继Protype之后又一个优秀的JavaScript库，是由美国人John Resig 于2006年创建的开源项目。</p>
    <script>
        $(document).ready(function(){
            $("h2").click(function(){
                $("h2").css("background-color","red").next().css("display","block");
            });
        });
    </script>

单击

时，为它添加红色的背景，并为紧随其后的
添加样式，使隐藏的
元素显示出来，这就是jquery连缀的编程模式，出现的css样式，也就是jquery中用于css操作的方法之一，它的作用是为匹配的元素添加css样式，语法格式(“属性”,“属性值”);
若要使用css()方法为页面中的
元素设置文本颜色为蓝色，可以写作：`$("p").css("color","blue")`
注意：css()与addClass()方法的区别如下：
css()方法为所匹配的元素设置给定的CSS样式；
addClass()方法为所匹配的元素设置一个或者多个类，该方法不会移除已经存在的类，仅在原有基础上追加新的样式；建议使用addClass()方法为元素添加样式；
1.6 DOM对象和JQuery对象
每一个(X)HTML页面都有一个DOM,每一个DOM都可以表示成一棵树；
1.6.1 DOM模型

   <body>
      <h2>DOM模型示例</h2>  
      <p title="选择你喜欢的零食">你最喜欢的颜色是什么？</p>
      <ul>
          <li>红色</li>
          <li>蓝色</li>
          <li>粉色</li>
      </ul>
      <img src="" alt="">
      <strong>我喜欢的颜色是绿色，你呢？</strong>
    </body>

1.元素节点

元素是根元素，其他元素是子元素 2.文本节点就是HTML中的文字内容，在HTML DOM中，节点总包含在元素节点内部，但并非所有元素节点都包含文本节点。 3.属性节点如

元素中的title和元素中的src和alt属性就是属性节点，属性节点属于元素节点的子节点。

1.6.2 DOM对象
在JS中可以使用getElementsByTagName()或者getElementById()来获取元素节点，通过该方式得到DOM元素就是DOM对象，DOM对象可以使用JS中的方法。代码如下：

 var objDOM = document.getElementById("id"); //获得DOM对象
    var objHTML = objDOM.innerHTML;
    //使用JS中的innerHTML属性

1.6.3 jQuery对象
jQuery对象就是通过jQuery包含DOM对象后的产生的对象，它能够使用jQuery中的方法；如

$("#titlie").html();
等同于如下代码：
document.getElementById("title").innerHTML;

1.6.4 jQuery对象与DOM对象的相互转换
jQuery对象转换为DOM对象的主要原因是：DOM对象包含了一些jQuery对象没有包含的元素；要使用这些元素就必须进行转换，jQuery对象的成员丰富，通常把DOM对象转换为jQuery对象。
在讨论jQuery对象与DOM对象的相互转换之前，先约定定义变量的风格，如果获得的对象是jQuery对象，则在变量前加$,例如： var $variable = jQuery对象；
如果获取的对象是DOM对象，则定义如下：
var variable = DOM对象；
jQuery对象与DOM对象的相互转换的实际应用：

1.jQuery对象转换为DOM对象
jQuery提供了两种方法将一个jQuery对象转换为一个DOM对象，即[index] get[index]
(1)通过[index]方法得到相应的DOM对象

 var $txtName = $("#txtName");  //jQuery对象
    var txtName = $txtName[0];   //DOM对象
    alert(txtName.checked); //检测这个checkbox是否被选中了

(2)通过get[index]方法得到相应的DOM对象

var $txtName = $("#txtName");  //jQuery对象
      var txtName = $txtName.get(0);   //DOM对象
      alert(txtName.checked); //检测这个checkbox是否被选中了

2.DOM对象转换为jQuery对象

 var txtName = document.getElementById("txtName"); //DOM对象
    var $txtName = $(txtName);  //jQuery对象

二、JQuery选择器

2.1jQuery选择器概述
2.4jQuery选择器注意事项
1、选择器中含有特殊符号的注意事项
会遇到含有"#“和”."等特殊的字符，如果按照普通字符处理，会出现错误，所以需要将转义符转义；
代码如下：

<div id="id#a">aa</div>
  <div id="id[2]"><i class="cc cc-BY"></i></div>
  <script>
    $("#id\\#a");
    $("#id\\[2\\]") 
  </script>

2.选择器中含有空格的注意事项
var $b_a = $(".box.hidden");//带空格jQuery选择器
var $b_b = $(".box.hidden");//不带空格jQuery选择器

三、jQuery中的事件与动画

3.1事件
3.1.1基础事件
单击事件：click(fn)
按下键盘触发事件：keydown(fn)
失去焦点事件：blur(fn)
fn表示绑定的函数
1.window事件
window事件就是当用户执行某些会影响某些浏览器的操作时，而触发的事件，在jQuery中，常见的window事件有文档就绪事件，它对应的方法就是ready();
2.鼠标事件
鼠标事件就是当用户在文档上移动或单击鼠标时而产生的事件，常用的鼠标事件有click,mouseover,mouseout
示例：

<div id="nav">
  <ul>
    <li a href="#">新浪</li>
    <li a href="#">搜狐</li>
    <li a href="#">凤凰网</li>
    <li a href="#">腾讯网</li>
    <li a href="#">网易</li>
    <li a href="#">百度</li>
  </ul> 
  </div>
  <script>
    $(document).ready(function(){
      $("#nav li").mouseover(function(){ //当鼠标移过#nav li元素时
        $(this).addClass("heightlight");   //为li元素添加样式
      });
      $("#nav li").mouseout(function(){ //当鼠标移出#nav li元素时
        $(this).removeClass(); //移除S鼠标所在li元素全部的样式
      });
    });
  </script>

在函数内部，this表示指向调用这个方法的DOM对象，在上例中this代表鼠标事件关联#nav li元素
3.键盘事件
指用户按下键盘未释放时、单击键盘时和键盘按下再放开时发生的事件，键盘事件有onkeydown、onkeypress和onkeyup等
keydown事件发生在键盘被按下的时候，keyup发生在键盘被释放的时候，当keydown事件产生可以打印的字符时，在keydown和keyup之间会触发另外一个事件–keypress事件，当按下键重复产生字符时，在keyup事件之前可能产生很多的keypress事件。keypress是较为高级的文本事件，它的事件对象指定产生的字符，而不是按下的键。

 <fieldset>
      <legend>登录</legend>
      <dl>
        <dt>用户名</dt>
        <dd><input id="userName" type="text"></dd>
      </dl>
      <dl>
        <dt>密码</dt>
        <dd><input id="password" type="password"></dd>
      </dl>
      <dl>
        <dt></dt>
        <dd><input type="submit" value="登录"></dd>
      </dl>
      <span id="events"></span>
  </fieldset>
  <script type="text/javascript">
    $(document).ready(function(){
      $("[type=password]").keyup(function(){
        $("#events").append("keyup");
      }).keydown(function(e){
        $("events").append("keydown");
      }).keypress(function(){
        $("events").append("keypress");
      });
      $(document).keydown(function(){
        if(event.keyCode=="13"){     //按enter键
          alert("您确定要提交信息吗？");
        }
      });
    });
  </script>

$(d o c u m e n t) . k e y d o w n () 表示键盘事件作用于 h t m l d o m 中的任意对象，$ ("[type=password]").keyup()表示键盘事件是对密码框起作用；
4.表单事件
表单事件是除了用户选取单选框、复选框产生的click事件外（当元素获取焦点时，会触发focus事件，失去焦点时，会触发blur事件），同时，它也是所有事件类型中最稳定、且支持最稳定的事件之一，示例：

 <body>
  <div id="login">
    <fieldset>
      <legend>用户登录</legend>
        <p>
          <label>用户名：</label>
          <input name="member" type="text">
        </p>
        <p>
          <label>密码：</label>
          <input name="password" type="text">
        </p>
        <p>
          <label>验证码：</label>
          <input name="code" type="text" class="code">
          <img src="images/code.jpg" width="80" height="30"/><a href="#">换一张</a>
        </p>
        <p>
          <input name="" type="button" class="btn" value="登录">
          <a href="#">注册</a><span>|</span><a href="#">忘记密码？</a>
        </p>
      
    </fieldset>
  </div>
  <script type="text/javascript">
    $(document).ready(function(){
      $("[name=member]").focus(function(){
        $(this).addClass("input_focus");
      });
      $("[name=member]").blur(function(){
      $(this).removeClass("input_focus");
      });
    });
  </script>

removeClass()是一个与addClass()相对的方法，作用是移除添加在元素上的类样式，两者导入类样式的语法没有区别。
3.1.2复合事件
jQuery中的多数事件处理方法都会直接响应JS的本地事件。但是，也有少数出于跨浏览器优化和方便性考虑而添加的自定义处理程序。hover()方法就是自定义的事件处理程序。由于它是截取组合的用户操作，并且以多个函数作为响应，因此被称为复合事件处理程序。
在jQuery中，hover()方法可以接受两个函数参数。第一个函数会在鼠标指针进入被选择的元素时执行，而第二个函数会在鼠标指针离开该元素时触发，该方法相当于mouseover与mouseout事件的组合，其语法格式如下：
hover(enter,leave);
示例：代码如下：

  $(document).ready(function(){
    $("#myaccound").hover(function(){
      $("#menu_1").css("display","block");
    },
    function(){
      $("#menu_1").css("display","none");
    }
  });

3.2 绑定事件与移除事件
jQuery的基础事件还包括绑定事件与移除事件，它们主要用于绑定或移除其他基础事件了，如click mouseover mouseout blur等，同时，也可以绑定或者移除自定义事件。
在需要为匹配的元素一次性绑定和移除一个或多个事件时，可以使用绑定事件方法bind()和移除事件方法unbind();
3.2.1绑定事件
在JQuery中，如果需要为匹配的元素同时绑定一个或者多个事件，可以使用bind()方法，格式如下：
bind(type,[data],fn), type为事件类型，主要包括blur focus click mouseout等基础事件，此外，还可以是自定义事件；[data]可选参数，作为event.data属性值传递给事件对象的额外数据对象；fn处理函数，用于绑定的处理函数。
1.绑定单个事件
可以使用click()或bind()来完成单击按钮，为所有

元素添加#f30的背景色，下面就使用bind()的方法来实现这个功能，代码示例：

<h1>嫣然天使基金</h1>
  <h2>简介</h2>
  <p>nidjadhjahajja</p>
  <h2>主图2</h2>
  <p>qdwDffwergs</p>
  <h2>荣誉奖项</h2>
  <ul>
    <li>teb1iesd</li>
    <li>dsafafa</li>
    <li>afaffaf</li>
  </ul>
  <input name="event_1" type="button" value="绑定单个事件"/>
  <script type="text/javascript">
    $(document).ready(function(){
      $("input[name=event_1]").bind("click".function(){
        $("p").css("background-color","#F30");
      });
    });
    </script>

2.同时绑定多个事件
使用bind()方法除了可以一次绑定一个事件，还可以同时绑定多个事件，

<script type="text/javascript">
    $(document).ready(function(){
      $("input[name=event_1]").bind({
        mouseover:function(){
          $("ul").css("display","none")
        },
        mouseout: function(){
          $("ul").css("display","block");
      }
      });
    });
  </script>

3.2.2移除事件
由于移除事件和绑定事件是相对的，所以在JQuery中为了匹配移除单个或多个事件，可以使用unbind()的方法，其语法格式如下：

 unbind([type],[fn])

3.3 动画
3.3.1控制元素显示和隐藏
基本的.hide()和.show()方法不带任何参数，可以把它们想象成类似的.css(‘display’,‘string’)方法的简写方式，其中string是适当的显示值，不错，这两个方法的作用就是立即隐藏或显示匹配的元素的集合，不带有任何动画效果。
1.控制元素显示
在JQuery中，show()方法控制元素的显示，它会将匹配的元素集合的display属于恢复为应用display:none之前，在不设置时间的情况下，show()等同于$(selector).css("display","block"),它除了控制元素的显示以外，还可以定义显示元素时的显示速度，show()的语法格式如下：$(selector).show([speed],[callback]),
speed可选，规定元素从隐藏到完全可见的速度，默认为0；可能值：毫秒（如1000）、slow、normal、fast.
callback:可选，show函数执行完之后，要执行的函数；

<body>
      <div id="cart">
        <table width="600" border="1" cellpadding="0" cellspacing="0">
          <tr>
            <th><input type="checkbox"/>全选</th>
            <th>商品信息</th>
            <th>数量</th>
            <th>操作</th>
          </tr>
          <tr>
            <td><input type="checkbox"></td>
            <td><img src="images/004.jpg" width="100px"/><a href="#">家具</a></td>
            <td>￥260元</td>
            <td><input type="text" value="1"></td>
            <td><a href="#" id="del">删除</a></td>
          </tr>
        </table>
        <div class="tipsbox" style="display:none">
          <p>确定要删除吗？</p>
          <p>
            <input name="confirm" type="button" value="确认" class="btns">
            <input name="cancel" type="button" value="取消" class="btns">
          </p>
        </div>
      </div>
    <script>
      $(document).ready(function(){
        $("#del").click(function(){
          $(".tipsbox").show("slow");
        });
        $("input[name=cancel]").click(function(){
          $(".tipsbox").hide("fast");
        });
      });
    </script>

3.3.2改变元素的透明度
改变其透明度，可以使用.fadeIn()和fadeOut()两个方法；
1.控制元素淡入，
在jQuery中，如果元素是隐藏的，可以使用fadeIn()方法控制元素淡入，它可以控制元素淡入时效果的显示速度，fadeIn（）方法的语法格式如下；

$(selector).fadeIn([speed].[callback]);示例如下:<img src="../jQuery/image/bookcover.png" style="display:none">
  <input name="fadein_btn" type="button" value="淡入">
  <input name="fadeout_btn" type="button" value="淡出">
  </img>
<script>
  $(document).ready(function(){
    $("input[name=fadeIn_btn]").click(function(){
      $("img").fadeIn("slow")
    });
  });
  2.控制元素淡出
   $(document).ready(function(){
    $("input[name=fadeIn_btn]").click(function(){
      $("img").fadeIn("slow")
    });
      $("input[name=fadeOut_btn]").click(function(){
      $("img").fadeOut(1000)
    });
  });

3.3.3 改变元素的高度
改变元素高度的方法是slideUp()和slideDown()。当调用slideDown()方法时，若元素的display属性值为none,这个元素会自上而下延伸显示，而slideUp()方法正好相反，元素从下而上缩短直至隐藏。
使用slideUp()方法与slideDown()方法制作效果如图：

 <div id="box">
    <h2>小王子</h2>
    <div class="txt">
      <p>本书讲述了小王子从自己的星球出发前往地球的过程中，所经历的各种历险</p>
    </div>
  </div>
<script>
  $(document).ready(function(){
    $("h2").click(function(){
      $(".txt").slideUp("slow");
      $(".txt").slideDown("slow");
    });
  });
</script>

四、使用JQuery操作DOM
主要分为样式操作、内容操作、节点操作、节点操作又包含节点本身的操作、属性操作、节点遍历和CSS-DOM操作。其中最核心的部分是节点操作和节点遍历。
4.2 样式操作
在jQuery中，可以使用CSS()方法为指定的元素设置样式值，其语法格式如下：
css(name,value);//设置单个属性
css({name:value,name:value,name:value…}) //同时设置多个属性值，
4.3 追加样式和移除样式
1.追加样式
除了使用css()方法可以为元素添加样式外，还可以使用addClass()方法为元素追加类样式，其语法格式如下：addClass(class)
其中，class为类样式的名称，可以增加多个样式名，各个类样式之间可以用空格隔开即可，其语法格式如下：addClass(class1 class2 …classN)示例：

<style type="text/css">
      *{
        margin: 0px;padding: 0px;font-size: 12px;
      }
      .style1{font-size: 14px;color:#03f;}
      .style2{background-color:#ff0;padding: 10px;}
      .style3{border: 1px dashed #333;}
    </style>
</head>
<body>
  <h2 class="style1">addClass可为元素追加多个类样式</h2>
  <script type="text/javascript">
    $(document).ready(function(){
      $("h2").click(function(){
        $(this).addClass("style2 style3");
      });
    });
  </script>
  2.移除样式
  removeClass(class);
  removeClass(class1 class2 ...classN)
  <script type="text/javascript">
    $(document).ready(function(){
      $("h2").click(function(){
        $(this).addClass("style2 style3");
      });
      $("h2").mouseout(function(){
        $(this).removeClass("style1 style3");
      });
    });
  </script>

4.2.3切换样式
使用toggleClass()方法切换不同的类样式。语法格式如下：toggleClass(class);

<dl>
    <dt>苏宁导航</dt>
    <dd><a href="#">苏宁会员</a></dd>
    <dd><a href="#">服装城</a></dd>
    <dd><a href="#">苏宁超市</a></dd>
    <dd><a href="#">电器城</a></dd>
    <dd><a href="#">红孩子</a></dd>
    <dd><a href="#">大汇聚</a></dd>
    <dd><a href="#">苏宁金融</a></dd>
    <dd><a href="#">海外购</a></dd>
  </dl>
  <script>
    $(document).ready(function(){
      $("dd").click(function(){
        $(this).toggleClass("current");
      });
    });
  </script>

4.3 内容操作
4.3.1 HTML代码操作
JQuery提供了对元素内容的操作，对HTML代码(HTML标签)、标签内容和标签属性值三者的操作。
JQuery可以使用html()对HTML代码进行操作，该方法类似于传统Javascript中InnerHTML,通过应用动态的添加页面内容(如填写表单时出现的提示)，html()方法，其语法格式如下：
html([content]) content 可选，规定被选元素的新的内容，该参数可以包含HTML标签无参数时，表示获取被选元素的文本内容；

<body>
  <div id="main">
    <h1>柳絮飘飞</h1>
    <div class="left"><img src="jQuery/../image/bookcover.png" width="100px">
      <p>心情头像</p>
    </div>
    <input type="button" value="单击改变内容"/>
  </div>
  <script type="text/javascript">
    $(document).ready(function(){
      var html_txt = $("div.left").html();
      alert(html_txt);
      $("input[type=button]").click(function(){
        $("div.left").html("<div class='content'><h2>良好的习惯从今天开始！</h2></div>");
      });
    });
  </script>

4.3.2 标签内容操作
JQuery可以使用text()方法获取或设置元素的文本内容，不含HTML标签其语法格式：text([content])

<script type="text/javascript">
    $(document).ready(function(){
      var html_txt = $("div.left").text();
      alert(html_txt);
      $("input[type=button]").click(function(){
        $("div.left").text("<div class='content'><h2>良好的习惯从今天开始！</h2></div>");
      });
    });
  </script>

4.3.3 属性值操作
value([value])

 <input name="" type="text" class="search_txt" value="
  电视" id="searchtxt"/>
  <input type="button" class="search_btn"/>
  <script type="text/javascript">
    $(document).ready(function(){
      $("#searchtxt").focus(function(){  //搜索框获得鼠标焦点
        var txt_value = $(this).val();   //得到当前文本框的值
        if(txt_value=="电视"){
          $(this).val("");  //如果符合条件，则清空文本框的值
        }
      });
      $("#searchtxt").blur(function(){  //搜索框失去焦点
        var txt_value = $(this).val();//得到当前文本框的值
        if(txt_value==""){
          $(this).val("电视");  //如果符合条件，则设置内容
        }
      });
    });
 </script>

4.4 节点与属性操作
4.4.1节点操作
节点操作主要分为查找、创建、插入、删除、替换和复制6种操作方式，
1、查找节点

<h2>热门电视剧排行</h2>
  <ul>
    <li>幻城</li>
    <li>青云志</li>
    <li>炮神</li>
  </ul>
  <script>
    $("h2").hide()
    $("li").css("background-color","blue")
  </script>

2、创建节点元素
函数是用于将匹配到的DOM元素转换为JQuery对象，$()方法的语法格式如下：$(selector)或者$(element)或者$(html)

var $newNode=$("<li></li>")  //创建空的<li>元素节点
// var $newNode1=$("<li>来说空间</li>); //创建含文本的的<li>元素节点
var $newNode2=$("<li title="千与千寻">来说空间</li>)//创建含文本和属性的<li>元素节点

3.插入节点
想实现动态的新增节点，必须对创建的节点执行插入或追加操作，而jQuery提供了多种方法实现节点的插入：内部插入节点和外部插入节点；
内部插入：

1）.append(content) 向所选元素的内部插入内容，即$(A).append(B)表示B追加到A中，如$("ul").append($newNode1);
2）.appendTo(content);把所选元素追加到另一个指定的元素集合中，即$(A).appendTo(B)表示A追加到B中，如$($newNode1).appendTo("ul");
3）.prepend(content)向每个选择的元素内部前置内容，即$(A).prepend(B)表示B追加到A中，$("ul").prepend($newNode1);
4）.prependTo(content)将所有匹配元素前置到指定的元素中，该方法仅颠倒了常规prepend()插入元素的操作，即$(A).prependTo(B)表示A前置到B中，$($newNode1).prependTo("ul");

外部插入：

1）.after(content)在每个匹配的元素之后插入内容，即$(A).after(B)表示B插入到A之后；如$("ul").after($newNode)
2）.insertAfter(content)将所有匹配元素插入到指定元素的后面.
3）.before(content)向所选的元素外部前面插入内容；$(A).Before(B)表示B插入到A之前；
4）.insertBefore(content)将所匹配的元素插入到指定元素的前面；

4.删除节点

$(selector).remove([expr]) 参数expr 为可选参数，如果接受参数，则该参数为筛选元素的jQuery表达式，通过该表达式获取指定元素，并进行删除，如删除"青云志",jQuery代码如下：$("ul li:eq(1)").remove();
清空元素中的所有后代节点：$(selector).empty()

5.替换节点
使用replaceWith()方法和replaceAll()方法可以替换某个节点；
6.复制节点
$(selector).clone([includeEvents]);includeEvents为可选参数，取值为true或false,
规定是否复制元素的所有事件处理，为true时复制事件处理，为false时相反；
在jQuery中，如果没有办法输出DOM元素本身的HTML，可以使用下面代码来实现；

$("<div></div>").append($(DOM元素).clone()).html();

4.4.2 属性操作
jQuery中，属性操作的方法有两种，即获取与设置元素属性的attr()方法和删除元素属性的removeAttr()方法，
1.获取与设置元素属性
使用attr()方法来获取与设置元素属性。
attr()的使用方法以及语法格式如下：$(selector).attr([name]) //获取属性值或者$(selector).attr({[name:value1],[name:value2]...[nameN:valueN]})
2.删除元素属性
在jQuery中，$(selector).removeAttr(name)
4.5 节点遍历
遍历子元素、遍历同辈元素、遍历前辈元素和一些特别的遍历方法，即children()、next() prev() sibling() parent() parents();
4.5.1 属性操作

$(selector).children([expr]);ecpr 可选参数，用于过滤子元素的表达式；
　var　$body=$("body").children();
alert($body.length);

4.5.2 遍历同辈元素
next()紧临其后的元素， prev()紧邻其前的元素 sibling()位于该元素前与后的所有元素；
4.5.3遍历前辈元素
parent()和parents(),parent()方法用于获取当前匹配元素集合中每个匹配元素的父级元素，而parents()方法用于获取当前匹配元素集合中每个匹配元素父级及祖级元素：
$(selector).parent([selector])
$(selector).parents([selector])
4.6 CSS-DOM操作
css(); 设置返回匹配元素的样式属性
height([value]);匹配元素的高度；
width([value]); 匹配元素的宽度；
offset([value]); 设置或返回以像素为单位的top和Left坐标；此方法只对可见元素有效；
offsetParent([value])返回最近的以定位的祖先元素；值被设置为：relative;absolute;fixed;
scrollLeft([position]);匹配相对滚动条左侧的偏移；
scrollTop([position]);匹配相对滚动条顶部的偏移；
第五章表单验证
要想通过JS来验证表单数据的合法性，遵循以下规则：
（1）获取的表单元素值，都需要String类型，包含数字、下划线；
（2）使用Js中的方法对获取的数据进行判断；
（3）在提交表单时，触发submit事件，对获取的数据进行验证；
下面介绍如何对String类型的数据进行验证；
1.使用String对象验证邮箱；
思路分析：（1）先获取表单元素（EMAIl文本框）的值（String类型），然后进行判断；
（2）使用JQueryID 选择器获得表单的输入元素（文本框对象），然后使用JQUery的val()获取文本框的值，
（3）使用字符串方法（indexof())来判断获得的文本框元素的值是否包含@和"."符号；
（4）单击提交按钮，触发onsubmit事件，然后调用脚本执行函数；
（5）当返回值是false时，不能提交表单，当返回值是true时，提交表单；

<form action="success.html" method="POST" id="myform" name="myform">
    <tr>
      <td>Email:<input id="email" type="text" class="inputs"></td>
    </tr>
    <tr>
      <td>&nbsp;密码：<input id="pwd" type="password" class="inputs"></td>
    </tr>
    <tr>
      <td style="height:35px;padding-left:30px;">
        <input name="btn" type="submit" value="登录" class="rb1">
      </td>
    </tr>
  </form>
  <script type="text/javascript">
    function check(){
      var mail = $("#email").val();
      if(mail == ""){
        alert("Email不能为空");
        return false;
      }
      if (mail == indexOf("@") == -1) {
        alert("Email格式不正确\n必须包含@");
        return false;
      }
      if (mail == indexOf(".")==-1) {
        alert("Email格式不正确\n必须包含.");
        return false;
      }
      return true;
    }
    $(function(){
      //提交表单
      $("#myform").submit(function(){
        return check();
      });
    });
  </script>

5.2 正则表达式
严谨验证邮箱地址代码如下：

 function checkEmail(){
    var email = $("#mail").val();
    var $email_prompt=$("email_prompt");
    $email_prompt.html("");
    var reg=/^\w+@\w+(\.[a-zA]){2,3}{1,2}$/;
    if(reg.test(email)==false){
      $email_prompt.html("电子邮箱格式不正确，请重新输入");
      return false;
    }
    return true;
  }

5.2.2 什么是正则表达式
正则表达式（Regular Expression,即RegExp对象）是一个描述字符模式的对象，它是由一些特殊的符号组成的；这些符号和SQL Server中学过的通配符一样，其组成的字符模式用来匹配各种表达式。它是对字符串执行模式匹配的强大工具，简单的模式可以是一个单独的·字符，复杂的模式包括了更多的字符，如验证电子邮件地址、电话号码、身份证号码等字符串；
1.定义正则表达式
有两种构造形式，一种是普通形式，另一种是构造函数的方式。
（1）普通方式
普通方式的语法格式如下：
var reg = /表达式/附和参数
表达式：一个字符串代表了某种规则；其中可以使用某些特殊字符来代表特殊的规则，主要有以下3个参数：g:代表可以进行全局匹配；
i：代表不区分大小写匹配；
m:代表可以进行多行匹配；
3个参数任意组合，代表复合含义，当然也可以不加参数：

 var reg = /white/
  var reg = /white/g;

(2)构造函数
构造函数方式的语法格式如下；

 var reg = new RegExp("表达式","附合参数")

2.表达式的模式
从规范上讲，表达式的模式分为简单模式和复合模式。
（1）简单模式：通过普通字符的组合来表达的模式；

var reg = /china/;
var reg = /abcd8/;

(2)复合模式
含有通配符来表达的模式；这里的通配符与SQL Server中的通配符相似；例如：

var reg = /^\w+$/;

其中，+ \w ^ 和$都是通配符，代表着特殊的含义，因此复合模式可以表达更为抽象化的规则模式；
正则表达式常用符号和用法；
/…/ 代表一个模式的开始和结束；
^ 匹配字符串的开始；
$ 匹配字符串的结束；
\s 任何空白字符
\S 任何非空白字符
\d 匹配一个数字字符，等价于[0-9]
\D除了一个数字之外的任何字符，等价于[^0-9]
\w匹配一个数字、下划线或字母字符，等价于[A-Za-z0-9_]
\W任何非单字字符，等价于[^a-zA-z0-9_]
.除了换行符之外的任何字符；
在字符@前后的字符可以是数字、字母或下划线，但是在字符"."之后的字符只能是字母，
正则表达式的重复字符

{n}匹配前一项N次；
{n,}匹配前一项n次，或者多次；
{n,m}匹配前一项至少N次，但是不能超过M次；
*  匹配前一项0次或者多次；等价于{0，}
+ 匹配前一项1次或者多次；等价于{1，}
？匹配前一项0次或者1次；也就是前一项是可选的，等价于{0，1}

5.2.3 正则表达式的应用
对手机号码进行正则表达式进行验证

var regMobile = /^1\d{10}$/;
<body>
  手机号码：<input id="mobile" type="text" onblur="checkMobile">
  <div id="mobile_prompt"></div>
  <script type="text/javascript">
    function checkMobile(){
      var moblie = $("#mobile").val();
      var $mobile = /^1\d{10}$/;
      if(regMobile.test(moblie)==false){
        $mobileId.html("手机号码不正确，请重新输入")
      };
      return false;
    }
    $mobileId.html("");
    return true;
    }
  </script>
</body>

5.3 表单选择器
在前面的表单验证效果中，jQuery的一个主要作用就是使用选择器获取元素，所用的选择器主要是ID选择器，但是在一些复杂的表单，有时候需要获取多个表单元素，事实上jQuery提供了专门针对表单的一类选择器，这就是表单选择器；
5.3.1 表单选择器简介
表单选择器就是用来选择文本输入框、按钮等表单元素。
5.3.2验证多行数据

<div class="main">
    <form method="post" id="vendorForm">
      <table cellspacing="1" cellpadding="3">
        <tr align="left">
          <td>
            <input id="venter_0_CompanyName" type="text" name="venters[0].CompanyName">
          </td>
          <td>
            <input id="venters_0_Bank" type="text" name="venders[0].Bank"
          </td>
          <td>
            <input id="venter_0_Account" type="text" name="venders[0].Account" </td>
        </tr>
        <tr align="left">
          <td>
            <input id="venters_1_CompanyName" type="text" name="venders[1].CompanyName"
          </td>
          <td>
            <input id="venters_1_Bank" type="text" name="venders[1].Bank" >
          </td>
          <td>
            <input id="venters_0_Account" type="text" name="venders[1].Account" 
          </td>
        </tr>
      </table>
      <p><input value="全部提交" type="submit"></p>
    </form>
  </div>
  <script>
    function checkCompanyName($name){  //验证供应商名称
      if($name.val()==""){ //验证不通过；显示提示
        if($name.find("~span").length==0){
          $name.after("<span>请输入供应商名称</span>")
        }
        return false;
      }
      else{
        $name.find("~span").remove();
        return true;
      }
    }
  </script>

第六章 AJAX
6.1.1 AJAX的关键元素
AJAX技术可以实现页面无刷新显示或者局部刷新页面，js和XML是AJAX中的重要技术，还包括CSS样式表、XMLhttpRequest数据交换对象和DOM文档对象等技术内容；
6.1.2AJAX异步连接
在网页中AJAX访问是通过XMLhttpRequest对象来实现的XMLhttpRequest数据交换对象是各种浏览器支持的，可以使用JS语言创建该数据交换对象，AJAX的核心是XMLhttpRequest，
（1）AJAX实现的原理
将JS XML HTML DOM和css结合起来使用可实现无刷新的页面效果；
（2）获取异步数据
在AJAX中，最重要的莫过于获取异步数据，它是连接用户与后台服务器的关键。
在JS中，通过AJAX异步获取数据是有固定步骤的，例如希望将数据放入指定的div块中，

 <body>
  <input type="button" value="测试异步通讯" onclick="startRequest()">
  <br><br>
  <div id="target"></div>
  <script>
    var xmlHttp;
    function createXMLHttpRequest(){
      if(window.ActiveXObject){
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      }else if(window.XMLHttpRequest){
        xmlHttp = new XMLHttpRequest();
      };
    };
    function startRequest(){
      createXMLHttpRequest();
      xmlHttp.onreadystatechange = function(){
        if(xmlHttp.readyState == 4 && xmlHttp.status ==200){
          document.getElementById("target").innerHTML = xmlHttp.responseText;
        };
      };
      xmlHttp.send(null);
    };
  </script>
</body>

此时服务器端简单的返回数据；

<?phpecho "异步测试成功，很高兴";?>

(3)JQuery的load()方法
结构代码：

<input type="button" value="测试异步通讯" onclick="startRequest()">
  <br><br>
  <div id="target"></div>
行为代码：
<script>
  function startRequest(){
    $("#target").load("6-1.php");
  }
</script>

load的语法结构如下：
load(url,[data],[callback]);其中url为异步请求得地址，data用来向服务器传送请求数据，为可选参数，一旦data参数启用，整个请求过程以post方法进行，否则默认为GET，如果希望在GET方式下传送数据，可在URL地址后面用类似"?dataname=data1&dataname1=data2"的方法。
callback为AJAX加载成功后运行的回调函数；

陈皮小桔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础知识

一、使用JQuery<script> $(document).ready(function(){ alert("hello word"); })</script>在这段代码中，$(document).ready()语句是当DOM已经加载，并且页面已经完全呈现时，会发生ready事件。由于该事件在文档就绪后发生，因此将其他的JQuery事...
复制链接

扫一扫