金沙娱樂城

Jquery 基础

2015-8-28 10:43:20 次浏览 分类:网站建设

什么是Jquery?

Jquery是一套Javascript脚本库。

使用时需要先下载下来,并引用到项目中。

下载地址:http://jquery.com/download/

金沙娱樂城 目前jquery分为 1.x 和 2.x两种版本, 2.x以上不再支持i8及以下浏览器。

Jquery语法

$(selector).action() 美元符开头 选择器名.执行的方法

jquery(document).read(function(){}); //等同于load 文档加载完毕后运行的函数 $(function(){}); //简写

jquery对象与DOM对象

在DOM操作中,将一个按钮禁用

document.getElementById("btn").disabled=true; 

上面执行了一个javascript DOM操作,如果这样使用jquery对象来调用DOM属性则会报错。

$("#btn").disabled=true; 

解决办法:

1、可以使用jquery对象的attr方法实现

$("#btn").attr("disabled","true");

金沙娱樂城 2、把Jquery对象转换成DOM对象

$("#btn")[0].disabled=true; 
$("#btn").get(0).disabled=true;

金沙娱樂城 使用$("").get(0) 或者$("")[0] 可以将jquery对象转换为DOM对象,然后再调用DOM的属性即可。

金沙娱樂城 当然这只是操作一个元素,如果多个元素的话遍历集合,get(i)即可

