Web前端开发(JQuery)

  • 选择器

  • 事件

  • 操作DOM

  • Ajax在Jquery中应用

 选择器

选择器基本定义：

JQuery选择器继承了CSS与Path语音的部分语法，充许通过标签、属性名或内容对DOM元素进行快速、准确的选择、而不必担心浏览器的兼容性，通过JQeruy选择器对页面元素精确定位，才能完成元素属性和行为的处理。

选择器优势：

  1. 代码更简单
  2. 完善的检测机制

all  selector （ 所有，或普遍的，这个选择器非常缓慢的，除了自身使用。）

var elementCount = $("*").css("border","3px solid red").length;

$("body").prepend("<h3>" + elementCount + " elements found</h3>");

jQuery(':animated') 选择所有正在执行动画效果的元素.

  $("#run").click(function(){  $("div:animated").toggleClass("colored");     });

jQuery('[attribute|=value]')

attribute一个属性名.

value一个属性值，引号是可选的.

选择指定属性等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-” ）的元素。

这个选择器是引入CSS规范来处理语言属性。

<body>    

　　<a href="example.html" hreflang="en">Some text</a>
  　<a href="example.html" hreflang="en-UK">Some other text</a>  

　　<script> $('a[hreflang|=en]').css('border','3px dotted green');</script>
</body

jQuery('[attribute*=value]')

attribute 一个属性名.

value一个属性值，引号是可选的.

描述： 选择指定属性具有包含一个给定的子字符串的元素。（选择给定的属性是以包含某些值的元素）

这是最慷慨的jQuery的属性选择器匹配一个值。如果选择器的字符串内的任何地方出现的元素的属性值，它会被选择。比较这个词的选择选择属性包含（例如：[attr~=word]），更重要的是在许多情况下适当的

 <input name="man-news" />
<input name="milkman" />  

 <input name="letterman2" />  

 <input name="newmilk" />

<script>$("input[name*='man']").val("has man in it!");</script>

jQuery('[attribute~=value]') 选择指定属性用空格分隔的值中包含一个给定值的元素。

attribute

一个属性名.

value

一个属性值，引号是可选的.

这个选择器测试属性值中的每个单词字符串，其中“word”是一个由空白分隔的字符串定义的。如果测试字符串恰好等于任何一个字词这个选择器将选择。

<input name="man-news" />
 <input name="milk man" />  

<input name="letterman2" />  

<input name="newmilk" />

<script>$("input[name~=man]").val("mr. man is in it!");</script>

jQuery('[attribute=value]') 选择指定属性是给定值的元素

jQuery('[attribute!=value]') 选择不存在指定属性，或者指定的属性值不等于给定值的元素。

jQuery('[attribute^=value]') 选择指定属性是以给定字符串开始的元素

<input name="newsletter" />
<input name="milkman" />  

<input name="newsboy" />

<script>$("input[name^='news']").val("news here!");</script>

jQuery(':button') 选择所有按钮元素和类型为按钮的元素。

var input = $(":button").css({background:"yellow", border:"3px red solid"});   

$("div").text("For this type jQuery found " + input.length + ".") .css("color", "red");   

$("form").submit(function () { return false; }); // so it won't submit

jQuery(':checkbox') 选择所有类型为复选框的元素。

$(':checkbox') 等同于 $('[type=checkbox]')。如同其他伪类选择器（那些以“:”开始）建议前面加上一个标记名称或其他选择器;否则，通用选择("*")被默认使用。换句话说$(':checkbox') 等同于 $('*:checkbox')，所以应该使用$('input:checkbox')。

jQuery(':checked')

描述： 选择所有勾选的元素。

这个 :checked 选择器适用于复选框和单选框。对于下拉框元素, 使用 :selected 选择器。

<script>
function countChecked() {      

　　 var n = $("input:checked").length;   

  　　$("div").text(n + (n <= 1 ? " is" : " are") + " checked!");    

}     </script>

