jQuery

jQuery

基础概念

概念

JavaScript 原生DOM有些许不便:API不好记、设置事件不方便、调用繁琐。

jQuery是第三方的javaScript框架。jQuery本质是一个js文件,内部已经写好了大量的函数用于进行快捷的DOM操作。jQuery旨在“Write Less,Do More”,它具有独特的链式语法和短小清晰的多功能接口,具有高效灵活的CSS选择器,并且可对CSS选择器进行扩展,拥有便捷的插件扩展机制和丰富的插件。

目前国内用的比较多的是3.5.1版本,以及能够支持IE8的1.11.1版本(从jQuery2.x开始,就不再支持IE8)。

引入

通过<script src="jQuery文件地址"> </script>引入。jQuery文件地址可以是网络地址也可以是本地地址,建议使用本地地址。

<script src="jQuery文件地址"> </script>
<script>
    //jQuery代码
</script>

使用流程

  1. 引入jQuery
  2. 利用jQuery选择器找到需要操作的HTML标签
  3. 通过jQuery提供的函数完成DOM操作

注意点

如果页面使用了jQuery,那么用jQuery操作的HTML标签就不能再使用原生的DOM API。比如innerHTML、appendChild、parentElement等。如果要用,那么必须先完成jQuery标签和原生DOM标签的转换。

获取jQuery标签及原生DOM标签的切换

通过jQuery获取页面上的标签

$("css选择器");
//例子:
var $box = $('#box');//获取id为box的HTML标签

通过CSS选择器去寻找匹配到的HTML标签,会根据返回的个数自动判断是返回一个元素或一个数组。

更多选择器可查阅jQuery参考手册 - 选择器

jQuery标签和DOM标签切换

  • jQuery转原生DOM

    var 原生dom标签变量名 = jQuery标签变量名.get(0);
    //例子:
    var $box  = $('#box');
    //把jquery 转为原生 DOM 标签
     var box = $box.get(0);
    console.log($box)
    console.log(box);
    
  • 原生DOM转jQuery

    var jQuery标签变量名 = $(原生DOM标签变量名);
    //例子:
    var box = document.querySelector('#box');
    var $box = $(box);
    console.log($box);
    

基本操作

内容获取/修改

  • html():用于获取或设置某个标签的内部HTML代码,类似于原生中的innerHTML。

  • text():获取或设置标签的内部文本,类似于原生的innerText。

  • val():获取或设置表单元素的内容,类似于原生的value。

    //获取
    jQuery标签变量名.html();
    jQuery标签变量名.text();
    jQuery标签变量名.val();
    //设置
    jQuery标签变量名.html("新内容");
    jQuery标签变量名.text("新内容");
    jQuery标签变量名.val("新内容");
    
  • 例子:

    <div>
    <p>这是div中的 p标签</p>    
    </div>
    <input value="123">
    
    //获取
    var divText = $('div').text();
    var divHTML = $('div').html();
    var inputValue= $('input').val();
    //设置
    $('div').text('新内容');
    $('div').html("<a href='#'>百度一下</a>");
    $('input').val("456");
    

属性获取/修改

  • attr():获取或设置HTML标签的某个属性。

  • prop():获取或设置HTML标签的某个属性,跟attr()相比,prop()适用于标签的内置属性,而attr()更适用于用户自定义属性。

  • removeProp():删除某个指定的属性。

  • removeAttr():删除某个指定的属性(推荐使用)。

  • addClass():给某个标签追加一个class。

  • removeClass():删除某个标签的指定class。

    jQuery标签变量名.attr("属性名");
    jQuery标签变量名.attr("属性名", "属性值");
    jQuery标签变量名.prop("属性名");
    jQuery标签变量名.prop("属性名", "属性值");
    jQuery标签变量名.removeProp("属性名");
    jQuery标签变量名.removeAttr("属性名");
    jQuery标签变量名.addclass("class名");
    jQuery标签变量名.removeclass("class名");
    
  • 例子:

    <div class="item">
    <p>这是div中的 p标签</p>    
    </div>
    <input value="123">
    
    //获取
    var value1 = $('input').attr('value')
    var value2 = $('input').prop('value')
    //设置
    $('div').addClass('box');
    $('div').removeClass('item');
    

添加/删除

添加

  • append():在某个标签之后插入一个新标签,新标签会作为最后一个子标签,类似于原生DOM的appendChild

  • before():在某个标签之前插入一个新标签,新标签会作为上一个兄弟标签。

  • after():在某个标签之后插入一个新标签,新标签会作为下一个兄弟标签。

    jQuery标签变量名.append("新标签的HTML代码");
    jQuery标签变量名.before("新标签的HTML代码");
    jQuery标签变量名.after("新标签的HTML代码");
    

