jQuery网页交互开发

最新推荐文章于 2021-09-14 19:19:06 发布

docker__

最新推荐文章于 2021-09-14 19:19:06 发布

阅读量543

点赞数 2

分类专栏：面试题 JQuery 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/Peng_wl/article/details/115240560

版权

面试题同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

JQuery

1 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>jQuery网页交互开发</title>
   <script type="text/javascript">

       '什么是jQuery'

           是JavaScript的一个优秀框架,Query是查询的意思,jQuery就是用javascript更加方便的查询和控制页面控件,由美国佬创建

       'jQuery 座右铭'

           座右铭：用最少的代码做更多的事

       'jQuery 库包含以下特性'

           HTML 元素选取
           HTML 元素操作
           CSS 操作
           HTML 事件函数
           JavaScript 特效和动画
           HTML DOM 遍历和修改
           AJAX
           Utilities

       'jQuery 加载'

           $(function (){
               //   就绪函数
           })
           $(document).ready(function(){
               //   就绪函数
           });

       'jQuery 变量' - 变量是存储信息的容器;

           var num = 123;
           我们使用变量名(num)来保存值( 123 ) 称为赋值

       '局部 JavaScript 变量'

           在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）

       '全局 JavaScript 变量'

           在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它

       'JavaScript 变量的生命周期'

           JavaScript 变量的生命期从它们被声明的时间开始
               局部变量 : 会在函数运行以后被删除
               全局变量 : 会在页面关闭后被删除

       'alert()'

           注释 : 用于显示带有一条指定消息和一个 OK 按钮的警告框

       'console.log()'

           注释 : 向web控制台输出一条消息

       'jQuery 选择器'

           '常用选择器'
               $('#box') ---- 'id选择器'
           $('.box') ---- 'class选择器'
           $('p')   ---- '类型选择器(任意html标签)'
           $('p,h3,box') ---- '群组选择器'

           '层次选择器'

               next()       --- '当前标签临近的下一个兄弟节点'
           nextAll()   --- '当前标签下面的所有兄弟节点'
           prev()       --- '当前标签临近的上一个兄弟节点'
           prevAll()   --- '当前标签上面的所有兄弟节点'
           siblings()   --- '除了当前标签的所有兄弟节点'

               $('#box li') = $('#box').find('li')
           $('#box > li') = $('#box').children('li')
           $('.li3 + li') = $('.li3').next()
           $('.li3 ~ li') = $('.li3').nextAll()

           '子节点'

           children() ---- '只找儿子'
           find('li') ---- '找子子孙孙'

       '父节点'
           parent() ---- '找父节点'
           parents() ---- '找祖先节点'

       '子元素选择器'

               $('#box li:nth-child(3)')   --- '找box下的第3行li,3是行而不是索引'
               $('#box li:first-child')   --- '找每组中满足条件的box下的第一行li'
               $('#box li:last-child')       --- '找每组中满足条件的box下的最后一行li'
               $('#box li:not(:eq(2))')   --- '找索引除第3行所有li eq索引是从0开始的'

               $('.list:not(:animated)')   --- '找没执行动画的.list标签'
               $('.menu li:has(ul)')       ----- '找级联菜单中li里面有ul的li'

           'jQuery 基础特效'

               '显示隐藏'
                   show() --- 显示
                   hide() --- 隐藏
                   toggle() --- 显示或隐藏

               '淡入淡出'
                   fadeIn() --- 用于淡入已隐藏的元素
                   fadeOut() --- 用于淡出已隐藏的元素
                   fadeToggle() --- 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换

               '卷上卷下'

           'jQuery 事件绑定'

               $('element').click( function () {
                   //   触发鼠标点击事件
               })
               $('element').dblclick( function () {
                   //   触发鼠标双击事件
               })
               $('element').mouseover( function () {
                   //   鼠标滑过事件
               })
               $('element').mouseout( function () {
                   //   鼠标离开事件
               })
               $('element').hover( function () {
                   // 鼠标滑过
               },function () {
                   // 鼠标滑离
               })
               $('element').focus( function () {
                   //   鼠标获得焦点事件
               })
               $('element').blur( function () {
                   //   光标失去焦点事件
               })
               $('element').mousedown( function () {
                   //   鼠标按下事件
               })
               $('element').mouseup( function () {
                   //   鼠标弹起事件
               })
               $('element').mousemove( function () {
                   //   鼠标移动事件
               })
               $('element').toggle( function () {
                   //   一次点击触发的事件
               },function () {
                   //   二次点击触发的事件
               })
               $('element').mousewheel( function () {

               })
               $('element').unbind(); // 移除所有 p 元素的事件处理器

           'jQuery 获取内容方法'

               html() --- 设置或者得到内容(覆盖添加,可以解析html标签)
               text() --- 设置或得到内容(不能解析html标签)

           'jQuery 属性方法'

               attr() --- 设置或者得到标签中的所有属性值
                   '例': $('div').attr('class','box');
               val() --- 只能设置或得到标签中的value属性值
               '例': $('input').val();

               addClass() --- 设置或新增一个class属性
                   '例': $('div').addClass('box');
               removeClass() --- 删除一个class属性
                   '例'： $('div').removeClass('box');

           'jQuery 循环'

               var num = ['李三','赵四','刘五'];
               for ( var i=0; i<num.length; i++ ){
                   console.log(num[i] + "<br>");
               }

           'jQuery 判断条件'

               if ( num < 20 ){
               // 当条件为 true 时执行的代码
               }else{
               // 当条件为 false 时执行的代码
               }

               if ( num < 20 ) {
               // 当条件为 true 时执行的代码
               }else if( num > 20 ){
               // 当条件为 true 时执行的代码
               }else{
               // 当条件为 false 时执行的代码
               }

           'jQuery CSS样式'

               $("p").css("background-color","yellow");   // 设置指定CSS样式
               $("p").css({           //   设置多个CSS样式
                   "background":"red",
                   "width":"100px"
               })

               $("p").css('background')   // 获取CSS样式

           'jQuery 获取元素宽高'

               width()           ---- 得到盒子宽度
               height()       ---- 得到盒子高度
               innerWidth()   ---- 盒子宽+左右padding
               innerHeight()   ---- 盒子高+上下padding
               outerWidth()   ---- 盒子宽+左右padding+左右border
               outerHeight()   ---- 盒子高+上下padding+上下border
               outerWidth(true)   ---- 盒子宽+左右padding+左右border+左右margin
               outerHeight(true)   ---- 盒子高+上下padding+上下border+上下margin

           'jQuery 动画'

               $('div').animate({
                   marginLeft:'100px'
               },800,function () {
                   alert("动画执行完成的回调函数")
               });

               注:
                   必需的 width : 参数定义形成动画的 CSS 属性。
                   可选的 800 : 参数规定效果的时长,默认为400
                   可选的 ,function : 参数是动画完成后所执行的函数名称

               强调 :
                   animate() 方法几乎可以操作所有 CSS 属性！
                   不过需要记住一件重要的事情：当使用 animate() 时,必须使用驼峰标记法书写所有的复合属性名
                   比如，必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right
                   同时: 色彩动画并不包含在核心 jQuery 库中,即animate()不能改变background和color

           'jQuery 添加元素或者内容'

               '内部插入'

                   append() - 在被选元素的内部最后添加子元素或者内容
                   例：$('p').append('<span>xxx</span>')

                   prepend() - 在被选元素的开头添加子元素
                   例：$('p').prepend('<span>xxx</span>')

               '外部插入'

                   after() - 方法在被选元素之后插入内容
                   例：$('p').after('<span>xxx</span>')

                   before() 方法在被选元素之前插入内容
                   例：$('p').before('<span>xxx</span>')

           'jQuery 删除元素'

               remove() - 删除被选元素( 及其子元素 )
               empty() - 从被选元素中删除子元素,而当前元素保留
               detach() - 与上诉两个不同的是所有的绑定事件以及附加数据都会被保留

           'jQuery 克隆元素'

               $('选择器名称').clone()

           'jQuery 移除事件'

               $("div").unbind( "click");
               $("div").die("click");
               $("div").undelegate( "p", "click");
               $("div").off( "click", "p");

           'jQuery hasClass()'

               $(selector).hasClass("className");
               注: 方法是用来检查被选择的元素是否包含指定的class名,其中class是必须的值,规定需要在指定元素中查找的类名

               $(selector).hasClass("className1 className2");
               hasClass()也可以同时写多个class但他们之前用空格隔开。

           'jQuery is()'

               if ( $("p").parent().is("div") ) {
               alert("p 的父元素是 div");
               }
               注：is() 方法用于查看选择的元素是否匹配选择器,如果 <p> 的父元素是 <div> 元素，则弹出提示信息

           'jQuery 筛选方法'

               $('.list li').slice(0,3) ---- 找ul里前3个li
           $('.list li').slice(-3) ---- 找ul里后3个li

           'jQuery 定时器'

               //   间歇调用调用定时器( 用户多次执行 or 重复执行 )
               setInterval(function() {
       console.log(0)
       },1000);
       //   清除间歇调用调用定时器
       clearInterval();

       //   延迟调用定时器
       setTimeout(function() {
       console.log(0)
       },1000);

       'jQuery noConflict() 方法'

           '语法' : var _YYB = $.noConflict();

           '注释' : 其他一些 JavaScript 框架其中某些框架也使用$为简写就像jQuery如果用在两种不同的框架正在使用相同的简写符号，
       有可能导致脚本停止运行那么我们就可以使用noConflict()方法

       'JQuery( 返回顶部案例 )'

           语法： $(window).scroll(function() {
           // 执行内容
           })

           注释：当用户滚动指定的元素时，会触发 scroll 事件,scroll 事件适用于所有浏览器窗口。

           语法：scrollTop() | scrollLeft()
           注释：scrollTop() : 方法返回或设置匹配元素的滚动条的垂直位置
           scrollLeft(): 方法返回或设置匹配元素的滚动条的水平位置

           'jQuery clone()'

               clone() 方法生成被选元素的副本，包含子节点、文本和属性
               语法 : $('element').clone();
               参数 :
                       clone(true) - '连同复制事件处理程序'
                       clone(false) - '默认。不复制事件处理程序'

           'jQuery remove()'

               remove() 方法移除被选元素，包括所有文本和子节点
               语法 : $('element').remove();

           'JavaScript 函数' - 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块

               语法 : function functionname() {
                           //这里是要执行的代码
                       }

               注释 : 可以在某事件发生时直接调用函数（比如当用户点击按钮时）,JavaScript 对大小写敏感。关键词 function 必须是小写的

           '调用带参数的函数'

               functionname(arguments1,arguments2);
               注释 : 在调用函数时，可以向其传递值，这些值被称为参数 , 可以发送任意多的参数，由逗号 (,) 分隔

               function functionname ( val1,val2 ) { // 声明函数时，可以把参数作为变量来声明
                   // 这里是要执行的代码
               }
               注释 : 变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值

           '带有返回值的函数'
               $('element').click( function () {
                   $(this).html( myFunction(5,5) );   // 那么this的html()就等于 25
               })
               function myFunction( a,b ){
                   return a * b;
               }

               注释 : 有时候我们希望通过函数将值返回调用它的地方 , 我们可以通过使用 return 实现
                   在使用 return 语句时，函数会停止执行，并返回指定的值

           'Event对象属性'

               Event是javascript内定对象全称event,event代表事件的状态
               例如 : 触发event对象的元素、鼠标的位置及状态、按下的键等。event对象只在事件发生的过程中才有效

           'pageX() pageY()'

               语法 : event.pageX() 或 event.pageY()
               注释 : 属性是鼠标指针的位置，相对于文档的左边缘,属于jQuery的Event对象

           'offset()'

               语法 : $("element").offset().left   或   $("p").offset().top
               注释 : offset() 方法返回或设置匹配元素相对于文档的偏移,该方法返回的对象包含两个整型属性：
                   top 和 left 以像素计

           'jQuery 键盘事件'

           keydown()

           注释 : keydown事件会在键盘按下时触发

           语法 : $('元素').keydown( function () {
           event.keyCode // 执行内容 - 获得按下键盘相应键盘码
           })
           keyup()

           注释 : keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件

           语法 : $('元素').keyup( function () {
           event.keyCode // 执行内容 - 获得按下键盘相应键盘码
           })
           '定义日期'

               var thatDate = new Date();                   // 实例一个时间对象   Date对象自动使用当前的日期和时间作为其初始值
               var Year = thatDate.getFullYear();     // 获取系统的年
               var   Month = thatDate.getMonth() + 1;     // 获取系统月份，由于月份是从0开始计算，所以要加 1
               var   toDat = thatDate.getDate();            // 获取系统日
               var toweek = thatDate.getDay();           // 获取星期几0-6 ( 0表示周日 )
               var   Hours = thatDate.getHours(); // 获时
               var   Minutes = thatDate.getMinutes(); // 分
               var   Seconds = thatDate.getSeconds(); // 秒
               var   Time = thatDate.getTime()           // 毫秒

           'jQuery中 size() or length方法有什么区别'

               1. size()是jQuery提供的方法,而length是属性( 不带括号 )
               2. size()是操作对象实例的方法,定义在jQuery中,只能在jQuery下使用
               3. length是属性,定义在dom和javascript中,不使用jQuery也可以使用
               4. 如果只是想获取元素的个数,两者效果一样既 $("element").length 和 $("element").size()获取的值是一样的
               5. 但是如果是获取字符串的长度就只得用length

           'jQuery中的live'

               $("element").live("click",function() {
                   //   执行脚本
               });
               注释 : 给指定的元素添加处理程序，规定当这些事件发生时运行的函数

           'jQuery Ajax()'

               简介：jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据
               语法：$.ajax({
       url : 'data/my_account.php',
       type : 'POST',
       dataType : 'json',
       data : {
       age : '男',
       },
       success : function ( data ) {   //   data参数用于接收服务器返回数据
                           // 当请求成功时运行的函数
       },
                       error : function () {
                           // 当请求失败时运行的函数
                       }
       }

               注释：$.ajax() 方法通过 HTTP 请求加载远程数据,方法是 jQuery 底层 AJAX 实现。简单易用的实现 $.get, $.post 等方法。
                   $.ajax() 返回其创建的 XMLHttpRequest 对象。简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示
                   $.ajax() 可以不带任何参数直接使用,使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等
               请求：两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
                   GET - 从指定的资源请求数据
                   POST - 向指定的资源提交要处理的数据
               参数：url：'规定发送请求的 URL'
                   type : '规定请求的类型（GET 或 POST）'
                   dataType : '预期的服务器响应的数据类型 '
                   data : '规定要发送到服务器的数据'

           '什么是JSON'

               1. JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
               2. JSON 是轻量级的文本数据交换格式
               3. JSON 具有自我描述性，更易理解
               4. JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。
               目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON

           'JSON 语法规则'

               1. 数据在名称/值对中
               2. 数据由逗号分隔
               3. 花括号保存对象
               4. 方括号保存数组

           'JSON 名称/值对'

               "name" : "xxx" 等价 name = "xxx"

           'JSON 值'

               1. 数字（整数或浮点数）
               2. 字符串（在双引号中）
               3. 逻辑值（true 或 false）
               4. 数组（在方括号中）
               5. 对象（在花括号中）
               6. null
           'JSON 对象' - JSON 对象在花括号中书写,对象可以包含多个名称/值对

               { "name":"xxx" , "sex":"女" }
               等价
               name "xxx",sex = "女"

           'JSON 数组' - 数组可包含多个对象（示例代码）
               {
                   "student": [
                       { "name":"111" , "sex":"男" },
                       { "name":"222" , "sex":"女" },
                       { "name":"333" , "sex":"男" }
                   ]
               }

   </script>
</head>
<body>

</body>
</html>