jQuery('parent > child')

parent  任何有效的选择器。

child   一个用来筛选子元素的选择器。

描述： 选择所有通过“parent”给定的元素直接子元素，该子元素“child”给定。

像一个CSS选择器，这个子组合器被Safari, Firefox, Opera, Chrome, 和 Internet Explorer 7 及以上版本等现代浏览器支持，但尤其不被Internet Explorer6及以下版本支持。然而在jQuery中，这个选择器（与其他所有选择器）能在所有支持的浏览器中工作，包括IE6。这个子组合器(E > F)可以被认为是作为后代组合子(E F)不同，更具体的形式是它只会选择第一级的后代。

jQuery('.class')

class一个用来搜索的类名。一个元素可以有多个类；其中只有一个必须匹配。

描述： 选择给定类名的所有元素。

对于类选择器，如果浏览器支持，jQuery使用JavaScript的原生getElementsByClassName()函数。

<script>$(".myclass.otherclass").css("border","13px solid red");</script>

jQuery(':contains(text)')

描述： 选择所有包含指定文本的元素。

匹配的文本可以直接出现在所选的元素中，或在该元素的任何后代中，或两者兼有。正如属性值选择器，:contains()选择器中括号内的文字，可为空，或用引号包围。文本必须有匹配的情况下被选中。

<body>  

<div>John Resig</div>
<div>George Martin</div>

<div>Malcom John Sinclair</div>

<div>J. Ohn</div>      

 <script> $("div:contains('John')").css("text-decoration", "underline");  </script>
</body>

jQuery('ancestor descendant')

ancestor 任何有效的选择器。

descendant 一个用来筛选后代元素的选择器。

描述： 选择所有给定的祖先的后代元素。一个元素的后代可能是该元素的一个孩子，孙子，曾孙等。

<body>  

 <form>    

<div>Form is surrounded by the green outline</div>   

  <label>Child:</label>   <input name="name" />
  <fieldset>  <label>Grandchild:</label> <input name="newsletter" />    </fieldset>
 </form> 

Sibling to form: <input name="none" />

<script>$("form input").css("border", "2px dotted blue");</script>

jQuery(':disabled')

描述： 选择所有被禁用的元素。

如同其他伪类选择器（那些以“:”开始）建议前面加上一个标记名称或其他选择器;否则，通用选择("*")被默认使用。换句话说$(':disabled') 等同于 $('*:disabled')，所以应该使用$('input:checkbox')。

jQuery('element')

element一个用来搜索的元素。指DOM节点的标签名。

描述： 选择所有给定标签名的元素。调用JavaScript的 getElementsByTagName()函数，当该表达式使用时返回相应的元素。

 $("div").css("border","9px solid red");

操作DOM

addClass( className ) 返回: jQuery

为每个匹配的元素添加指定的类名

version added: 1.0.addClass( className )

className为每个匹配元素所要增加的一个或多个样式名。

version added: 1.4.addClass( function(index, class) )

function(index, class)这个函数返回一个或更多用空格隔开的要增加的样式名。接收元素的索引位置和元素旧的样式名作为参数。

值得注意的是这个方法不会替换一个样式类名。它只是简单的添加一个样式类名到可能已经指定的元素上。

对所有匹配的元素可以同时添加不只一个的用空格隔开的样式类名, 像这样：

$('p').addClass('myClass yourClass');

这个方法通常和.removeClass()一起使用用来切换元素的样式, 像这样：

$('p').removeClass('myClass noClass').addClass('yourClass');

自 jQuery 1.4开始,  .addClass() 方法允许我们通过函数传递来设置样式名。

$('ul li:last').addClass(function() { return 'item-' + $(this).index(); });

after( content ) 返回：jQuery

根据参数设定在每一个匹配的元素之后插入内容。

version added: 1.0.after( content )

content一个元素，HTML字符串，或者jQuery对象，用来插在每个匹配元素的后面。

