jquery总结

最新推荐文章于 2024-12-07 20:45:40 发布
最新推荐文章于 2024-12-07 20:45:40 发布
阅读量243 收藏
点赞数
文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44247511/article/details/120881553
版权
本文深入介绍了jQuery的核心概念，包括JS库的性质、链式编程、DOM与jQuery对象的转换。详细阐述了jQuery的选择器如ID、类、标签选择器，以及交集、并集、层次选择器的使用。此外，还讨论了jQuery的事件处理，如页面加载事件、元素操作、动画效果和事件绑定。文章还探讨了jQuery在解决浏览器兼容性问题和简化代码方面的重要作用。
摘要由CSDN通过智能技术生成

Jquery介绍

  • JS库: 把一堆处理兼容的代码和常用的函数封装到一个js文件中
  • 这个js文件就称为js库, 使用的时候直接引入即可
  • jQuery实际上就是JS库的一种,它有许多优点,比如: 体积小,功能强大,隐式迭代,编写代码量小,链式编程
  • jQuery只能解决百分之九十八的兼容问题,还有百分之二解决不了,是因为JS在不断的迭代更新
  • 有些属性或方法jQuery没有更新,需要我们自己通过原生JS处理

1.// jQuery实现方式 – 隐式迭代

$('#btn').click(function () {
  $('p').text('这里是个P');
});

2.Jquery顶级对象

  • 浏览器的顶级对象: window,包括了DOM,浏览器中所有的东西都是属于window的
  • 页面的顶级对象: DOM,页面中所有的东西都是属于DOM的
  • jQuery的顶级对象: jQuery – 可以用$代替
  • 也就是说,jquery.js文件中的所有属性和方法都是属于$的
  • 在jQuery中,DOM中的所有方法几乎都封装成了函数,而且几乎都不带on

3.Dom对象和jquery对象互相转换

  • DOM对象.JQ方法 – 不行
  • JQ对象调用DOM方法 – 不可行
  • （JQ对象转DOM对象
  • JQ会把对象封装在一个包装集当中
  • 取包装集里的第一个元素就是DOM对象 – 固定写法）
  • DOM对象转JQ对象 – $(DOM对象)

4.Jq页面加载事件

  • DOM --> 页面所有的内容加载完毕才执行 --> (标签,图片,文本等)
  • 上面这种方式后面的onload事件会覆盖前面的
  • var num = 1 ;var num = 2; --> 赋值会覆盖 （差不多是这个意思）
jQ一 -->页面所有的内容加载完毕才执行 --> (标签,图片,文本等)  load
load();load(); --> 方法调用,调用一次执行一次
jQ二 --> 页面的基本元素加载完毕就执行 --> 速度比上面快  ready
jQ三 --> 和上面一样,谁先加载取决于代码的位置
jQuery(function () {
    console.log('web架构室最大男神班');
});
jQ四 --> 推荐
$(function () {
    console.log('web架构室最大男神班');
});

5.Jq通过id获取元素

  • DOM获取元素的方式
    1. 通过id获取
  • document.getElementById(‘id’);
    1. 通过类样式获取
  • document.getElementsByClassName(‘class的值’);
    1. 通过name属性的值获取
  • document.getElementsByName(‘name的值’);
    1. 通过标签名获取
  • document.getElementsByTagName(‘标签名’);
    1. 通过选择器获取
  • document.querySelector(‘选择器的名字’);
  • document.querySelectorAll(‘选择器的名字’);
jQ获取元素的方式
$('选择器') --> jQ对象
$(function(){
  $('#btn').click(function(){
    console.log('支持华为');
  });
});

6.Jq通过标签获取元素

  • .text(‘文本内容’): 为当前元素设置文本内容
  • .text(): 获取当前元素的文本内容
  • 相当于DOM里面的innerText方法 --> 没有兼容问题
  • 我们没有手动遍历,jQ内部帮我们遍历了 --> 隐式迭代
  • $(‘p’).text(‘海贼王我当定了’);

选择器

1.交集选择器

// 交集选择器  --> 标签 + 类选择器
$(function () {
  $('#btn').click(function () {
    // 是p标签并且类样式为cls的元素
    $('p.cls').css('background-color','red');
  })
});

2.并集选择器

// 并集选择器(选择器,选择器,选择器..) --> 多选择器?
$(function () {
  $('#btn').click(function () {
    $('p,#dv,.cls').css('background-color','red');
  })
});

3.索引选择器

索引选择器 （在括号里面用冒号，括号外面用点）
:eq(索引): 等于当前索引的元素 equals -- 与...相等
:lt(索引): 小于当前索引的元素
:gt(索引): 大于当前索引的元素
$('p:eq(3)').css('fontFamily','楷体').css('fontSize','40px');
$('p:lt(3)').css('fontFamily','楷体').css('fontSize','40px');
$('p:gt(3)').css('fontFamily','楷体').css('fontSize','40px');

4.层次选择器

