jQuery学习

最新推荐文章于 2025-08-13 21:05:35 发布

chancejl

最新推荐文章于 2025-08-13 21:05:35 发布

阅读量159

点赞数

CC 4.0 BY-SA版权

文章标签： jQuery 前端

本文链接：https://blog.youkuaiyun.com/qq_39833794/article/details/80044583

一.jQuery的概念

jQuery是一个快速，简洁的javascript框架，jQuery设计的宗旨是“write less，do more”。

二.jQuery.js和jQuery.min.js的区别

jQuery-1.版本号.js 开发版 268K 完整无压缩的版本，主要用于测试学习

jQuery-1.版本号.min.js 发布版 91K 经过工具压缩或经过服务器开启GZip压缩的主要用于产品的部署

三.jQuery优点

jQuery具有独特的链式语法和短小清晰的接口；

具有高效灵活的css选择器，并且可对css选择器进行扩展；

兼容各大主流浏览器；

四.jQuery中的预执行函数

1）什么是预执行函数？

当页面结构加载完成后自动执行的函数

2）预执行函数的写法

$(function(){});

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

3）jQuery中的预执行函数和window.onload的区别

1、执行时间上的区别：window.onload必须等到页面内（包括图片的）所有元素加载到浏览器中后才能执行。
   而$(document).ready(function(){})是DOM结构加载完毕后就会执行。
2、编写个数不同：window.onload不能同时写多个，如果有多个window.onload，则只有最后一个会执行，
   它会把前面的都覆盖掉。$(document).ready(function(){})则不同，它可以编写多个，并且每一个都会
   执行。jQuery的预执行函数是监听事件实现。

五.jQuery中的参数

1）元素选择器 ------基于元素名字选取

$('p')

2)ID选择器------ 通过HTML中的ID属性选取的元素

$('#test')

3)class选择器 ------通过指定的class指定的元素

$('.class')

4）创建jQuery对象

与document.createElement();相类似，参数为html标签