version added: 1.4.after( function(index) )

function(index)一个返回HTML字符串的函数，这个字符串会被插入到每个匹配元素的后面。

.after()和.insertAfter()实现同样的功能。主要的不同是语法——特别是内容和目标的位置。 对于 .after(), 选择表达式在函数的前面，参数是将要插入的内容。 对于.insertAfter(), 刚好相反，内容在方法前面，它将被放在参数里元素的后面。

请看下面的HTM

<div class="container">

<h2>Greetings</h2>

<div class="inner">Hello</div>

<div class="inner">Goodbye</div>

</div>

我们可以创建内容然后同时插在好几个元素后面：

$('.inner').after('<p>Test</p>');

我们也可以在页面上选择一个元素然后插在另一个元素后面：

$('.container').after($('h2'));

对于jQuery 1.4, .after()允许我们传入一个函数，改函数返回要被插入的元素。

$('p').after(function() { return '<div>' + this.className + '</div>'; });

例如：在所有的段落后插入一个DOM元素。$("p").after( document.createTextNode("Hello") );

.clone( [ withDataAndEvents ] ) 返回： jQuery

  • version added: 1.0.clone( [ withDataAndEvents ] )

  • withDataAndEvents一个Boolean值（true 或者 false）指示事件处理函数是否会被复制。对已jQuery 1.4，元素数据也会被复制。

  • version added: 1.5.clone( [ withDataAndEvents ], [ deepWithDataAndEvents ] )withDataAndEvents一个Boolean值（true 或者 false）指示事件处理函数是否会被复制。对已jQuery 1.4，元素数据也会被复制。 默认值是 false。*对于1.5.0的默认值是不正确true 。这将在1.5.1以上改回false。

  • deepWithDataAndEvents一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。默认情况下它的值相匹配的第一个参数的值（ 默认值是 false）

.clone()方法深度复制所有匹配的元素，包括所有匹配元素、匹配元素的下级元素、文字节点。 当和插入方法联合使用时，.clone()对于复制页面上的元素很方便。请看下面的HTML：

<div class="container">

<div class="hello">Hello</div>

　　<div class="goodbye">Goodbye</div>

</div>

但是我们如果需要的是复制而不是移除，我们可以像下面这样写代码：

$('.hello').clone().appendTo('.goodbye');

结果会是：

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

当我们用.clone()方法时，我们可以修改被复制的元素或者元素内容，在将它插入到文档之前。

通常，任何绑定绑定在原始元素上的事件处理函数都不会被复制到克隆元素。可选的withDataAndEvents 参数允许我们改变该行为， 从而将所有绑定在原始元素上的事件处理函数复制到克隆元素上。对于jQuery 1.4，所有元素数据（ .data()方法返回的内容）同样被复制到新的克隆元素。

在jQuery 1.5，withDataAndEvents可以选择性增强deepWithDataAndEvents复制元素的事件和数据的克隆的所有子元素。

detach( [ selector ] ) 返回：jQuery

描述：从DOM中去掉所有匹配的元素。

version added: 1.4.detach( [ selector ] )

selector一个选择表达式将需要移除的元素从匹配的元素中过滤出来。

.detach() 和.remove()一样, 除了 .detach()保存所有jQuery数据和被移走的元素相关联。

当需要移走一个元素，不久又将该元素插入DOM时，这种方法很有用。

例子 删除DOM中所有段落

事件

　　当用户浏览页面时，浏览器会对页面代码进行解释或编译—这个过程实质上是通过事件来驱动的，即页面在加载时，执行一个Load事件，在这个事件中实现浏览器编译页面代码的过程，事件无论在页面元素本身还是在元素与人机交互，都占有十分重要的地位。

  • 事件机制

众所周知，页面加载时，会触发Load事件，当用户单击某个按钮时，触发该按钮的Click事件，通过种种事件实现各项功能或执行某项操作，事件在元素对象与功能代码中起着重要的桥梁中用，那么，事件触发后是如何执行代码的呢？