//层次选择器
//表示的是ul这个父级里面的所有后代span元素
$('ul span').css('backgroundColor','yellow');
//表示的是ul这个父级元素的直接子集span元素
$('ul>span').css('backgroundColor', 'yellow');
//表示的是ul这个父级元素的后面的所有兄弟span元素
$('ul~span').css('backgroundColor','yellow');
//表示的是ul这个父级元素的后面的相邻的兄弟span元素
$('ul+span').css('backgroundColor','yellow');

5.隔行变色

$('#uu>li:odd').css('backgroundColor', 'yellow');
$('#uu>li:even').css('backgroundColor', 'red');

6.下拉菜单

$('.wrap>ul>li').mouseenter(function () {
       $(this).children('ul').stop().show(500);
   Show和hide后面加的时间是渐变的时间
   });
  $('.wrap>ul>li').mouseleave(function () {
       $(this).children('ul').stop().hide(500);
   //stop是为了防止狂点的时候不触碰也会触发事件
   }

7.淘宝精品展示

$(function () {
    $('#left>li').mouseenter(function () {
//左边的栏里面的li鼠标移入后改变中间的图片
        var a = $(this).index();
//获取鼠标移入li的索引
        $('#center li').eq(a).show().siblings().hide();
//中间部分的li的第a个下标显示出来，第a个下标的兄弟全部隐藏
    });
    $('#right>li').mouseenter(function () {
//右边的栏里面的li鼠标移入后改变中间的图片
        var b = $(this).index() + 9;
//获取鼠标移入li的索引（+9是因为左侧有九个li元素中间的图片全部放在一个里面所以需要加上左面的个数的索引）
        $('#center li').eq(b).show().siblings().hide();
//中间部分的li的第b个下标显示出来，第b个下标的兄弟全部隐藏
    });
})

8.高亮效果显示

$(".wrap li").mouseenter(function () {
//最大div里面的哪个li鼠标移入后将其高亮显示，其他的li全部调低透明度
    $(this).siblings("li").css("opacity",0.3);
//鼠标移入的其他li兄弟的透明度全部设置为0.3
    $(this).css("opacity",1);
//鼠标移入的li透明度设置为1（高亮显示）
});
$(".wrap").mouseleave(function () {
//当鼠标移出最大的div后，将其所有的li全部设置为高亮
    $("li").css("opacity",1);
//直接将所有的li全部设置为透明度为1
})

9.下拉面板案例

$(function () {
  $("#ul ul").hide();
//先将所有的下拉全部设置为隐藏
  $("#ul>li").click(function () {
//li在被点击后展示出相对应的内容
  $(this).siblings("li").children().hide(500);
//被点击的兄弟li元素的子集元素（就是本来该展示出来的内容）全部隐藏500毫秒
  $(this).children("ul").stop().toggle(500);
//被点击的子集ul元素如果隐藏了就显示出来如果显示了就隐藏起来（加入stop是为了防止鼠标快速点击时，不再点击则会自己触发事件）
  })
})

三

1.元素类样式操作

链式编程的写法 --> 对象调用方法后返回的还是这个对象本身
$('#dv').css('width', '300px').css('height', '300px').css('backgroundColor', 'yellow');
设置一个样式可以传入
var json = {'width':'300px','height':'300px','backgroundColor': 'yellow'};
$('#dv').css(json);

2.链式编程

  • jQ中,当你调用某个方法,并且这个方法是设置操作的时候
  • 一般返回的都是当前对象,可以继续链式编程
  • （如果不是返回当前对象，则不能继续链式编程）
  • 链式编程:对象调用方法后返回的还是这个对象本身

3.元素类样式的操作

  • 对象.css()
  • addClass()、removeClass()
  • 判断: hasClass()
  • 切换: toggleClass()
if ($('#dv').hasClass('cls')) {
  console.log('应用了');
} else {
  console.log('没应用');
}
切换类样式 --> toggleClass
$('#dv').toggleClass();

4.网页开关灯特效

if ($('body').hasClass('cls'))
// 使用if判断是否含有这个类名，如果没有则将其添加进去，反之则将其删除

5.获取元素的方式

// 获取当前元素的前一个兄弟元素
// $('#four').prev().css('backgroundColor','yellow');
// 获取当前元素前面所有的兄弟元素
// $('#four').prevAll().css('backgroundColor','yellow');
// 获取当前元素的后一个兄弟元素
// $('#four').next().css('backgroundColor','yellow');
// 获取当前元素后面所有的兄弟元素
// $('#four').nextAll().css('backgroundColor','yellow');
// 获取当前元素的父级元素
// $('#four').parent().css('backgroundColor', 'yellow');

6.隔行变色

// $(this).prevAll().css('backgroundColor','blue');
// $(this).nextAll().css('backgroundColor','yellow');
// $(this).prevAll()返回的是前面的所有的兄弟元素
// 出现了断链现象,怎么解决? 在断链的地方加一个 end()
// end内部会帮我们查找最开始的那个对象 --> this
$(this).prevAll().css('backgroundColor', 'blue').end().nextAll().css('backgroundColor', 'yellow');
});

7.产品效果切换