删除

  • remove():删除找到的所有标签。

    jQuery标签变量名.remove();
    
    • 如果找到多个标签,则它们都会被删除。

获取子/兄弟/父标签

获取子标签

  • children():获取某个标签的所有直接子标签。
  • find('css选择器'):根据CSS选择器获取获取某个标签满足条件的所有后代标签。

获取兄弟标签

  • prev():获取某个标签的上一兄弟标签。
  • next():获取某个标签的下一兄弟标签。

获取父标签

  • parent():获取某个标签的直接父标签。
  • parents('css选择器'):获取某个标签的某个祖先标签,具体是通过CSS选择器来指代。
jQuery标签变量名.parent();
jQuery标签变量名.parents(CSS选择器);
jQuery标签变量名.prev();
jQuery标签变量名.next();
jQuery标签变量名.children();
jQuery标签变量名.find(CSS选择器);

遍历

  • first():获取遍历标签中的第一个。

  • last():获取遍历标签中的最后一个。

  • each():对jQuery标签的快捷遍历。

  • eq(i):获取找到标签中指定下标的标签,即第i个jQuery标签。

    $jQuery待遍历标签变量名.first();
    $jQuery待遍历标签变量名.last();
    $jQuery待遍历标签变量名.each(function(index){});
    $jQuery待遍历标签变量名.eq(i);
    

修改CSS

css()

//语法: 
//设置
jQuery标签变量名.css('CSS属性名', 'CSS属性值');
//批量设置css
jQuery标签变量名.css({
    'CSS属性名1': 'CSS属性值1',
    'CSS属性名2': 'CSS属性值2',
    'CSS属性名3': 'CSS属性值3',
});
//获取 
jQuery标签变量名.css('CSS属性名');

动画

内置动画

淡入/淡出

  • fadeIn():淡入
  • fadeOut():淡出

下拉/上滑

  • slideDown():下拉
  • slideUp():上滑
jQuery标签变量名.slideDown(动画毫秒时间);
jQuery标签变量名.slideUp(动画毫秒时间);
jQuery标签变量名.fadeIn(动画毫秒时间);
jQuery标签变量名.fadeOut(动画毫秒时间);
  • 如果对同一个标签设置了多个动画,按照动画代码的书写顺序依次执行

自定义动画

animate():用户自定义动画

jQuery标签变量名.animate({
    "css属性名1": "css属性值1",
    "css属性名2": "css属性值2",
    "css属性名n": "css属性值n"
}, 动画持续毫秒时间);
  • animate基本上只支持跟位置和尺寸相关的动画,其他的基本都不支持。
  • 如果要颜色的动画,可以使用css3,用JavaScript来切换class达到控制动画的目的。

动画结束后执行js代码

jQuery的每个动画函数都可以支持额外的参数,该参数必须是一个函数,用于表示在动画结束后要执行的代码。

jQuery标签变量名.动画函数名(其他参数, function(){
    //动画结束后要执行的代码
});

事件

on()

on()默认使用事件委托。

$父标签标签变量名.on('事件名', '要执行事件的标签CSS选择器', function(e){
    //触发事件时要执行的代码
});

例子:

<div id='box'><div>
$('body').on('click', '#box', function(e){
    //当id为box的标签发生点击事件要执行的代码
});
  • this仍为DOM原生元素,如果转为jQuery元素需使用$(this)。

其它快捷事件方法

不推荐使用,这些快捷事件方法不适用于用js代码新增的标签,而on()则适用当前及未来的元素,故建议使用on()

  • click
  • hover
  • dblclick

更多快捷事件方法参见jQuery 参考手册 - 事件

其他API

  • show():等同于css('display','block'),显示某个标签。

  • hide():等同于css('display','none'),隐藏某个标签。

    jQuery标签变量名.show();
    jQuery标签变量名.hide();
    

链式调用

概念

如果需要对同一个标签执行多句的jQuery代码,则需要不断的获取jQuery标签,造成代码量过多的问题。采用链式调用可将对同一个标签的多句代码整合成一句,达到代码整齐并减少一定的代码量的效果。

语法

jQuery标签变量名.函数名1().函数名2().函数名3()....函数名n();

例子: 
$('div').css('width','300px').animate({"margin-left":"300px"},1000).text('123');
$('div').css('width','300px'); 
  • 以上的每个函数都是接着前一个函数的执行结果继续执行。
posted @   AncilunKiang  阅读(33)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签
点击右上角即可分享
微信分享提示