看几道JQuery试题后总结（上篇）

无意中拿到的JQuery题目，拿来分享顺便总结总结

在JQuery对象中区分.text();.val();.html();.innerHTML;.innerTEXT()的用法与区别，用例子证明
在JQuery选择器中空格与大于号的区别
在一个表单中，查找所有选中的input元素,JQ的写法
指定的为某个div内部动态添加一个div的写法，外部添加一个div的写法(包括在该节点的前面以及后面)
JQuery对象与dom对象的区别，以及两者互相转换的方法
如何动态的为某个div添加class属性，如何移除class属性，以及如何获取div中某个属性的值，比如说Id的名称或者其他属性的值
JQuery里面的动画函数一般用什么？时间设置函数都有哪些,setTimeout()与setInterval()有何区别
写一个ajax例子出来，要标清楚各个参数的含义。以及ajax数据传输的时候有几种数据格式
要做出一个demo具体功能如下：页面中有一个按钮，点击按钮后弹出一个遮罩层，在遮罩层上面有一个div,在点击按钮后5秒后div内部出现内容。在div下面有一个隐藏按钮，点击后，遮罩层消失，div缓慢消失。回到页面打开状态

　　友情提示：遮罩要用到层级z-index,以及透明效果，5秒要用到时间函数，缓慢消失要用到动画效果，自己查询API文档。

第一题

题目：在JQuery对象中区分.text();.val();.html();.innerHTML;.innerTEXT()的用法与区别，用例子证明

无参数情况

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head runat="server">

     <title></title>

     <script src="jQuery/jquery-1.7.1.js" type="text/javascript"></script>

     <script type="text/javascript">

         $(document).ready(function () {

             var x1 = $("#x1").val();

             console.log(x1);

             var x2 = $("#x1").text();

             console.log(x2);

             var x3 = $("#x1").html();

             console.log(x3);

             var x4 = $("#x1").innerHTML;    //undefined

             var x4a = document.getElementById("x1").innerHTML;      //断桥残雪

             console.log(x4);

             console.log(x4a);

             var x5 = $("#x1").innerTEXT;

             var x5a = document.getElementById("x1").innerTEXT;

             console.log(x5);

             console.log(x5a);

         });

     </script>

 </head>

 <body>

     <form id="form1" runat="server">

     <div>

         <p id="x1">断桥残雪</p>

     </div>

     </form>

 </body>

 </html>

区别如下：
1. $("#x1").val();上述例子获取的是空字符串，但是如果我们改成<input />标签我们会发现返回的时input的value值
2. $("#x1").text();上述例子获取的是标记的内容，但是如果我们改成<input />标签我们会发现返回的是空字符串
3. Jquery没有innerHTML这个属性，当我们使用$("#x1").innerHTML得到的是undefined；在这里我们可以通过$("#x1")[0].innerHTML或者使用document.getElementById("x1").innerHTML获取标记中的值
4. 下面一个就用个例子吧
```
Hello world
火云邪神！
```
 JQuery代码：$("p").text();
 
 结果：Helloworld火云邪神！

有参数情况

.html有参数情况

<div></div>

$("div").html("<p>Bigod超神</p>");

.text有参数情况

<p>火云邪神超神！</p>

$("p").text("<i>断桥残雪</i>哇哇哇");

结果：[ 断桥残雪哇哇哇 ]

val有参数情况

<input type="text"/>

$("input").val("你们跌倒了没？崩溃了没？");

　　结果：你们跌倒了没？崩溃了没？

第二题

题目：在JQuery选择器中空格与大于号的区别

　　看到这个是不是马上想到了层级选择器，说句实话额，在JQuery中的组合选择器，层级选择器，基本过滤选择器以及子元素选择器，我这个记得最清楚，不是别的什么原因，而是这个用的方法最少，貌似只有4个来着。

　　还是给个例子吧：

然后将JQuery中的div>p改成div p，结果如下图：

　　我们不难发现使用空格可以选取#main下的所有子孙元素的p标记，而使用>只能选取#main下的子元素p标记，注意前一个是子孙，后一个是子

第三题