$(".tab>li").mouseenter(function () {
$(this).addClass("active").siblings().removeClass("active");
//将鼠标移入的li添加类名’active’，然后将它的其他兄弟元素全部移除类名可以实现上面需要切换的样式
$(".products>div").eq($(this).index()).addClass("selected").siblings().removeClass("selected");
//获取需要改变的div然后将刚才鼠标移入li的下标赋给div将需要显示的添加类名，然后将它的其他兄弟元素全部移除类名可以实现需要显示的显示，需要移除的移除
})

8.动画的相关方法大全

  • （1）show() 和 hide()

  • 参数1: 时间 --> 毫秒

  • 参数1: fast(200ms) normal(400ms) slow(600ms)

  • 参数2: 回调函数 --> 动画执行完毕以后回调函数才执行

  • （2）slideUp() 和 slideDown() --> 滑入滑出

  • 参数1: 时间 --> 毫秒

  • 参数1: fast(200ms) normal(400ms) slow(600ms)

  • 参数2: 回调函数 --> 动画执行完毕以后回调函数才执行

  • （3）fadeIn() 和 fadeOut() --> 淡入淡出

  • 参数1: 时间 --> 毫秒

  • 参数1: fast(200ms) normal(400ms) slow(600ms)

  • 参数2: 回调函数 --> 动画执行完毕以后回调函数才执行

  • （4）swing 和 linear

  • 默认速度（从慢到快再从快到慢）和匀速

  • （5）Animate

  • 第一个参数：对象，里面可以传需要动画的样式

  • 第二个参数：speed 动画的执行时间

  • 第三个参数：动画的执行效果

  • 第四个参数：回调函数

9.动画队列

  • 当一个事件中含有多个动画事件则会一一排序执行，形成队列

10.停止动画

  • .stop(): 停止当前正在执行的动画
  • .stop(clearQueue): 是否停止动画队列中所有的动画 true
  • .stop(clearQueue,jumpToEnd): 停止当前动画并且显示当前动画的最终效果 true,true
  • 两个参数都为true时则会立即停止当前的动画函数并显示最终结果

11.元素的创建

  • 创建元素追加到div中
  • $(’#dv’).append(“
    搜都习内
    ”)

12.元素的相关方法

  • append() 方法在被选元素的结尾（仍然在内部）插入指定内容
  • prepend() 方法在被选元素的开头（仍位于内部）插入指定内容
  • after() 方法在被选元素的后面插入一个指定的元素
  • before() 方法在被选元素的前面插入一个指定的元素

13.元素的删除

  • empty(): 清空节点及删除其子节点，自身并不会删除
  • remove()：删除所有后代节点及自身，与该节点绑定的事件删除后也将解除绑定
  • detach()：删除所有后代节点及自身，但与该节点绑定的事件删除后依然保留

14

$('#text').keyup(function(e){
  console.log(e.keyCode);
  if(e.keyCode == 13){
    // 发送消息
  }
});
  • Keycode获取键盘事件的键盘编码，可以进行判断

15.弹幕效果

$('#boxDom').append("<span>"+$('#text').val()+"</span>");
//先创建一个span元素插入需要插入的div中，并且span元素的内容是input框的值
$('span').last().css({'color':'#'+Math.random().toString(16).substr(9),'width':'auto', 'left': 0 ,'top': Math.floor(Math.random()*490)+'px'}).animate({'left': '100%' }, 10000,'linear');
//获取span元素的最后一个（就是最后插入的span元素），为其设置css样式（随机颜色，自适应宽度，初始left为0，随机top值）然后开始执行动画函数（最后需要到达的地方left为100%，设置时间10000毫秒，匀速运行动画函数）
$("input").val("");

四

1.过滤选择器

  • 返回被选元素的第一个元素
$('div:first').css('backgroundColor','yellow');
$('div').first().css('backgroundColor', 'yellow');
返回被选元素的最后元素
$('div').last().css('backgroundColor', 'yellow');
not():选择器选取除了指定元素以外的所有元素
$('div').not('.dv').css('backgroundColor', 'yellow');
filter():方法返回符合一定条件的元素
$('div').filter('.dv').css('backgroundColor', 'yellow');

checked : 选中
disabled : 禁用
$('select option:selected').css('backgroundColor','yellow');

.prop('指定的属性') --> 返回的是true/false
.prop('指定的属性','指定的属性值') --> 设置指定元素的属性

.attr('指定的属性') --> 返回的是指定属性的值
.attr('指定的属性','指定的值') --> 设置指定元素的自定义属性
相当于setAttritube/getAttritube --> 标签自定义的属性
会改变HTML结构
$('select option').eq(1).attr('index',1);
console.log($('select option').eq(1).attr('selected'));

2.城市选择

$('#btn1').click(function(){
  $('#src-city>option').appendTo('#tar-city');
});
$('#btn3').click(function(){
  $('#src-city>option:selected').appendTo('#tar-city');
});

3.京东呼吸灯（轮播图）

（1）$('.arrow-right').click(function () {
  $('.slider>ul li').hide().first().appendTo($('.slider>ul'));
  $('.slider>ul li').first().fadeIn(1000).show();
})
$('.arrow-left').click(function () {
  $('.slider>ul li').hide().last().prependTo($('.slider>ul'));
  $('.slider>ul li').first().fadeIn(1000).show();
})

