看几道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 ...

随机推荐

[原创，分享]DbHelper 续
一直在想怎么样才能让dbHelper更简单,更灵活,更僵化.终于我发布了第一个开源版本的dbhelper.此helper将使用System.Data.DbHelper作为命名空间.采用内部驱动与内容S ...
LeetCode: Validata Binary Search Tree
LeetCode: Validata Binary Search Tree Given a binary tree, determine if it is a valid binary search ...
SQL Server日期函数总结
获得一个月的天数:首先到得一个月最后一天的日期,通过 SQL Server 日期函数 day() 取得日期中的“天 ”部分获得 2008 年 2 月份的天数:select day(cast('200 ...
mybatis缓存创建过程
带着上篇的问题,再来看看mybatis的创建过程 1.从SqlSessionFactoryBuilder解析mybatis-config.xml开始对文件流解析 XMLConfigBuilder ...
安装.Net framework 3.5 sp1报错的解决方法
错误日志,提示: [11/22/07,18:04:40] Microsoft .NET Framework 2.0a: [2] Error: Installation failed for compo ...
解决TestNG报java.net.SocketException
在运行TestNG时一直给我提示报“java.net.ScketException”问题, 网上查了下这个问题是要有网络写入的一些操作才会导致,我的程序也没有网络写入,因为我是使用的selenium+ ...
【转】【CDC翻客】移动端App测试实用指南
译者注:本文从测试人员的角度出发,提出了100多个在测试移动App过程中需要考虑的问题.不管你是测试人员.开发.产品经理或是交互设计师,在进行移动App开发时,这些问题都很有参考价值.我和Queen ...
jquery jsonp实现跨域
html代码: $("#testJsonp").click(function(){ $.ajax({ url: "http://www.test.cc/1.php&quo ...
ORA-01790 错误处理
今天在练手的时候出现了一个ORA-01790 的错误,决定把他写下来保留起来. 先来创建两张测试用的简单的表. SQL> create table test01 (id number(3),na ...
Jackson - Features for configuring Java-to-JSON mapping
Following on/off features are defined in SerializationConfig.Feature (for Jackson 1.x), or Serializa ...

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

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

第一题

第二题

第三题

第四题

停电，伤不起！

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

随机推荐

热门专题