题目：在一个表单中，查找所有选中的input元素,JQuery的写法

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head runat="server">

     <title></title>

     <script src="jQuery/jquery-1.7.1.js" type="text/javascript"></script>

     <script type="text/javascript">

         $(document).ready(function () {

             var x = $("input:not(:checked)+span");

             alert(x.length);

         });

     </script>

 </head>

 <body>

     <form id="myform">

         <input type="text" /><br />

         <input type="checkbox" /><span>篮球</span><input type="checkbox" /><span>轮滑</span><br />

         <input type="password" /><br />

         <input type="submit" />

     </form>

 </body>

 </html>

PS：使用JQuery的过滤选择器：not()

第四题

指定的为某个div内部动态添加一个div的写法，外部添加一个div的写法(包括在该节点的前面以及后面)

内部添加一个div

<div id="parent"></div>

<script type="text/javascript">

        $(document).ready(function () {

            var parent = $("#parent");

            var obj = $("<div>火云邪神</div>");

            obj.appendTo(parent);

        });

</script>

　　在某个div前面和后面分别添加一个div

　　思想：首先找到当前div的父节点，然后然后使用对应的函数（后面我会提到）添加节点

<div id="parent">xyz</div>

　　/*节点前*/
　　<script type="text/javascript">

        $(document).ready(function () {

            var parent = $("#parent");

            var obj = $("<div>火云邪神</div>");

            parent.parent().prepend(obj);

        });

    </script>

　　/*节点后*/
　 <script type="text/javascript">

        $(document).ready(function () {

            var parent = $("#parent");

            var obj = $("<div>火云邪神</div>");

            parent.parent().append(obj);

        });

   </script>