（2）var $li = $('.slider>ul li');
var count = 0; // 自定义下标
$('.arrow-right').click(function () {
  count++;
  if (count == $li.length) {
  count = 0;
  }
  $li.eq(count).fadeIn(1000).siblings().fadeOut(1000);
});
$('.arrow-left').click(function () {
  count--;
  if (count == -1) {
  count = $li.length - 1;
  }
  $li.eq(count).fadeIn(1000).siblings().fadeOut(1000);
});

4.获取元素的宽高

// 点击按钮,让div的宽高放大两倍
$('#btn').click(function () {
//var width = $('#dv').css('width');
//var height = $('#dv').css('height');
//console.log(width); // 200px
//console.log(height); // 200px
//$('#dv').css('width', (parseInt(width) * 2) + 'px');
//$('#dv').css('height', (parseInt(height) * 2) + 'px');
// 获取
//var w = $('#dv').width(); // 200
//$('#dv').css('width', (w * 2) + 'px');
// 设置
$('#dv').width('400px');
$('#dv').height('400px');
});

5.获取元素的left和top

// .css('left/top') --> 字符串类型
// console.log($('#dv').offset()); // {top: 300, left: 300}
// offset()返回一个对象,对象里面装着left和top
// left包括left和margin-left
// top包括top和margin-top
// console.log($('#dv').offset().left);
// console.log($('#dv').offset().top);

6.获取元素卷曲出去的距离

// 在DOM中滚动条滚动,时刻获取滚动的距离
// $('#dv').scroll(function () {
//     console.log($('#dv').scrollLeft());
//     console.log($('#dv').scrollTop());
// });
$('#dv').scrollTop(100);

jq总结

<jq的优点>
    1.封装方法多
    2.隐式迭代
    3.没有兼容问题
    4.代码简洁

<入口函数 优缺点>
    1.$function(){

    }
    2.$(document).ready(function(){

    })
    js的入口函数需要页面全部加载完成才执行，
    jq的入口函数只需要基本的标签加载完就可以执行。

<jq和js转换 为什么转换>
    var $dv = $("#dv")  //jQuery对象
    var dv = $dv[0]     //DOM对象
    方法不通用，dom对象只能使用dom的方法，而jq对象只能使用jq的方法。

<jq对象和dom对象的区别>
    jq对象是一个包装集(伪数组)

<选择器及作用>
    1.id选择器 获取指定id的元素
    2.类选择器 获取同一类class的元素
    3.标签选择器 获取相同标签的所有元素
    4.交集选择器 获取满足所有条件的元素
    5.并集选择器 获取满足条件之一的元素(逗号隔开)
    6.子代选择器 获取第一代的元素(使用>)
    7.后代选择器 获取所有子级的元素(使用空格)
    8.过滤选择器
      :eq()  获取指定索引的元素
      :odd() 获取索引是奇数的元素
      :even()获取索引是偶数的元素
    9.筛选选择器
      .children()获取元素的第一代元素 相当于子选择器
      .find()    获取元素所有的子元素 相当于后代选择器
      .siblings()获取元素的兄弟元素 $("div").sibings("ul")
      .parent()  获取父级元素
      .eq()      获取指定索引的元素
      .next()    获取下一个兄弟元素
      .prev()    获取上一个兄弟元素

<jq的事件加载>
    一是$(function(){}),
    二是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），
    三是load，指示页面包含图片等文件在内的所有元素都加载完成。

<链式编程>
    对象调用方法后返回的还是这个对象本身
    优点：省略重复性的代码

<解决断链问题>
    调用end()方法。返回链被破坏前的对象。

<动画效果及参数>
    $('#dv').animate({ });
    第一个参数：对象，里面可以传需要动画的样式
    第二个参数：speed 动画的执行时间
    第三个参数：动画的执行效果
    第四个参数：回调函数

    .show() 和 .hide()         -->  显示隐藏
    .slideUp() 和 .slideDown() -->  滑入滑出
    .fadeIn() 和 .fadeOut()    -->  淡入淡出
        参数1: fast(200ms)  normal(400ms)  slow(600ms)
        参数2: 回调函数 --> 动画执行完毕以后回调函数才执行

<停止动画>
    .stop(): 停止当前正在执行的动画
    .stop(true): 是否停止动画队列中所有的动画
    .stop(true,true): 停止当前动画并且显示当前动画的最终效果

<删除元素(3种)>
    empty(): 清空节点及删除其子节点，自身并不会删除
    remove()：删除所有后代节点及自身，与该节点绑定的事件删除后也将解除绑定
    detach()：删除所有后代节点及自身，但与该节点绑定的事件删除后依然保留

<keycode 键盘编码>
    $(function(){
        $('#text').keyup(function(e){
            console.log(e.keyCode);
            if(e.keyCode == 13){
                // 发送消息
                // 键盘对应编码
            }
        });
    });

<为元素绑定多个事件> 1.delegate() 2.bind() 3.on()
<解绑事件>          1.undelegate() 2.unbind() 3.off()
<子级委托父级绑定事件> 1.delegate() 2.on()
对象方式绑定多个相同事件，只会运行最后一个

