文档章节

【学以致用】JQuery

Asktao
 Asktao
发布于 2017/04/28 11:01
字数 2022
阅读 25
收藏 2

一、JQuery介绍

        JQuery API 1.x--3.x

  1. JQuery是一个类库(或称模块)
  2. JQuery是DOM/BOM/JavaScript的类库
  3. JQuery版本:1.X(兼容所有版本浏览器)、2.X()、3.X()
  4. JQuery和DOM的转换:
    1. jquery对象:    $("#d1")[0] => DOM对象
    2. DOM对象:     $(document.getElementById("d1")  => jquery对象

二、查找元素

    1、选择器:

  1. id选择器
  2. class选择器
  3. 标签选择器
  4. 组合选择器
    <div id="d1">id选择器:$("#d1")</div>
    <div class="c1">class选择器:$(".c1")</div>
    <p>标签选择器:$("p")</p>
    <span>组合选择器:$("#1,.c1,p,span");</span>
    
    <script src="jquery-1.12.4.js"></script>
    <script>
        var d1 = $("#d1");                //id选择器
        var c1 = $(".c1");                //class选择器
        var p_tag = $("p");               //标签选择器
        var C_sel = $("#1,.c1,p,span");   //层组合选择器
    </script>
  5. 层级选择器
    $("#div1 #div2");        //层级选择器 空格 子子孙孙
    $("#div1>#div2");        //层级选择器 大于号 子层
    $("#div1+#div2");        //层级选择器 加号 上一个兄弟元素
    $("#div1-#div2");        //层级选择器 减号 下一个兄弟元素
  6. 基本筛选器
    $('li:first');            //选择所有<li>标签中的第一个li
        $('#div1>li:first');      //也可以进一步筛选
    $('li:odd');              //选择所有<li>标签中的偶数位
    $('li:even');             //选择所有<li>标签中的奇数位
    $('li:last');             //选择所有<li>标签中的最后一个li
    $('li:eq(0)');            //选择所有<li>标签中索引位置的第一个li
    $('li:gt(3)');            //选择所有<li>标签中索引位置大于4的所有li
    $('li:lt(3)');            //选择所有<li>标签中索引位置大于4的所有li
    $('li:header');           //选择所有<li>标签中所有<h1>--<h3>的标签
  7. 属性选择器
    $("div[id]")                //查找所有含有 id 属性的 div 元素
    $("input[name='i1']");      //查找所有 name 属性是 i1 的 input 元素
    $("input[name!='i1']");     //查找所有 name 属性不是 i1 的 input 元素
    $("input[name^='news']");   //查找所有 name 以 'news' 开始的 input 元素
    $("input[name$='end']");    //查找所有 name 以 'end' 结尾的 input 元素
    $("input[name*='man']");    //查找所有 name 包含 'man' 的 input 元素
    $("input[id][name$='man']");//找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的
  8. 表单选择器
    $(":input");    //==>    $("input");
    $(":text");     //==>    $("input[type='text']");
    //其他可选: :input :text :password :radio :checkbox :submit :image :reset :button :file
  9. 表单属性选择器
    //表单对象属性
    $(":checked");     //==>    $("input:checked");
    //其他可选::enabled :disabled :checked :selected

    2、筛选:

$('#i1').next()                 //当前元素的下一个
$('#i1').nextAll()              //当前元素以后所有的
$('#i1').nextUntil('#ii1')      //当前元素以后直到"#ii1"前所有的

$('#i1').prev()                 //当前元素的前一个
$('#i1').prevAll()              //当前元素以前所有的
$('#i1').prevUntil('#ii1')      //当前元素以前直到"#ii1"后所有的

$('#i1').parent()               //当前元素的父层
$('#i1').parents()              //所有祖先的集合[父,爷,太爷]
$('#i1').parentsUntil("body")   //当前元素所有的父级标签直到"body"前所有的

$('#i1').children()         //当前元素的所有子元素
$('#i1').siblings()         //当前元素的所有兄弟元素
$('#i1').find('a')          //搜索所有与指定表达式匹配的元素

$('li:eq(1)')               //搜索所有li标签中的第二个元素的所有HTML内容
$('li').eq(1)               //搜索所有li标签中的第二个元素的所有HTML内容

$('li').first()                 //获取所有li的第一个元素
$('li').last()                  //获取所有li的最后一个元素
$('li').hasClass("classname")   //判断样式是否存在当前元素
$("li").index(this);        //返回搜索匹配的元素,并返回相应元素的索引值,从0开始计数。
$("#d2").index();        //如果不传递参数,则返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。

三、操作元素

    1、文本操作

$("p").text()                   //获取p标签的值
$("p").text("设置值")           //设置p标签的值,纯文本

$("p").html()                           //获取p标签的值
$("p").html("<span>设置值</span>")      //设置p标签的值,所有HTML

$("input:text").val()               //获取文本框的值
$("input:text").val("添加信息")     //设置文本框的值

    2、样式操作

$(".div").addClass("classname");            //添加样式
$(".div").removeClass("classname");         //删除样式
$(".div").toggleClass("classname");         //判断样式是否存在,存在则删除,不存在则添加。

    3、属性操作

//专门用于自定义属性的。注:JQuery1.x 2.x中操作单选和多选框时,删除后不能重新选中。推荐使用prop()
$("#input").attr("data-style");               //获取元素指定属性的值
$("#input").attr("data-style","FreeStyle");   //设置元素指定属性的值
$("#input").removeAttr("attrname");           //删除元素的指定的属性

//专门用于radio和checkbox。我觉得设置其他属性也可以。
$("checkbox").prop("checked");           //获取checked值
$("checkbox").prop("checked",true);     //设置checded值
$("checkbox").removeProp(name);          //用来删除由.prop()方法设置的属性集

    4、文档处理

$("#u1").append("<li>内部插入:插入位置[-1]</li>");      //u1元素,在底部增加一个。
("<li>内部插入:插入位置[-1]</li>").appendTo("#u1");     //append的一个反转,将li添加到#u1的底部。

$("#u1").prepend("<li>内部插入:插入位置[0]</li>");      //u1元素,在前增加一个。
("<li>内部插入:插入位置[0]</li>").prependTo("#u1");    //prepend的一个反转,将li添加到#u1的底部。

$("#u1").after("<li>外部插入:和#u1同级,在#u1前一位</li>");
$("#u1").before("<li>外部插入:和#u1同级,在#u1后一位</li>");

$("#u1 li").eq(1).remove();      //删除#u1下所有li标签的第二个li标签
$("#u1 li").eq(1).empty();       //删除#u1下所有li标签的第二个li的内容
$("#u1 li").eq(3).clone();       //克隆一份,第四个li元素。

    5、CSS操作

$("#d1").css("display");            //获取CSS样式值
$("#d1").css("display","none");     //设置CSS样式值

    6、位置与尺寸

//位置
$(window).scrollTop();           //获取窗口的当前页面距离顶部的距离
$(window).scrollTop(100);        //设置窗口的当前页面距离顶部的距离

$(window).scrollLeft();          //获取当前水平滚动条到最左侧的距离
$(window).scrollLeft(0);         //设置当前水平滚动条到最左侧的距离

$("#d3").offset();                //获取元素在HTML的坐标。返回值:object:{top:20,left:60}
$("#d3").offset().top;            //获取元素在HTML的坐标。返回值:20
$("#d3").offset().left;           //获取元素在HTML的坐标。返回值:60
$("#d3").position();              //获取匹配元素相对父元素的偏移
$("#d3").position().top;          //获取匹配元素相对父元素的垂直偏移
$("#d3").position().left;         //获取匹配元素相对父元素的水平偏移

//尺寸
$("#d3").height();              //获取元素纯高度
$("#d3").height(300);           //设置元素的高度
$("#d3").innerHeight();         //获取第一个匹配元素内部区域高度(包括补白、不包括边框)。
$("#d3").outerHeight();         //获取第一个匹配元素外部高度(默认包括补白和边框)。
$("#d3").outerHeight(true);    //设置为 true 时,计算边距在内。

$("#d3").width();                //获取元素纯宽度
$("#d3").width(200);             //设置元素的宽度
$("#d3").innerWidth();           //获取第一个匹配元素内部区域宽度(包括补白、不包括边框)。
$("#d3").outerWidth();           //获取第一个匹配元素外部宽度(默认包括补白和边框)。
$("#d3").outerWidth(true);      //设置为 true 时,计算边距在内。

    7、事件

  1. DOM:有3种事件绑定的方式。
  2. JQuery:
    //所有JQ所有事件:
    //blur|change|click|dblclick|
    //error|focus|focusin|focusout|
    //keydown|keypress|keyup|
    //mousedown|mouseenter|mouseleave|mousemove|mouseout|mouseover|mouseup
    //|resize|scroll|select|submit|unload|
    $("li").click();                           //绑定方式之一
    $("li").bind("click",function(){});        //绑定方式之二
    $("li").unbind("click",function(){});      //解除方式二的绑定
    $("ul").delegate("li","click",function(){});    //绑定方式之三,委托的方式。(如果c1添加了新li,click事件依然生效)
    $("li").undelegate("click");                //解除方式三的绑定。不带参数表示删除所有delegate()创建的事件。(3.0中已删除)
    $("li").on("click",function(){});          //解除方式四的绑定
    $("li").off("click",function(){});         //解除方式四的绑定
    
    //阻止事件发生
    $("li").click(function(){return false});    //阻止事件发生
  3. script的加载顺序
    $(function(){
        //当页面‘框架’都加载完毕后,加载此处代码
    
        //PS:通常直接在<script>标签中的代码,是当页面所有元素都加载完毕后,再加载。
    })
  4. JQuery的扩展
    $.extend({"xihao":function(){
        return "HAHA"
    }});
    var v = $.xihao()
    alert(v)
    
    
    $.fn.extend({"asktao":function(){
        return "问道"
    }});
    //调用asktao方法
    var v = $("#d3").asktao();
    alert(v)

 

总结,JQ到这里只是一个初步学习。以后还要多看JQuery文档,多做实例!稳步前行。

 

 

 

© 著作权归作者所有

共有 人打赏支持
Asktao
粉丝 27
博文 92
码字总数 111183
作品 0
丰台
程序员
私信 提问
25 个顺手的jQuery 教程

jQuery 的教程真的是非常丰富呀,下面是来自http://slodive.com/web-development/jquery-tutorials/的文章。 25 个顺手的jQuery 教程,列表如下: Portfolio Image Navigation with jQuery M...

老枪
2011/08/24
924
1
240多个jQuery插件(1)

文件上传(File upload) Ajax File Upload. jQUploader. Multiple File Upload plugin. jQuery File Style. Styling an input type file. Progress Bar Plugin. 表单验证(Form Validation) j......

五味格子
2011/05/11
0
0
240多个jQuery插件(2)

表格等(Tables, Grids etc.) UI/Tablesorter. jQuery ingrid. jQuery Grid Plugin. Table Filter - awesome!. TableEditor. jQuery Tree Tables. Expandable “Detail” Table Rows. Sortab......

五味格子
2011/05/11
0
0
41个很棒的jQuery教程

这里是很棒的jQuery教程的一个大集合,并包括步骤说明。 41个jQuery教程列表如下: 1. JQuery for Absolute Beginners: The Complete Series 2.An Intensive Exploration Of jQuery 3.10 Th...

小卒过河
2011/07/23
4.3K
7
js:滚动页面时自动激活对应菜单中的条目

这个在Change Active Menu Item on Page Scroll?有详细的讨论。对应的代码在http://jsfiddle.net/mekwall/up4nu/。 下面是代码,我做了些小的改动。 效果如下: firebug控制台输出如下: jq...

樂天
2015/11/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Eos如何删除钱包

在使用Eos的keosd钱包软件时,如果要删除EOS中指定名称的钱包,最简单的办法是直接删除钱包文件,不过在删除钱包之前,需要先停止钱包软件的运行。 学习EOS应用开发要选这个:【EOS智能合约与...

geek12345
4分钟前
0
0
js操作时间

获取当前时间 function getSystemDate(){ var systemDate = new Date(); // 获取当年 var year = systemDate.getFullYear(); // 获取当月 (月+1是因为js中......

简心
10分钟前
0
0
区块链开发教程推荐

区块链的重要性已经毋庸置疑,但对大多数跃跃欲试的开发者而言,去中心化思想、非对称加密、共识算法等技术点的理解和运用,都是入门区块链开发的挑战。合适的区块链开发教程可以极大地缩短区...

笔阁
11分钟前
0
0
菜单menuView总结

1、FTPopOverMenu

_____1____
22分钟前
2
0
MyEclipse教程:Web开发——部署和测试Web项目

MyEclipse 在线订购年终抄底促销!火爆开抢>> MyEclipse最新版下载 本教程向用户展示了使用关联的Web项目创建Web片段项目的机制。用户还可以获得要检查的示例项目。在本教程中,用户将学习如...

电池盒
38分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部