　　严格来说，事件在触发后被分为两个阶段，一个是捕获（Capture），另一个则是冒泡（Bubbling）；但有些遗憾的是，大多数浏览器并不是都支持捕获阶段，JQuery也不支持，因此在事件触发后，往往执行冒泡过程，所谓冒泡其实质是事件执行中的顺序。

4-1 事件中的冒泡机制

<body>    

<div>        

　　<input id="btnShow" type="button" value="点击" class="btn" />  </div>   

　　<div class="clsShow"></div>

</body>

$(function() {         

    var intI = 0; //记录执行次数        

     $("body,div,#btnShow").click(function(event) {//点击事件               

  intI++; //次数累加                

　 $(".clsShow") .show()//显示               

  　.html("您好，欢迎来到jQuery世界!")//设置内容              

     .append("<div>执行次数 <b>" + intI + "</b> </div>"); //追加文本      

       //event.stopPropagation();//阻止冒泡过程 ， Return false;

  })})

4-2 页面载入事件

Ready()方法工作原理

该方法类似于传统的JavaScript中的OnLoad（）方法，只不过在事件执行时间上有区别，OnLoad（）的执行必须是页面中的全部元素完全加载到浏览器后才触发，在这种情况下，如果页面中的图片过多或过大，那么有可能要等OnLoad方法执行完毕，用户才能进行其他的操作；如果使用Jquery中的Ready()方法加载页面时，则只要页面的DOM模型加载完毕，就回触发Ready方法。因此，两者在事件的执行效果上Ready方法明显优于JavaScript中的OnLoad方法。

　　在Jquery脚本加载到页面时，会设置一个IsReady的标记，用于监听页面加载进度，当然遇到执行ready方法是，通过查看IsReady值是否被设置，如果未被设置，那么就说明页面并未加载完成，在此情况下，将未完成的部分用一个数组缓存起来，当全部加载完成后，再将未完成的部分通过缓存一一执行。

ready()方法的几种相同写法

写法一

$(document).ready(function(){

　　//代码部分

})

写法二

$(function(){

　　//代码部分

})

写法三

JQuery(document).ready(function(){

　　//代码部分

})

写法四

JQuery(function(){

　　//代码部分

})

其中写法二简介明了，使用较为广泛。

bind( eventType, [ eventData ], handler(eventObject) ) 返回： jQuery

描述： 为一个元素绑定一个处理事件。

  • version added: 1.0.bind( eventType, [ eventData ], handler(eventObject) )

    eventType一个包含一个或多个JavaScript事件类型的字符串，比如"click"或"submit,"或自定义事件的名称。

    eventData将要传递给事件处理函数的数据映射。

    handler(eventObject)每当事件触发时执行的函数。

  • version added: 1.4.3.bind( eventType, [ eventData ], false )

    eventType一个包含一个或多个JavaScript事件类型的字符串，比如"click"或"submit,"或自定义事件的名称。

    eventData将要传递给事件处理函数的数据映射。

    false第三个参数设置为false将绑定一个函数，防止默认事件，阻止事件冒泡。

  • version added: 1.4.bind( events )

    events一个或多个JavaScript事件类型和函数的数据映射来执行他们。

.bind()一个基本的用法：

$('#foo').bind('click', function() {
  alert('User clicked on "foo."');
});

Multiple Events

多个事件类型可以通过用空格隔开一次性绑定：

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

Event Handlers

handler的参数需要一个回调函数，如上所述。在处理函数中，关键字this指的是DOM元素受处理程序的约束。为了该元素在jQuery中使用，它可以通过正常的$()函数。例如：

$('#foo').bind('click', function() {
  alert($(this).text());
});

执行此代码后，当用户点击里面ID为foo的元素 ，它的文本内容将被显示为警告。

