客户端网页编程10——Jquery

客户端网页编程10——Jquery

jQuery 就是一些方法的封装，类似jar包。 

导入后，能够直接调用的方法。

1.导入js文件

代码如下：

一般导入压缩包，源码留给自己看吧（0 _ 0）。

2.常用的方法介绍

window.onload类似方法

$(document).ready(function(){

});//这个相当于window。onload = functions（）｛｝;

等待系统载入完全才执行的代码。

选择器相关方法

jquery 中封装了document.getElementBy？？？ 方法。 

导入jquery后可以直接通过：

$(“参数”) 这个来直接获取对象

1.通过id获取对象。

var op1 = $("#p1");

2.根据class获取元素

var op2 = $(".p1");

3.通过name属性获得元素

var ospan= $("span[name = span]");

4.通过标签名字获得元素

var odiv = $("div");

5.选中元素的子元素

$("#ul li:first-child")
/*先通过id ul 找到ul，再找到ul下面第一个li*/

6.对于表格选择的操作。

$("#mytable tr:even")
$("#mytable tr:odd")

偶数行 even 奇数行 odd。

对于属性的操作

1.得到属性的值，设置属性。 

方法采用 对象.attr() 

一个参数是获取属性值，两个参数是设置属性值(第一个是属性名字，第二个就是值。) 

eg：

$("[name=test]").attr("title","text1");

2.移除属性（直接移除，不是设置为空） 

通过对象.removeAttr(“属性名称”); 

eg：

$("[name=test]").removeAttr("title");

3.动态添加class属性。 

采用 

第一种：对象.attr(“class”,”sk”);

第二种：对象..addClass(“sk”); 

addclass是设置class属性，调用方法的时候 可以传递一个函数，最后必须返回一个值就可以了。 

——–sk是class值。

4.把class属性设置为空，不是移除。

对象.removeClass();

5.反向操作 0。0—-toggleClass() 

传入的参数是如果之前对象的class中有xxx，就把xxx去掉，如果没有，就给原来的加上xxx 

eg：

$("#ul1 li").toggleClass("as");
/*给所有的li中class没有as的加上，有as的去掉*/

6.获取元素中所有的文本内容

对象.text()。 

eg：

$("#span1").text();

7.获取元素内部的html语句。 

对象.html(); 

html方法,封装了js里面的 innerHTML属性，如果传了参数就是用传入的去替换里面的。

eg：

$("#ul1").html($("<li>万岁</li>");

8.获取输入框中的值。

输入框对象.val(); 

eg：

$("input[name=username]").val()

筛选元素

1.获取到集合中指定下标的元素。

eg:

$("li").eq(1);
/*这个$("li")找出来肯定是一个集合，然后调用eq（i）传入一个下标值，即可获得指定下标的元素。*/

2.获得第一个，最后一个元素。

eg:

$("li").first();
$("li").last();

3.判断元素是否有指定class属性。 

采用hasClass方法。 

eg：

$("li").hasClass("sk");

hasClass 用来判断当前元素是否有指定的class属性,有就返回true，没有就返回false。

jquery获取到一个集合，取出集合中的内容，默认返回第一个值的内容 

但是。text（） 方法有特性。会返回集合中的所有内容。

4.循环取出内容。 

采用each方法

eg：

$("li").each(function(){
$(this).html();//这里就相当于循环操作
});

5.筛选出符合指定条件 

采用filter方法，filter从集合中筛选出符合指定条件的元素。 

eg：

$("div").filter(".box").attr("style","width:200px ;height:200px ;background :red");
/*从div集合中找到有class属性为box的div，然后设置样式，链式操作。*/

6.找到包含xx的元素 

采用has方法。 

has() 包含： 获取到元素内部(不仅指子元素，孙元素也要算上)的条件是否符合要求，最终操作的还是前面的是那个

eg：

$("div").has(".span").css("border-radius","30px");
/*找到div集合中包含有class 为span的div。设置div样式*/

7.找到xxx元素。 

eg：

$("div").find(".span").css("border","5px solid black");
/*其实感觉这段代码前面完全可以用$(".span")来获取，不过这个方法要了解*/

find() ,针对的是子类，操作的也是子类。

8.is方法。判断是否是xxx 

eg：

$(".span").parent().is(".box")
/*判断找到的span的父类是不是用class =box属性来知道的元素，是就返回true，不是就返回false*/
$(".box").children().is(".span")