文档章节

【学以致用】JQuery

Asktao
 Asktao
发布于 2017/04/28 11:01
字数 2022
阅读 23
收藏 2
点赞 0
评论 0

一、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
粉丝 26
博文 88
码字总数 111126
作品 0
丰台
程序员
jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge ⋅ 05/17 ⋅ 0

JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒 ⋅ 05/10 ⋅ 0

Zepto.js 简介(第一章)

Zepto.js 简介(第一章) 在做C端-H5的时候,很多时候会用到Zepto.js,所以在这里,我就把它整理一下。 什么是Zepto zepto是轻量级的JavaScript库,专门为移动端定制的框架 与jquery有着类似...

张靖bibibi ⋅ 前天 ⋅ 0

【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu ⋅ 06/18 ⋅ 0

jQuery中,html、val与text的区别与联系

文章作者:Tyan 博客:noahsnail.com | CSDN | 简书 本文主要介绍如何使用jQuery中的html(),text()和val()三种方法,用于读取、修改元素的html结构,元素的文本内容,以及表单元素的value值...

quincuntial ⋅ 2016/11/22 ⋅ 0

jQuery函数attr()和prop()的区别

在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同。 但不得不说的是,这两个函数的用处却并不相同。下面我们来详细介绍这两个函数之间的区别...

Apirl ⋅ 05/16 ⋅ 0

来学着写自己的“jQuery”

jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作 jQuery是开源软件,使用MIT许可证授权。jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择文档...

YyzclYang ⋅ 05/24 ⋅ 0

强大的JQuery-自定义插件

====jQuery插件编写原则===== 1.命名 jQuery..js 2.插件内部,this指向的是当前选择器取得的JQuery对象,不是内部对象, 例如click(), 内部的this指向的是DOM元素 3.this.each可以遍历所有元素...

chengfei_liu ⋅ 05/25 ⋅ 0

javascript中查看元素事件函数的一些技巧

在分析一些网页的时候,经常会发现点击某个按钮会触发某个动作,当页面比较复杂,包含的js文件又多,这时候要找到这段触发函数的代码写在哪里就比较困难。比如,在某个html页面中,发现如下一...

技术小甜 ⋅ 2017/11/07 ⋅ 0

js (jQuery) 之 取值

都是一些老生常谈,没什么新东西,算是开发过程中不知道怎么写去百度的一些东西 。都说程序员写博客是一个好习惯,算是一份保存笔记,以后不用到处百度然后出来的一些答非所问的答案 。 1: ...

architect刘源源 ⋅ 05/07 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Android JNI 读写Bitmap的方法

Java层创建Bitmap,通过JNI将Bitmap传到C/C++进行处理 Java部分 public static native boolean greenBitmap(Bitmap bitmap); C/C++部分 JNIEXPORT jboolean JNICALL Java_com_test_Test_gree......

国仔饼 ⋅ 17分钟前 ⋅ 0

一次性让你懂async/await,解决回调地狱

什么是async? 欢迎留言讨论 async 函数是 Generator 函数的语法糖。使用 关键字 async 来表示,在函数内部使用 await 来表示异步。相较于 Generator,async 函数的改进在于下面四点: 内置执...

阿K1225 ⋅ 18分钟前 ⋅ 0

angular常用命令

.下载更新操作 1.利用npm下载angular的命令行工具AngularCLI: npm install -g @angular/cli 2.下载jquery: npm install --save jquery 3.更新npm: npm i -g npm 4.更新angular: ng update ......

消散了的诗意 ⋅ 20分钟前 ⋅ 0

window.print 页面打印

定义和用法 print() 方法用于打印当前窗口的内容。 语法 window.print(); window.print() 实际上,是浏览器打印功能菜单的一种程序调用。与点击打印功能菜单一样,不能精确分页,不能设置纸型...

初学者的优化 ⋅ 21分钟前 ⋅ 0

魔兽世界 7.0版本上 PVE装备全攻略

  T套 因为大家应该都会打穿副本的所以具体是哪个boss我就不说了。   T1: 所有套装都在【熔火之心】出   T2: 头原来是在【奥妮克希亚的巢穴】改到黑翼之巢的奈法利安了,腿是在【熔火之...

wangchen1999 ⋅ 21分钟前 ⋅ 0

java.math.BigDecimal使用小结

原文地址 java.math.BigDecimal使用小结 divide方法 使用BigDecimal.divide方法时一定要考虑: 除数是否为0 商是否是无限小数 正确的使用方式 判断除数是否为0,是0做另外的处理逻辑 调用除法...

666B ⋅ 24分钟前 ⋅ 0

关于qstring转char乱码问题。

if (OpenClipboard(NULL)) { HGLOBAL hgClip; EmptyClipboard(); QByteArray byay = FValue.toLocal8Bit(); //转latin编码 char *bochsrc_line = byay.data(); hgClip = GlobalAlloc(GMEM_DD......

backtrackx ⋅ 24分钟前 ⋅ 0

了解SSH加密和连接过程

介绍 SSH或安全shell是安全协议,也是安全管理远程服务器的最常用方式。通过使用多种加密技术,SSH提供了一种机制,用于在双方之间建立加密安全连接,对彼此进行身份验证,以及来回传递命令和...

吴伟祥 ⋅ 31分钟前 ⋅ 0

微信小程序

小程序的全局配置app.json 微信小程序的全局配置保存在app.json文件中。开发者通过使用app.json来配置页面文件(pages)的路径、窗口(window)表现、设定网络超时时间值(networkTimeout)以...

上官清偌 ⋅ 34分钟前 ⋅ 0

【转】百度坐标坐标系之间的转换(JS版代码)

/** * Created by Wandergis on 2015/7/8. * 提供了百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换 *///定义一些常量var x_PI = 3.1415926535897932...

HAVENT ⋅ 35分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部