<懒加载原理>
    为了节省用户流量和提高页面性能，
    可以在用户浏览到当前资源的时候，
    再对资源进行请求和加载。

    如果是图片,可以指定data-src为真实的图片地址,src为站位的图片。
    当资源进入视口的时候，将src属性值替换成data-src的值。
    使用元素距离文档顶部的距离offsetTop和scrollTop是否小于视口高度来判断


<防抖动>
    将几次操作合并为一次操作进行。
    只有最后一次操作能被触发。
    减少服务器请求次数,提高性能

<节流>
    节流函数不管事件触发有多频繁，
    都会保证在规定时间内一定会执行一次真正的事件处理函数，
    而防抖动只是在最后一次事件后才触发一次函数。


<each遍历对象>
    $(function () {
        $('#uu>li').each(function (index, ele) {
            console.log(index + '-------' + ele);
            var opacity = (index+1)/10;
            //ele是DOM元素,使用时要转成jQ对象
            $(ele).css('opacity',opacity);
        });

<$让权>
    把$的所有功能给了money
    var money = $.noConflict();

<只创建一个元素>
    有则删除，无则创建
    if (!$('#btn').length == 0) {
        通过length属性判断该元素是否存在
        console.log('存在');
    } else {
            console.log('不存在');
        }

<请求响应流程>
    客户端发送请求。
    请求首先会经过路由器处理后，发送给解析器，解析得到公网IP地址。
    根据公网IP地址找到服务器，服务器返回响应。
    再经过路由器返回到浏览器。
    客户端-->路由器-->解析器-->ip地址-->服务器-->路由器-->浏览器

<动态网站和静态网站的区别>
    静态页面是不能随时改动的，
    如果想改动，必须在页面上修改，然后再覆盖原来的页面，

    动态页面是可以随时改变内容的，
    可以在后台随时更新网站的内容，
    前台页面的内容也会随之更新。

<超全局变量>
    1. $_GET –> get 传送方式
    2. $_POST –> post 传送方式
    3. $_REQUEST –> 可以接收到 get 和 post 两种方式的值
    4. $GLOBALS –> 引用全局作用域中可用的全部变量
    5. $_FILES –> 上传文件使用
    6. $_SERVER –> 系统环境变量
    7. $_SESSION –> 用于会话控制
    8. $_COOKIE –> 用于会话控制
    9. $_ENV –> 服务器端环境变量

<ajax请求步骤>
    1.创建ajax对象
      需要处理兼容问题
    2.准备发送数据
      xhr.open(提交方式.type, 提交路径.url, 异步同步.async)
    3.执行发送数据
      get:xhr.send(null)
      post:xhr.send(param) 加上请求头
    4.指定回调函数

《ajax回调函数的具体步骤 各数值代表的含义》
    一.xhr.onreadystatechange
    二.xhr.readyState == 4
        0.初始化对象
        1.发送数据
        2.返回数据
        3.解析数据
        4.解析完成，正常使用
    三.xhr.status == 200
        200 数据正常使用
        404 没有找到资源
        500 服务器端错误

《同步和异步的不同》
    同步，是所有的操作都做完，才返回给用户结果,用户体验不好。

    异步，不用等所有操作等做完，就响应用户请求,用户体验较好。

js事件处理机制

《同源策略》
 是浏览器的一种安全策略，同源是指url请求地址中域名，协议名，端口全部相同。
 只要有一种不同就是跨域，在同源策略下，浏览器不允许ajax跨域获取数据。

《jaonp作用》
    解决跨域问题

《jsonp原理》
        动态创建script标签, 通过src属性发送请求
    服务端响应给我们的是函数调用
    所以我们需要在前端创建一个函数,
    并且这两个函数名需要保持一致，最终实现跨域。

<jq的优点>
    1.封装方法多
    2.隐式迭代
    3.没有兼容问题
    4.代码简洁

<入口函数 优缺点>
    1.$function(){

    }
    2.$(document).ready(function(){

    })
    js的入口函数需要页面全部加载完成才执行，
    jq的入口函数只需要基本的标签加载完就可以执行。

<jq和js转换 为什么转换>
    var $dv = $("#dv")  //jQuery对象
    var dv = $dv[0]     //DOM对象
    方法不通用，dom对象只能使用dom的方法，而jq对象只能使用jq的方法。

<jq对象和dom对象的区别>
    jq对象是一个包装集(伪数组)

<选择器及作用>
    1.id选择器 获取指定id的元素
    2.类选择器 获取同一类class的元素
    3.标签选择器 获取相同标签的所有元素
    4.交集选择器 获取满足所有条件的元素
    5.并集选择器 获取满足条件之一的元素(逗号隔开)
    6.子代选择器 获取第一代的元素(使用>)
    7.后代选择器 获取所有子级的元素(使用空格)
    8.过滤选择器
        :eq()  获取指定索引的元素
        :odd() 获取索引是奇数的元素
        :even()获取索引是偶数的元素
    9.筛选选择器
        .children()获取元素的第一代元素 相当于子选择器
        .find()    获取元素所有的子元素 相当于后代选择器
        .siblings()获取元素的兄弟元素 $("div").sibings("ul")
        .parent()  获取父级元素
        .eq()      获取指定索引的元素
        .next()    获取下一个兄弟元素
        .prev()    获取上一个兄弟元素

<jq的事件加载>
    一是$(function(){}),
    二是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），
    三是load，指示页面包含图片等文件在内的所有元素都加载完成。

<链式编程>
    对象调用方法后返回的还是这个对象本身
    优点：省略重复性的代码

<解决断链问题>
    调用end()方法。返回链被破坏前的对象。

<动画效果及参数>
    $('#dv').animate({ });
    第一个参数：对象，里面可以传需要动画的样式
    第二个参数：speed 动画的执行时间
    第三个参数：动画的执行效果
    第四个参数：回调函数

    .show() 和 .hide()         -->  显示隐藏
    .slideUp() 和 .slideDown() -->  滑入滑出
    .fadeIn() 和 .fadeOut()    -->  淡入淡出
        参数1: fast(200ms)  normal(400ms)  slow(600ms)
        参数2: 回调函数 --> 动画执行完毕以后回调函数才执行

<停止动画>
    .stop(): 停止当前正在执行的动画
    .stop(true): 是否停止动画队列中所有的动画
    .stop(true,true): 停止当前动画并且显示当前动画的最终效果

<删除元素(3种)>
    empty(): 清空节点及删除其子节点，自身并不会删除
    remove()：删除所有后代节点及自身，与该节点绑定的事件删除后也将解除绑定
    detach()：删除所有后代节点及自身，但与该节点绑定的事件删除后依然保留

<keycode 键盘编码>
    $(function(){
        $('#text').keyup(function(e){
            console.log(e.keyCode);
            if(e.keyCode == 13){
                // 发送消息
                // 键盘对应编码
            }
        });
    });

<为元素绑定多个事件> 1.delegate() 2.bind() 3.on()
<解绑事件>          1.undelegate() 2.unbind() 3.off()
<子级委托父级绑定事件> 1.delegate() 2.on()
对象方式绑定多个相同事件，只会运行最后一个

<懒加载原理>
    为了节省用户流量和提高页面性能，
    可以在用户浏览到当前资源的时候，
    再对资源进行请求和加载。

    如果是图片,可以指定data-src为真实的图片地址,src为站位的图片。
    当资源进入视口的时候，将src属性值替换成data-src的值。
    使用元素距离文档顶部的距离offsetTop和scrollTop是否小于视口高度来判断然而


<防抖动>
    将几次操作合并为一次操作进行。
    只有最后一次操作能被触发。
    减少服务器请求次数,提高性能

<节流>
    节流函数不管事件触发有多频繁，
    都会保证在规定时间内一定会执行一次真正的事件处理函数，
    而防抖动只是在最后一次事件后才触发一次函数。


<each遍历对象>
    $(function () {
        $('#uu>li').each(function (index, ele) {
            console.log(index + '-------' + ele);
            var opacity = (index+1)/10;
            //ele是DOM元素,使用时要转成jQ对象
            $(ele).css('opacity',opacity);
        });

<$让权>
    把$的所有功能给了money
    var money = $.noConflict();

<只创建一个元素>
    有则删除，无则创建
    if (!$('#btn').length == 0) {
        通过length属性判断该元素是否存在
        console.log('存在');
    } else {
            console.log('不存在');
        }

<请求响应流程>
    客户端发送请求。
    请求首先会经过路由器处理后，发送给解析器，解析得到公网IP地址。
    根据公网IP地址找到服务器，服务器返回响应。
    再经过路由器返回到浏览器。
    客户端-->路由器-->解析器-->ip地址-->服务器-->路由器-->浏览器

<动态网站和静态网站的区别>
    静态页面是不能随时改动的，
    如果想改动，必须在页面上修改，然后再覆盖原来的页面，

    动态页面是可以随时改变内容的，
    可以在后台随时更新网站的内容，
    前台页面的内容也会随之更新。

<超全局变量>
    1. $_GET –> get 传送方式
    2. $_POST –> post 传送方式
    3. $_REQUEST –> 可以接收到 get 和 post 两种方式的值
    4. $GLOBALS –> 引用全局作用域中可用的全部变量
    5. $_FILES –> 上传文件使用
    6. $_SERVER –> 系统环境变量
    7. $_SESSION –> 用于会话控制
    8. $_COOKIE –> 用于会话控制
    9. $_ENV –> 服务器端环境变量

<ajax请求步骤>
    1.创建ajax对象
      需要处理兼容问题
    2.准备发送数据
      xhr.open(提交方式.type, 提交路径.url, 异步同步.async)
    3.执行发送数据
      get:xhr.send(null)
      post:xhr.send(param) 加上请求头
    4.指定回调函数

《ajax回调函数的具体步骤 各数值代表的含义》
    一.xhr.onreadystatechange
    二.xhr.readyState == 4
        0.初始化对象
        1.发送数据
        2.返回数据
        3.解析数据
        4.解析完成，正常使用
    三.xhr.status == 200
        200 数据正常使用
        404 没有找到资源
        500 服务器端错误

《同步和异步的不同》
    同步，是所有的操作都做完，才返回给用户结果,用户体验不好。

    异步，不用等所有操作等做完，就响应用户请求,用户体验较好。

这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，
页面出去假死状态，当这个AJAX执 行完毕后才会继续运行其他代码页面假死状态解除。
而异步则这个AJAX代码运行中的时候其他代码一样可以运行。



《同源策略》
 是浏览器的一种安全策略，同源是指url请求地址中域名，协议名，端口全部相同。
 只要有一种不同就是跨域，在同源策略下，浏览器不允许ajax跨域获取数据。

《jaonp作用》
    解决跨域问题

《jsonp原理》
        动态创建script标签, 通过src属性发送请求
    服务端响应给我们的是函数调用
    所以我们需要在前端创建一个函数,
    并且这两个函数名需要保持一致，最终实现跨域。

《ajax的作用》
    1.显示新的html内容，而不用载入整个页面
    2.提交一个表单，并且立即显示结果
    3.登录而不用跳转到另一个页面

《get和post提交的区别》
    get的请求参数是在url中传递，需要注意编码问题
    post的请求参数是在请求体中传递，需要设置请求头信息

《ajax的数据格式》
    xml json

    添加: addClass()
    移除: removeClass()
    判断: hasClass()
    切换: toggleClass()

    append() 方法在被选元素的结尾（仍然在内部）插入指定内容
    prepend() 方法在被选元素的开头（仍位于内部）插入指定内容
    after() 方法在被选元素的后面插入一个指定的元素
    before() 方法在被选元素的前面插入一个指定的元素

 <客户端 php 阿帕奇三者如何协调工作的>
客户端发送请求到阿帕奇，静态数据由阿帕奇处理完成后返回客户端。
动态数据由阿帕奇发送到php进行处理，处理完成发送给阿帕奇，再有阿帕奇返回客户端。
<php三种输出方式>
var_dump函数 输出变量的内容、类型或字符串的内容、类型、长度。常用来调试。
print() 输出一个字符串
echo() 输出多个字符串
<isset、empty、is_null的区别>
isset 判断变量是否定义或者是否为空

empty：判断变量的值是否为空，能转换为false的都是空，为空返回true，反之返回false。
is_null：检测传入的值(值、变量、表达式)是否为null

<jquery的async这个属性>
默认是true：异步，false：同步。

<如何解决跨域问题>
理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域
出于安全考虑，服务器不允许ajax跨域获取数据，但是可以跨域获取文件内容，所以基于这一点，可以动态创建script标签，使用标签的src属性访问js文件的形式获取js脚本，并且这个js脚本中的内容是函数调用，该函数调用的参数是服务器返回的数据，为了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的数据，这就是解决跨域问题的主流解决方案

<Ajax的最大的特点是什么>
    Ajax可以实现异步效果，实现页面局部刷新，带来更好的用户体验；按需获取数据，节约带宽资源；

<ajax的缺点>
 1、ajax不支持浏览器back按钮。
 2、安全问题 AJAX暴露了与服务器交互的细节。
 3、对搜索引擎的支持比较弱。
 4、破坏了程序的异常机制。

<ajax请求时，如何解释json数据>
推荐使用JSON.parse()更靠谱，对数据的安全性更好。

<HTTP和HTTPS>
HTTPS的安全性更高，
默认HTTP的端口号为80，
HTTPS的端口号为443。
haoge568
关注
JQuery入门，JQuery总结
01-05
**jQuery入门与总结** jQuery是一个深受开发者喜爱的JavaScript库，它的出现极大地方便了JavaScript的编程，使得HTML元素的选择、操作和隐藏等任务变得更加简单。jQuery的核心理念是"write less, do more"，即用更...
js判断元素含有指定class
wang_xuan_1992的博客
11-23 1368
1.$(‘元素’).hasClass(‘类名’)； 返回true和false if($('#id').hasClass('myClass')){ } //判读两个class if($('#id').hasClass('myClass1 myclass2')){ } 2.$(‘元素’).is(‘类名’)；用法和hasClass()一致
jQuery（一）jQuery的认识和使用
qq_43182390的博客
02-27 618
jQuery（一） 一、jQuery介绍 1、js库 了解决一些通用的功能需求，把相关的方法封装在一个 js 文件中，我们称为 js 库 例如：fastClick；flexiable.js; zy.media.js; swiper.js… 2、js 框架 框架和库没有太明显的区别，只是框架的封装的功能更全更大 3、认识 jQuery 封装了一系列操作原生 dom 元素的功能库，比如获取元素，给元素做动画等 document.querySelector(‘div’) [不兼容] $(‘div’) 4、jQu
jquery 获取页面点击事件 $("body").click()
热门推荐
wangchaoqi1985的博客
06-08 2万+
jquery 如何获取页面点击事件 $("body").click() 参考地址：jquery 获取页面点击事件 $("body").click()
jQuery 属性操作 - hasClass() 方法
Seachal的博客
05-27 3354
定义和用法 hasClass() 方法检查被选元素是否包含指定的 class。 语法 $(selector).hasClass(class)参数 描述 class 必需，规定需要在指定元素中查找的类。 实例 $(document).ready(function(){ $("button").click(function(){ aler
jQuery总结
weixin_44327380的博客
10-15 811
jQuery总结一、jQuery是什么？二、jQuery 核心函数三、jQuery 对象和 dom 对象区分四、jQuery 选择器1.基本选择器2.层级选择器3.过滤选择器五、jQuery 元素筛选 一、jQuery是什么？ jQuery，顾名思义，也就是 JavaScript 和查询（Query），它就是辅助 JavaScript 开发的 js 类库。 jQuery 核心思想！！！ 它的核心思想是 write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。 jQue
JQuery总结
weixin_48128080的博客
04-08 1190
1.JQuery 1)JQuery他是对javascript对像/函数的一种封装 就是前端的框架 2)写得少,做得多 3)有强大的选择器的支持(语法与css选择器几乎一样) 2.jquery环境搭建 1) <script type="text/javascript" src="你的jquery.js的相对路劲"></script> 2)#(function(){//测试是否加载成功}) 3)$等同于JQuery $(选择器/对象/函数).JQuery方法...
仿写jQuery总结
LWH8011的博客
06-20 2034
闭包 使用匿名函数||闭包 实现局部变量避免变量的全局污染 (function(){})() window全局方法 window.$=window.jQuery jQuery无new化操作 function jQuery(){ return new jQuery.prototype.init() } jQuery.prototype.init=function(){ return this; } jQuery.prototype.init.prototype = jQuery.proto
jQuery总结1
08-03
6、总结jQuery是一个强大的JavaScript库，它极大地简化了DOM操作、事件处理和动画制作。它的核心优势在于提高了开发效率，降低了代码复杂性，同时具有良好的浏览器兼容性。jQuery通过其独特的选择器语法，使得选取...
jquery总结学习资料JQuery总结
10-16
**jQuery 总结** 在实际开发中，jQuery 可以极大地提高工作效率，减少代码量，使得动态交互和界面美化变得更加简单。然而，随着 ES6 和现代前端框架的崛起，如 React 和 Vue，jQuery 在某些场景下可能不再是首选。...
2022Jquery总结.pptx
01-25
本文将深入探讨2022年jQuery的总结，包括其概念、优点、基本使用方法以及与DOM对象的区别。 首先，jQuery是由John Resig于2006年创立的，它是最受欢迎的JavaScript库之一。jQuery的设计理念是"write less, Do more...
jQuery $('body').on()vs $('document').on()
燕儿归的专栏
11-17 1万+
用新的jQuery函数替换.live（）我已经看到了几种不同的方式来使用它。在这里我看看使用body或document作为事件委托中的绑定元素的主要区别。如果你是新的事件委托，它提供了将事件附加到尚未创建的元素的方法，同时将事件附加到同一类型的多个元素也具有较低的开销。有关更多信息，如果您想知道为什么.live（）被弃用，请查看jQuery .live（）与.on（）的评论。 大多数
Vue3 走马灯无限滚动公告
梦寻汝的博客
12-06 203
Vue3 走马灯无限滚动公告。Vue3Marquee
uni-calendar多选，不是选择范围
weixin_58431406的博客
12-04 192
uni-calendar日历，弹窗模式，日期多选，选择后的日期使用标签回显，标签回显格式：[{date:"2024-12-17",info:"已选择"}，{date:"2024-12-24",info:"已选择"}]
Vue的生命周期方法有哪些？一般在哪一步发送请求
最新发布
error_log7的博客
12-07 728
推荐在created钩子中发送请求，因为此时数据已准备好，且不依赖于 DOM 渲染。如果需要依赖 DOM 元素（比如获取 DOM 的尺寸、进行动画、与第三方库交互等），则可以在mounted中发送请求。和通常不用于发送请求，除非有特殊需求。
v-on:click后面可以加什么
u010055960的博客
12-07 207
后面可以跟的不仅仅是一个函数名，它可以是一个表达式，这个表达式可以包含任何有效的 JavaScript 代码，只要这段代码在执行时能够正确响应点击事件即可。这意味着你可以在点击事件中执行方法调用、属性赋值、数学运算等操作。后面直接写一个 JavaScript 表达式，该表达式将在点击事件发生时被求值。在 Vue 2.6.0+ 中，可以直接在模板中使用箭头函数。后面直接跟上一个方法名，该方法将在点击事件发生时被调用。是 Vue 实例中的一个方法。在这个例子中，每次点击按钮时，是 Vue 实例中的方法。
"jQuery总结1：入门函数、优势及基本介绍
总结： 本文主要介绍了jQuery的...最后总结了本文的内容，再次强调了jQuery的优势，并鼓励读者继续深入学习和使用jQuery框架来提高开发效率。同时也提到了jQuery的开源特性，任何人都可以参与贡献代码或使用该框架。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

haoge568

不要超过你的早饭钱

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值