jQuery副本单刷(一) 速清小怪_刷小怪网页-CSDN博客

本文链接：https://blog.csdn.net/m0_37057454/article/details/82110964

jQuery实战，支线副本单刷

开篇还是百度百科的定义：

jQuery是一个快速、简洁的JavaScript库，jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

1、jQuery过时了吗？

这个问题很难回答，因为问题本身并没有问到点子上。或许真正的问题是MPA过时了吗？

SPA：

单页Web应用（single page web application，SPA），就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说模块化的开发和设计显得相当重要。

MPA：

(Multi-page Application) 多页面指的就是最传统的 HTML 网页设计。如果需要更新内容，需要重载整个网页页面(服务器端标记语言)。在适当的需求下，可以通过ajax在后台与服务器进行少量数据交换，实现异步更新。

基于服务器的代码能够创建动态内容执，执行复杂的任务，js主要用来解决DOM操作和Ajax。

而jQuery就是一个用来专门解决DOM操作和Ajax以及兼容性的js库，包含强大的选择器，出色的DOM操作的封装，有可靠的事件处理机制，完善的ajax封装，出色的浏览器的兼容性。

2、什么是Jquery

3、为什么使用Jquery。

4、Jquery的优点。

jQuery是一个用来专门解决DOM操作和Ajax以及兼容性的js库，包含强大的选择器，出色的DOM操作的封装，有可靠的事件处理机制，完善的ajax封装，出色的浏览器的兼容性，极大地简化了 JavaScript 编程。

5、jQuery 语法

基础语法是：$(selector).action()

1)$:

jQuery 使用 $ 符号作为 jQuery 的简介方式。

某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。

jQuery 使用名为 noConflict() 的方法来解决该问题。

var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。

2)选择符（selector）:“查询”和“查找” HTML 元素

3)action() :执行对元素的操作

6、window中的onload()函数和jQuery中的document.ready()有什么区别？

这个问题问的其实有点儿偏了，一般的，应该是问$(document).ready和$(window).load的区别

DOM加载顺序：

1)解析HTML结构。

2)加载外部脚本和样式表文件。

3)解析并执行脚本代码。

4)构造HTML DOM模型。

5)加载图片等外部文件。

6)页面加载完毕。

$(document).ready:是DOM树加载完毕，就执行

$(window).load:页面加载完后在执行，所以图片高度等信息应该用$(window).load。

window中的onload()等同于$(window).load，区别是window中的onload只能写一个，$(window).load可以写多个。

7、jQuery中有哪几种类型的选择器？(最常见)

基本选择器：id选择器，标签选择器，类选择器等

层次选择器：如：$("form input") 选择所有的form元素中的input元素 $("#main > *")选择id为main的所有子元素

过滤选择器：如：$("tr:first")选择所有tr元素的第一个 $("tr:last")选择所有tr元素的最后一个

8、ajax

1)get() 和 post() 方法

2)load() 方法

$(selector).load(URL,data,callback);
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

9、jQuery对象与DOM对象之间的转换

DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。

jQuery对象：使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。

$("#blog").html() == $("#blog")[0].innerHTML true
document.getElementById("blog").innerHTML == $(document.getElementById("blog")).html() true

10、笔试题

1)浏览器如何用jQuery禁用浏览器的前进后退按钮？

$(document).ready(function() {
     window.history.forward(1);
}

2)鼠标 jQuery检测鼠标左键和右键点击的方法

 $(document).ready(function(){
        $("div").mousedown(function(event){
             if(event.button == 0){
                   alert("您点击了鼠标左键!");
             }else if(event.button == 2){
                   alert("您点击了鼠标右键!");
            }
      });
});

3)DOM 获取和<p id="txt1">同级的所有标签背景设为红色

$("#txt1").siblings().css("background","red");

4)动画点击触发图片淡出网页

$("img").click(function){ $(this).fadeOut("slow");  });

5)轮播图

    <ul>
        <li><img src="1.jpg" width=350px height=200px></li>
        <li><img src="2.jpg" width=350px height=200px></li>
        <li><img src="3.jpg" width=350px height=200px></li>
        <li><img src="4.jpg" width=350px height=200px></li>
    </ul>

    $(function(){
        $("ul li:not(:first)").hide();
        setInterval(function(){
            if($("ul li:last").is(":visible")){
                $("ul li:first").fadeIn("slow");
                $("ul li:last").hide();
            }else{
                $("ul li:visible").next.fadeIn("slow");
            }
        },1000);
    });