引申一下操作DOM对象(以下15点引申并非本人总结，来自http://www.jb51.net/article/35606.htm)

Append方法用来在元素的末尾追加元素（最后一个子节点）
Prepend在元素的开始添加元素（第一个子节点）
After:在元素之后添加元素（添加兄弟节点）
Before：在元素之前添加元素（添加兄弟节点）
子元素.appendTo(父元素)：在元素的末尾追加一个子元素
子元素.prependTo(父元素):在元素的开始追加一个子元素
A.insertBefore(B) 将A插入到B的前面，等同于B.before(A)
X.insertAfter(B) 将X插入到Y的后面，等同于Y.after(X)
Empty():清空该元素下的所有子节点
Clone()克隆节点，支复制节点，不复制节点
Clone(true):克隆节点带事件
$("br").replaceWith("<hr/>");
$("br").replaceAll("<hr/>");
$("b").wrap("");将所有粗体字红色显示
wrapInner();在内部围绕

停电，伤不起！

　　近两天5点钟光停电，木有写完，本来把这些想一次写完的，来不及了，木有办法，下次写完，各位就原谅下咯！

　　------如果你觉得此文对你有所帮助，别忘了点击下右下角的推荐咯，谢谢！------

看几道JQuery试题后总结（上篇）的更多相关文章

看几道JQuery试题后总结（下篇）
感谢圆友的提醒昨天下午完成了9道试题中的前4道,之后好多园友存在些疑惑和建议,在这里我一并说一下吧.首先对于昨天第一题可能存在误导,在JQuery中并没有innerHTML这个属性,不过我们可以将J ...
你所不知道的库存超限做法服务器一般达到多少qps比较好[转] JAVA格物致知基础篇：你所不知道的返回码深入了解EntityFramework Core 2.1延迟加载（Lazy Loading） EntityFramework 6.x和EntityFramework Core关系映射中导航属性必须是public？藏在正则表达式里的陷阱两道面试题，带你解析Java类加载机制
你所不知道的库存超限做法在互联网企业中,限购的做法,多种多样,有的别出心裁,有的因循守旧,但是种种做法皆想达到的目的,无外乎几种,商品卖的完,系统抗的住,库存不超限.虽然短短数语,却有着说不完,道不 ...
Java中ArrayList相关的5道面试题
本文参考了 <关于ArrayList的5道面试题 > 1.ArrayList的大小是如何自动增加的? 这个问题我想曾经debug过并且查看过arraylist源码的人都有印象,它的过程是: ...
Java 208 道面试题：第一模块答案
目前市面上的面试题存在两大问题:第一,题目太旧好久没有更新了,还都停留在 2010 年之前的状态:第二,近几年 JDK 更新和发布都很快,Java 的用法也变了不少,加上 Java 技术栈也加入了很多 ...
Java并发编程75道面试题及答案
1.在java中守护线程和本地线程区别? java中的线程分为两种:守护线程(Daemon)和用户线程(User). 任何线程都可以设置为守护线程和用户线程,通过方法Thread.setDaemon( ...
两道面试题，带你解析Java类加载机制
文章首发于[博客园-陈树义],点击跳转到原文<两道面试题,带你解析Java类加载机制> 在许多Java面试中,我们经常会看到关于Java类加载机制的考察,例如下面这道题: class Gr ...
【转】两道面试题，带你解析Java类加载机制(类初始化方法和对象初始化方法)
本文转自 https://www.cnblogs.com/chanshuyi/p/the_java_class_load_mechamism.html 关键语句我们只知道有一个构造方法,但实际上Ja ...
Java 208 道面试题：Java 基础模块答案
目前市面上的面试题存在两大问题:第一,题目太旧好久没有更新了,还都停留在 2010 年之前的状态:第二,近几年 JDK 更新和发布都很快,Java 的用法也变了不少,加上 Java 技术栈也加入了很多 ...
js 从两道面试题加深理解闭包与箭头函数中的this
壹 ❀ 引在本文之前我已经花了两个篇幅专门介绍了JavaScript中的闭包与this,正好今早地铁上看到了两道面试题,试着做了下发现挺有意思,所以想单独写一篇文章来记录解析过程.若你对于闭包与t ...

随机推荐

细看InnoDB数据落盘图解 MYSQL 专家hatemysql
http://hatemysql.com/?p=503 1. 概述前面很多大侠都分享过MySQL的InnoDB存储引擎将数据刷新的各种情况.我们这篇文章从InnoDB往下,看看数据从InnoDB的 ...
vim中设置Python自动补全
转自:http://blog.csdn.net/wangzhuo_0717/article/details/6942428 在VIM里面增加python的autocomplete功能的做法如下: 1. ...
网络IPC：套接字之套接字选项
套接字机制提供两个套接字选项接口来控制套接字的行为.一个接口用来设置选项,另一个接口允许查询一个选项的状态.可以获取或设置的三种选项: (1)通用选项,工作在所有套接字类型上. (2)在套接字层次管理 ...
sql server where、group by、order by 执行顺序
2012-02-07 19:39 先where 条件1,再 group by 条件2再 order by 条件3 如果声明了 GROUP BY 子句,输出就分成匹配一个或多个数值的不同组里. 如果出现 ...
QFtp类参考
QFtp是一个用来实现FTP协议的类. 详情请见…… #include <qftp.h> 继承了QNetworkProtocol. 所有成员函数的列表. 公有成员 QFtp () virt ...
Swift 3必看：新的访问控制fileprivate和open
在swift 3中新增加了两中访问控制权限 fileprivate和 open.下面将对这两种新增访问控制做详细介绍. fileprivate 在原有的swift中的 private其实并不是真正的私 ...
DAG上动态规划
很多动态规划问题都可以转化为DAG上的最长路,最短路,或路径计数问题. 硬币问题: 有N中硬币,面值分别为v1,v2,v3,……vn,每种都无穷多,给定非负整数S,可以选用多少个硬币,使他们的总和恰好 ...
Balanced Lineup(最简单的线段树题目)
Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 33389 Accepted: 15665 Case Time Limit ...
加载程序到android虚拟机报错： android.widget.RelativeLayout cannot be cast to android.widget.Button
05-23 02:53:48.416: E/Trace(875): error opening trace file: No such file or directory (2) 05-23 02:5 ...
U-boot新手入门
U-boot新手入门一.编译U-boot 二.U-boot命令详解 1.帮助命令 # help autoscr -run script from memory base -print or set ...

看几道JQuery试题后总结（上篇）

无意中拿到的JQuery题目，拿来分享顺便总结总结

第一题

第二题

第三题

第四题

停电，伤不起！

看几道JQuery试题后总结（上篇）的更多相关文章

随机推荐

热门专题