在jQuery 1.4.2中，重复的事件处理程序可以绑定到一个元素，而不是被丢弃。例如：

function test(){ alert("Hello"); }
$("button").click( test );
$("button").click( test );

上述按钮被点击时会产生两个警报。

在jQuery 1.4.3中，你现在可以通过在事件处理程序的地方使用'false'参数。这将绑定的事件处理程序的等价于： function(){ return false; }。此功能通过.unbind( eventName, false )可去除在以后调用

The Event object

在handler回调函数里还可以带参数。当函数被调用时，JavaScript事件对象（event）将作为第一个参数被传递。

事件对象往往是不必要的可以省略的参数，因为通常情况下提供足够的处理程序时必然要确切地知道需要做什么处理程序时被触发。然而，有时就有必要收集更多有关用户在事件被启动时环境信息。查看所有的事件对象。

从一个处理函数返回false等效于调用事件对象中的两个.preventDefault()和.stopPropagation()。

Using the event object in a handler looks like this:

$(document).ready(function() {
  $('#foo').bind('click', function(event) {
    alert('The mouse cursor is at ('
      + event.pageX + ', ' + event.pageY + ')');
  });
});

delegate( selector, eventType, handler ) 返回： jQuery

描述： 为所有选择器匹配的元素附加一个处理一个或多个事件，现在或将来，基于一组特定的根元素。

  • version added: 1.4.2.delegate( selector, eventType, handler )

    selector选择器字符串，用于过滤器触发事件的元素。

    eventType一个包含一个或多个JavaScript事件类型的字符串，比如"click"或"keydown,"或自定义事件的名称。

    handler每当事件触发时执行的函数。

  • version added: 1.4.2.delegate( selector, eventType, eventData, handler )

    selector选择器字符串，用于过滤触发事件的元素。

    eventType一个包含一个或多个JavaScript事件类型的字符串，比如"click"或"keydown,"或自定义事件的名称。

    eventData将要传递给事件处理函数的数据映射。

    handler每当事件触发时执行的函数。

  • Delegate（委派，允许每个事件绑定到特定的DOM元素。例如，下面的委托的代码：

    $("table").delegate("td", "hover", function(){
	$(this).toggleClass("hover");
});

Ajax在Jquery中应用

.serializeArray() 返回: Array

面熟: 将用作提交的表单元素的值编译成拥有name和value对象组成的数组。例如[ { name: a value: 1 }, { name: b value: 2 },...]

  • version added: 1.2.serializeArray()

.serializeArray() 方法创建一个对象组成的javascript数组，用来编码成一个JSON一样的字符串。 这是数组使用jQuery对象代表一组表单元素的构成。 这个表单元素可以的几种类型：

<form>
  <div><input type="text" name="a" value="1" id="a" /></div>
  <div><input type="text" name="b" value="2" id="b" /></div>
  <div><input type="hidden" name="c" value="3" id="c" /></div>
  <div>
    <textarea name="d" rows="8" cols="40">4</textarea>
  </div>
  <div><select name="e">
    <option value="5" selected="selected">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select></div>
  <div>
    <input type="checkbox" name="f" value="8" id="f" />
  </div>
  <div>
    <input type="submit" name="g" value="Submit" id="g" />
  </div>
</form>

The .serializeArray() 方法可以操作一个jQuery对象已选定的表单元素个体, 比如 <input>, <textarea>, 和 <select>。无论如何他能非常简单系列化:选择的 <form> 标签：

$('form').submit(function() {
  $.print($(this).serializeArray());
  return false;
});

这产生下列数据结构:

[
  {
    name: a
    value: 1
  },
  {
    name: b
    value: 2
  },
  {
    name: c
    value: 3
  },
  {
    name: d
    value: 4
  },
  {
    name: e
    value: 5
  }
]