$('<p></p>)

$('<div></div>)

六.jQuery中的DOM操作

1）获取和设置内容

text( )设置或返回所选元素的文本内容

获取 / 设置

$('#test').text(); / $('#test').text('good');

html( ）设置和返回所选元素的内容，包括html标签

获取/设置

$('#test').html(); / $('#test').html('<div></div>');

2）获取和设置值和属性值

val( )设置或返回表单字段的值

获取或设置

$('#text').val(); / $('#text').val('good');

attr( )设置或返回所选元素指定的属性值

$('#text').attr("href"); / $('#text').attr("href","https:www.youkuaiyun.com");

3）添加元素

append( ) ------ 在被选元素的结尾加入内容

prepend( ) ------ 在被选元素的开头加入内容

after( ) ------ 在被选元素之后加入内容

before( ) ------ 在被选元素之前加入内容

4）删除元素

remove( ) ------ 删除被选元素，包括子元素

empty( ) ------ 从被选元素中删除子元素

5）获取并设置css类

addClass( ) ------ 向被选元素添加一个或多个类

removeClass( ) ------ 从被选元素中删除一个或多个类

toggleClass( ) ------ 对被选元素进行添加或删除类的切换操作

6）获取并设置css属性

$('p').css('background'); //获取样式
$('p').css('background','red'); //设置单个样式

$('p').css({'background':'red';'color':'red';});//设置多个样式

注：使用jQuery时需注意所有代码都需要使用jQuery，不可以javascript原生混用jQuery；

（使用$('ele')[number]可以获取到原生对象，可以将jQuery转换成原生后进行原生的代码编写）

七.jQuery的事件

    //点击事件
    $('.box1').click(function(){
        $(this).text('太阳很好');
    });
    $('.box1').on('click',function(){
        $(this).text('太阳');
    });
    //鼠标事件
    $('.box1').mouseenter(function(){
        $(this).css('background','yellow');
    });
    $('.box1').on('mouseleave',function(){
        $(this).css('background','red');
    });

 jQuery添加事件的两种方法：
* 1.jqEle.事件名(function(){});将javascript原生的事件名on去掉；
* 2.jqEle.on('事件名',function(){}):
* jQuery标准的javascript库支持鼠标事件，键盘事件，表单事件，但是不支持滚轮事件；

八.jQuery的动画

$(selector).animate({params},speed,callback);

1）隐藏和显示动画——修改width/height/opacity

//参数为动画执行速度，动画执行完毕后执行的回掉函数

$(..).show(speed, fn) //显示，默认速度为0

$(..).hide(speed, fn) //隐藏，默认速度为0

$(..).toggle(speed, fn) //隐藏显示的切换操作

2）淡入/淡出动画——修改opacity

$(..).fadeOut(speed,fu ) //淡出

$(..).fadeIn( speed,fn) //淡入

$(..).fadeToggle( speed,fn) //切换

3）折叠展开/收起动画——修改的height

$(..).slideUp( speed,fn) //收起

$(..).slideDown( speed,fn) //展开

$(..).slideToggle( speed,fn) //切换

4）万能动画函数——修改任意合法的属性

$(..).animate( {

width: '300%',

height: '30%',

opacity: '0.6',

left: '300px'

} , 动画时间毫秒, fn);

注：当使用animate（），必须使用camel方法，例如padding-right 不可以需要写成paddingRight。

九.jQuery工具方法

//测试工具
    // $.isArray(obj)判断是否维数组对象，若是返回true，若不是则返回false
    console.log($.isArray(arr1));
    //$.isFunction(obj)判断是否为函数，是返回true，否则false
    console.log($.isFunction(function(){}));
    //$.isEmptyObject(obj)判断是否为空对象
    console.log($.isEmptyObject([]));
    //$.isPlainObject(obj)判断是否为纯粹的对象
    console.log($.isPlainObject());
    //$.contains(父级，子级)判断两个元素是否包含关系  注意：查询的两个元素必须是element对象，js原生对象，不能使jquery对象
    console.log($.contains($('.box'),$('.box1')));
    var box = document.querySelector('.box');
    var box1 = document.querySelector('.box1');
    console.log($.contains(box,box1));
    //$.type(data)查看数据类型
    console.log($.type({}));
    //$.isNumeric(data)判断数据是否是数值 纯数字字符串也符合
    console.log($.isNumeric('0'));
    //$.isWindow(data)判断是否是window对象
    console.log($.isWindow(window));

十.jQuery遍历

<div class="parent">
<div class="son">
<div class="grandSon"></div>
</div>
</div>

1）遍历子节点方法

（1）children( )

.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈）

$('div').children( ); 在上方代码只可以遍历出div="son"元素。

（2）find( )

查找DOM树中的这些元素的后代元素，可以用find()方法。find( )只在后代中遍历，不包括自己。

注意：children与find方法的区别

children是父子关系查找，find是后代关系（包含父子关系）

$('div').find( );在上方代码中可以遍历 div class="son",div class="grandSon"元素;

2）遍历父节点

（1）parent( )

和children一样只会查找上一级

$('son').parent( ); 在上方代码只可以遍历出div="parent"元素。

（2）parents( )

与parent( )的区别是可以往上一直查到查找到祖先节点

$('grandson').parents( );在上方代码可以遍历出div='parent';

注：

 $( "html" ).parent()方法返回一个包含document的集合，而$( "html" ).parents()返回一个空集合

3）遍历相邻节点方法

（1）next( )

查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合

（2）prev( )

查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合

（3）sibling( )

查找指定元素集合中每一个元素的同辈元素

4）追加元素

add( )

<div class="out">
<div class="inner">
</div>
</div>

（1）add select

$('inner').add('p');

（2）add 元素

$('inner').add('<div></div>);

.add()的参数可以几乎接受任何的$()，包括一个jQuery选择器表达式，DOM元素，或HTML片段引用。

5）循环元素

（1）each( )

$.each(arr,function(index,item){});
 注释：arr是要接受遍历的数组；
      index是数组的下标；
      item是数组的每一个元素
      该方法是遍历数组/对象的每一个元素，且无返回值

（2）grep( )

 $.grep(arr,function(item,index){});
 该方法是遍历数组/对象的每一个元素，并筛选有用的元素，返回一个新数组

（3）map( )

 $.map(arr,function(item,index){});
 该方法遍历数组/对象的每一个元素，并更改每一个元素返回更改后的新数组