$(":text").each(function(i){ //$(this).get(i).disabled=true; //$(this).attr("disabled","true"); });

同时也可以将DOM对象转换为jquery对象

var v = document.getElementById("btn"); var $v = $(v); //使用$(dom);即可转换  $v.attr("disabled","true"); //然后使用jquery对象的attr方法即可

Jquery选择器

金沙娱樂城 在DOM编程中,我们只能使用有限的函数根据id或者标签获得DOM对象。

在Jquery中,使用选择器可以获取页面上任意一个或一组对象。

金沙娱樂城 $("#testId")  选取id为testId的元素 等同于document.getElementById("testId");

$符号在Jquery中代表对Jquery对象的引用。

$("#testId") 等同于 jquery("#testId");

选择器的种类

金沙娱樂城 1、基础选择器

$("#divId")  选择id为divId的元素
$("p") 选择所有p标签
$(".red") 选择所有样式为red的元素
$("*") 选择所有元素
$("#divId , p , .red") 使用,逗号进行分割,然后拼成一个选择器,会同时选择这几个选择器。

2、层次选择器

$("#divId div") 选择id为divId 下的所有div
$("#divId>div") 选择id为divId 下的直接子节点div
$("#divId+div") 选择id为divId 的下一个同级div标签
$("#divId~div") 选择id为divId 的所有同级div标签

3、基本过滤器

$("tr:first") 选择表格的第一行
$("tr:last") 选择表格的最后一行
$("input:not(:checked)") 查找所有未选中的input元素
$("tr:even") 查找表格所有的偶数行 从0开始 2 4 6 $("tr:odd") 查找表格所有的奇数行 1 3 5 $("tr:eq(1)") 查找表格中的第二行 index从0开始
$("tr:gt(3)") 查找大于3的行
$("tr:lt(3)") 查找小于3的行
$(":header") 选择h1~h6的header标签
$(":animated") 选择所有动画元素

金沙娱樂城 4、内容过滤器

$("div:contains('david')") 选择所有包含“david”的div元素
$("td:empty") 查找所有不为空的元素
$("div:has(p)") 查找所有包含p元素的div
$("td:parent") 查找含有子元素的td元素

5、可见性过滤器

$("tr:hidden") 查找所有不可见元素
$("tr:visible") 查找所有可见元素

6、属性过滤器

$("input[type]") 匹配所有包含type属性的input元素
$("input[name='sex']") 匹配所有name为sex的input元素
$("input[name!='sex']") 匹配所有name不等于sex的input元素
$("input[name^='ch']") 匹配所有name以ch开始的input元素
$("input[name$='t']") 匹配所有name以t结尾的input元素
$("input[name*='bai']") 匹配所有name包含‘bai’的input元素
$("input[name='sex'][type='checkbox']")  复合属性选择,匹配name为sex并且type为checkbox的input元素

7、子元素过滤器

$("ul li:nth-child(2)") 匹配ul的第2个子元素 从1开始 eq是0开始
$("ul li:first-child") 匹配第一个子元素
$("ul li:last-child") 匹配最后一个子元素
$("ul li:only-child") 查找ul中是唯一子元素的li

金沙娱樂城 8、表单选择器

$(":input") 匹配所有input元素 包含select 、button、textarea、input。
$(":text") 匹配所有文本框
$(":password") 匹配所有密码框
$(":radio") 匹配所有单选按钮
$(":checkbox") 匹配所有复选框
$(":submit") 匹配所有提交按钮
$(":image") 匹配所有图像
$(":reset") 匹配所有重置按钮
$(":button") 匹配所有按钮
$(":file") 匹配所有文件域

9、表单过滤器

$("input:enabled") 所有可用的input元素
$("input:disabled") 所有不可用的input元素
$("input:checked") 所有选中的元素
$("select option:selected") 选中的下拉元素

操作元素

创建元素

金沙娱樂城 在javascript中创建元素需要使用createElement,并且编写大量的js代码。

在jquery中创建元素使用 $(html代码) 来创建元素。

金沙娱樂城 $("<a href="#">测试</a>") 这样就创建完毕了,然后指定需要添加到页面的位置即可。

$("<a href='#'>测试</a>").appendTo("body"); //添加到body的末尾中

对应有一个append方法 $(位置).append(代码);

$("body").append("<span>abc</span>")

金沙娱樂城 如果想创建到起始位置使用prepend()方法

$("body").prepend("<h1>h1</h1>") //追加body中的 最前面
$("<h2>h2</h2>").prependTo("h1"); //对应的prependTo()方法

插入元素

刚刚的操作都是添加到具体的标签中,可以添加到标签的前面和后面,在jquery中可以使用insertBefore()和insertAfter()插入到某个节点之前或之后。

//insertBefore $("<h3>h3</h3>").insertBefore("#deng"); //插入到#deng上面 //insertAfter $("<h4>h4</h4>").insertAfter("#deng"); //#deng下面

也可以使用简写before()和after(),但更推荐上面的

//before $("#deng").before("<p>new</p>") //after 之后 $("#deng").after("<p>new</p>")

删除元素

金沙娱樂城 Jquery中删除元素有两种方法:empty()删除所有子节点、remove(selector) 筛选删除

//empty() $("body").empty(); //清空body下的所有子节点 //remove(); $("p").remove(); //把P都干掉 $("a[href='#']").remove(); //a href为#的全部删除

获取/修改属性

$("btn").attr("type"); //获取type属性的值 $("btn").attr("type","button"); //设置type属性的值

操作样式

操作样式名:金沙娱樂城hasClass(是否存在)、removeClass(移除)、addClass(添加)、toggleClass(切换)

if($("#id").hasClass("red")){ //hasClass 是否存在某样式名 $("#id").removeClass("red"); //removeClass 删除指定样式名 }else{
    $("#id").addClass("red"); //addClass 添加指定样式名 }

然后上面的这一系列判断 toggleClass自己可以完成

$("#btn").click(function(){
    $("#id").toggleClass("red"); //点一下添加 再点一下移除 });

金沙娱樂城 除了可以设置类名外还可以使用css()方法直接写入样式

//.css(样式名,值)  $("div").css("height","100px").css("width","200px").css("border","1px solid #ccc"); //.css({对象}) $("div").css({
    height:"200px",
    width:"200px",
    border:"2px solid #ccc" });

获得内容

text()、html()、val()

$("p").text(); //获得或设置元素文本内容 $("p").html(); //获取或设置元素的内容包含html标记 $("input").val(); //设置或获取表单字段的值

操作尺寸

$("div").width(); //获得或设置宽度 $("div").height(); //获得或设置高度 $("div").innerWidth(); //返回宽度 包含内边距 $("div").innerHeight(); //返回高度 包含内边距 $("div").outerWidth(); //返回宽度 包含内边距及边框 $("div").outerHeight(); //返回高度 包含内边距及边框

Jquery遍历

map循环

金沙娱樂城 用于遍历一个数组,并且根据需要返回一个新数组。

金沙娱樂城 语法:$.map(array,function(value,index){return value});

var arr=["a","b","c","d","e"]; var newArr = $.map(arr,function(value,index){ //console.log(index+","+value); //索引 值 return value + "," + index;
});

console.log(newArr.length); //5  得到一个新数组

金沙娱樂城 例:将一个数组中 大于3的数 翻三倍

var arr=[12,2,3,5,4]; var newArr = $.map(arr,function(value,index){ if(value>3)
    { return value * 3;
    }
}); for(var item = 0;item < newArr.length;item++)
{
    console.log(newArr[item]);
}

each循环

遍历对象或数组,不返回内容。

金沙娱樂城 语法:each(function(i){ return false;//结束遍历});

console.clear(); var o = {name:"daviad",age:18,sex:"男"};
$.each(o,function(index,value){
    console.log(index + "," + value); return false; //使用return false 停止循环 }); //name,daviad //age,18 //sex,男

each()方法

console.clear();
$("a").each(function(i){ //遍历所有a标签 打印所有href属性 console.log($(this).attr("href"));
});

对应选择器的一些方法

$("td").parent(); //返回直接父元素 $("td").parents(); //返回所有父元素及祖父元素 $("td").parentsUnitl("tr"); //返回td到tr的元素 $("ul").children(); //ul下的子节点 $("div").find("p") //查找div下的所有p $("div").siblings() //除了自己所有同级元素 $("div").next() //查找div同级下一个div 同胞元素 $("div").nextAll() //查找div后的所有div $("div").prev() //div同级上一个div 同胞元素 $("div").prevAll() //div同级上所有 $("ul li").first() //第一个 $("ul li").last() //最后一个 $("ul li").eq(1) //第二个 从0开始 $("p").filter(".cc") //p中没有cc类名的 全部过滤掉 $("p").not(".cc") //p中不带cc类名的元素

 

上一篇:20个优秀的国外扁平化网页设计作品

下一篇:没有了

推荐知识

  • 网站建设未来的发展趋势

    网站建设也是一个随着互联网的发展起来的新兴的行业,十多年的发展,已有相对稳定的套路模型,至于未来会有怎么样的发展,小编今天给您分享,网站建设未来的发展趋势:网站建设发展趋势一、统一成一个单一版本的桌面和移动反应灵敏性,移动设备不可或缺,我们现在正朝着一个共…

    2015-7-28 17:37:40
  • Metro、简洁、响应式Web设计

    今天,兰州网站建设在中国站长网上看到了一篇关于《Web设计的8大趋势》的文章,细细读来,对我们的设计理念有很大的提高,也对未来的设计趋势有了一个崭新的认识,在此,同盟软件将文章转载,希望可以帮助更多的朋友。 weavora网站近日发表一篇文章《Web design trends we lov…

    2015-7-23 9:49:04
  • 天水网站推广要避免SEO作弊

    相信做过天水SEO的站长都知道优化过程中如果被搜索引擎判定为作弊行为,最终的结果必定是降权k站处理。既然我们知道作弊行为会有如此大的不利之处,但还是有少站长急功近利,在天水网站推广过程中利用作弊在短时间内提高网站在搜索结果中的排名。但事实上,不仅仅是搜索引擎,…

    2014-11-26 17:25:53
  • 什么是网站建设

    说起什么是网站建设,首先我们需要明白什么是网站。简单来说网站是人们进行宣传产品和服务、发布资讯信息的一个平台,由域名、服务器空间、程序三要素组成,同时网站又是网页的集合,因为一个网站往往不止一个网页。网站现在已经是企业展示自身形象、发布产品信息、联系网上客…

    2014-7-13 16:57:48