举例:

 function showValues() {
      var fields = $(":input").serializeArray();
      $("#results").empty();
      jQuery.each(fields, function(i, field){
        $("#results").append(field.value + " ");
      });
    }
    $(":checkbox, :radio").click(showValues);
    $("select").change(showValues);
    showValues();

.serialize() 返回: String

描述： 将用作提交的表单元素的值编译成字符串。

  • version added: 1.0.serialize()

.serialize() 方法使用标准的 URL-encoded(URL编码) 符号上建立一个文本字符串. 这是使用jQuery对象代表一组表单元素的构成。 这个表单元素可以的几种类型：

<form>
  <div><input type="text" name="a" value="1" id="a" /></div>
  <div><input type="text" name="b" value="2" id="b" /></div>
  <div><input type="hidden" name="c" value="3" id="c" /></div>
  <div>
    <textarea name="d" rows="8" cols="40">4</textarea>
  </div>
  <div><select name="e">
    <option value="5" selected="selected">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select></div>
  <div>
    <input type="checkbox" name="f" value="8" id="f" />
  </div>
  <div>
    <input type="submit" name="g" value="Submit" id="g" />
  </div>
</form>

The .serialize() 方法可以操作一个jQuery对象已选定的表单元素个体, 比如 <input>, <textarea>, 和 <select>。无论如何他能非常简单系列化:选择的 <form> 标签：

$('form').submit(function() {
  alert($(this).serialize());
  return false;
});

这个过程产生了一个非常标准的查询字符串:

a=1&b=2&c=3&d=4&e=5
变通举例：
function showValues() {
      var str = $("form").serialize();
      $("#results").text(str);
    }
    $(":checkbox, :radio").click(showValues);
    $("select").change(showValues);
    showValues();

jQuery.param( obj ) 返回: String

描述: 创建一个序列化的数组或对象，适用于一个URL 地址查询字符串或Ajax请求。

  • version added: 1.2jQuery.param( obj )

    obj一个数组或序列化的对象。

  • version added: 1.4jQuery.param( obj, traditional )

    obj一个数组或序列化的对象。

    traditional一个布尔值，指示是否执行了传统的“shallow”的序列化。

这个函数 可以将元素的值 转换为 序列化字符串 (更多细节查阅 .serialize() )。

在 jQuery 1.3中, 这个函数的返回值被用来代替函数作为一个字符串。

在 jQuery 1.4中, $.param() 方法 递归对象以至于 适应就好像 PHP 和 Ruby on Rails一样的现代的脚本语言 和 框架。 你可以通过设置 jQuery.ajaxSettings.traditional = true;废除这个全局功能。

注意: 因为一些框架解析序列化的数字的能力有限， 当通过obj或者数组中包含嵌套在另一个数组传递参数，我们应该谨慎。

在 jQuery 1.4 HTML5中输入序列话的元素，也是如此。

我们可以显示一个对象的查询字符串 和一个相应的URI-decoded 版本，如下:

var myObject = {
  a: {
    one: 1, 
    two: 2, 
    three: 3
  }, 
  b: [1,2,3]
};
var recursiveEncoded = $.param(myObject);
var recursiveDecoded = decodeURIComponent($.param(myObject));

alert(recursiveEncoded);
alert(recursiveDecoded);

recursiveEncoded 和 recursiveDecoded 的结果如下：

a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3
a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3

例如: 序列号一些复杂的对象

// <=1.3.2:

$.param({ a: [2,3,4] }) // "a=2&a=3&a=4" // >=1.4:

$.param({ a: [2,3,4] }) // "a[]=2&a[]=3&a[]=4" // <=1.3.2:

$.param({ a: { b:1,c:2 }, d: [3,4,{ e:5 }] }) // "a=[object+Object]&d=3&d=4&d=[object+Object]" // >=1.4:

$.param({ a: { b:1,c:2 }, d: [3,4,{ e:5 }] }) // "a[b]=1&a[c]=2&d[]=3&d[]=4&d[2][e]=5"

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/cuiwenke/p/2248904.html