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

  1. 在JQuery对象中区分.text();.val();.html();.innerHTML;.innerTEXT()的用法与区别，用例子证明
  2. 在JQuery选择器中空格与大于号的区别
  3. 在一个表单中，查找所有选中的input元素,JQ的写法
  4. 指定的为某个div内部动态添加一个div的写法，外部添加一个div的写法(包括在该节点的前面以及后面)
  5. JQuery对象与dom对象的区别，以及两者互相转换的方法
  6. 如何动态的为某个div添加class属性，如何移除class属性，以及如何获取div中某个属性的值，比如说Id的名称或者其他属性的值
  7. JQuery里面的动画函数一般用什么？时间设置函数都有哪些,setTimeout()与setInterval()有何区别
  8. 写一个ajax例子出来，要标清楚各个参数的含义。以及ajax数据传输的时候有几种数据格式
  9. 要做出一个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. 下面一个就用个例子吧 
      <p><b>Hello</b> world</p>
      <p>火云邪神！</p>

      JQuery代码：$("p").text();

      结果：Helloworld火云邪神！

有参数情况

  • .html有参数情况
<div></div>
$("div").html("<p>Bigod超神</p>");

  • .text有参数情况
<p>火云邪神超神！</p>
$("p").text("<i>断桥残雪</i>哇哇哇");

　　结果：[ <p><i>断桥残雪</i>哇哇哇</p> ]

  • 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)

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

停电，伤不起！

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

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

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

  1. 看几道JQuery试题后总结（下篇）

    感谢圆友的提醒 昨天下午完成了9道试题中的前4道,之后好多园友存在些疑惑和建议,在这里我一并说一下吧.首先对于昨天第一题可能存在误导,在JQuery中并没有innerHTML这个属性,不过我们可以将J ...

  2. 你所不知道的库存超限做法 服务器一般达到多少qps比较好[转] JAVA格物致知基础篇：你所不知道的返回码 深入了解EntityFramework Core 2.1延迟加载（Lazy Loading） EntityFramework 6.x和EntityFramework Core关系映射中导航属性必须是public？ 藏在正则表达式里的陷阱 两道面试题，带你解析Java类加载机制

    你所不知道的库存超限做法 在互联网企业中,限购的做法,多种多样,有的别出心裁,有的因循守旧,但是种种做法皆想达到的目的,无外乎几种,商品卖的完,系统抗的住,库存不超限.虽然短短数语,却有着说不完,道不 ...

  3. Java中ArrayList相关的5道面试题

    本文参考了 <关于ArrayList的5道面试题 > 1.ArrayList的大小是如何自动增加的? 这个问题我想曾经debug过并且查看过arraylist源码的人都有印象,它的过程是: ...

  4. Java 208 道面试题：第一模块答案

    目前市面上的面试题存在两大问题:第一,题目太旧好久没有更新了,还都停留在 2010 年之前的状态:第二,近几年 JDK 更新和发布都很快,Java 的用法也变了不少,加上 Java 技术栈也加入了很多 ...

  5. Java并发编程75道面试题及答案

    1.在java中守护线程和本地线程区别? java中的线程分为两种:守护线程(Daemon)和用户线程(User). 任何线程都可以设置为守护线程和用户线程,通过方法Thread.setDaemon( ...

  6. 两道面试题，带你解析Java类加载机制

    文章首发于[博客园-陈树义],点击跳转到原文<两道面试题,带你解析Java类加载机制> 在许多Java面试中,我们经常会看到关于Java类加载机制的考察,例如下面这道题: class Gr ...

  7. 【转】两道面试题，带你解析Java类加载机制(类初始化方法 和 对象初始化方法)

    本文转自 https://www.cnblogs.com/chanshuyi/p/the_java_class_load_mechamism.html 关键语句 我们只知道有一个构造方法,但实际上Ja ...

  8. Java 208 道面试题：Java 基础模块答案

    目前市面上的面试题存在两大问题:第一,题目太旧好久没有更新了,还都停留在 2010 年之前的状态:第二,近几年 JDK 更新和发布都很快,Java 的用法也变了不少,加上 Java 技术栈也加入了很多 ...

  9. js 从两道面试题加深理解闭包与箭头函数中的this

     壹 ❀ 引 在本文之前我已经花了两个篇幅专门介绍了JavaScript中的闭包与this,正好今早地铁上看到了两道面试题,试着做了下发现挺有意思,所以想单独写一篇文章来记录解析过程.若你对于闭包与t ...

随机推荐

  1. Python学习 之 编程

    1.搭建python环境 交互模式:输入python进入交互模式,exit()退出交互模式 文本模式:新建*.py文件,编辑*.py文件,运行python *.py 2.python文件类型 (1)源 ...

  2. CentOS 安装中文输入法

    转载:http://blog.sina.com.cn/s/blog_9f1c093101019h03.html centos 6.3用yum安装中文输入法 1.需要root权限,所以要用root登录 ...

  3. java中文件操作

    例一:从一个文件读入数据,然后写入另外一个文件 package lipika; import java.io.FileInputStream; import java.io.FileNotFoundE ...

  4. 称球问题(zt)

    下面说的这个问题可能大家都看到过,它是这么描述的: 现在有n(n>=2)个球,n个球外观一模一样,但是重量有区别,其中有且仅有一个球的重量比其它n-1个球要重,现在有一个天平,天平是完好无损的, ...

  5. PHP.2-LAMP平台介绍及网站的工作原理

    LAMP平台介绍及网站的工作原理 1.HTTP协议 URL(UniformResourceLocator)统一资源定位符,就是网页地址的意思.[格式:协议://主机.端口.文件.附加资源] ##URL ...

  6. SpringMVC中使用Jcaptcha实现校验码验证

    SpringMVC中使用Jcaptcha实现校验码验证:http://www.tuicool.com/articles/rMzAFj 本文将使用Jcaptcha实现校验码验证,并演示在Spring/S ...

  7. python(3)-函数动态参数

    先来看一段代码 def show(*arg): print(arg, type(arg)) if __name__ == "__main__": show(1) show(1,2, ...

  8. javaweb学习总结一(eclipse常用快捷键、debug调试以及junit测试框架)

    一:web的发展趋势1:C/S(客户端/服务器)结构向B/S(浏览器/服务器)结构发展,以后的电脑只需操作系统和浏览器即可.所有的服务都存储在服务器端,只需用户登录后从服务端同步数据,例如:看电影不需 ...

  9. jQuery中的经典动画

    show()方法和hide()方法是jQuery中的基本动画方法,hide()方法等于将css()方法设置display属性为none.如何让元素动起来呢,我们可以在show和hide里加入slow, ...

  10. Ehcache(2.9.x) - API Developer Guide, Write-Through and Write-Behind Caches

    About Write-Through and Write-Behind Caches Write-through caching is a caching pattern where writes ...