重温jQuery基础01

最新推荐文章于 2021-08-13 22:41:13 发布

®南墙№

最新推荐文章于 2021-08-13 22:41:13 发布

阅读量274

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_44519188/article/details/91353855

版权

本文是jQuery基础教程的第一部分，介绍了jQuery的定义、特点和基础用法，包括页面加载事件、DOM操作、选择器和属性样式。jQuery是一个轻量级的JavaScript库，简化了HTML元素的操作和事件处理。文章强调了基础的重要性，并展示了jQuery如何通过简洁的语法实现强大的功能，同时提到了jQuery与JavaScript的互补性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

重温jQuery基础01

开发工具与关键技术：VS  、  MVC
撰写时间：2019/6/4

学习后重要的是温故而知新，学习新知识固然重要，但是因为学习新知识之后把之前的知识丢掉，那就是一种得不偿失的后果。基础很重要，基础是为学习新的知识打下的首战，学会巩固基础，那么就是摘取首战胜利的果实。
jQuery的基础课程共分为5个部分，分别是1）、样式篇;Style 2)、事件篇：Event
3）、动画篇：Animation 4）、DOM篇：Dom 5）、Ajax篇：Ajax

一、初识jQuery
了解了jQuery基础篇章之后，了解什么是jQuery? jQuery是一个JavaScript函数库，是一个轻量级的“写得少，做得多”的JavaScript库。jQuery库包含以下功能：（1）HTML 元素获取（2）HTML
元素操作（3）CSS操作（4）HTML
事件和函数（5）JavaScript 特效和动画（6）HTML
DOM 遍历和修改（7）AJAX （8）Utilities。
除此之外，jQuery还提供大量的插件。
关于jQuery的使用，使用jQuery并不难，无需特别的安装，只需要在项目中添加jQuery库，在页面通过script标签引入jQuery库即可；因为jQuery是一个JavaScript脚本库，其脚本库下载地址：http://jquery.com/download/ 。jQuery在页面引入之后可直接通过” $” 这个符号即可对 j Q u e r y 使用了； j Q u e r y 语法是通过选取 H T M L 元素，并对选取的元素执行某些操作。基础语法：$ (selector),action() $美元符号定义jQuery，选择符号(selector)“查询”和“查找”HTML元素。
在这里插入图片描述
jQuery页面加载事件写法，和简写方法，如下截图：

jQuery的效果等同于JavaScript的效果，而且jQuery实现的效果代码量比实现同样功能的JavaScript的代码量少，但是这样也不等同于完全使用jQuery而不使用JavaScript；很多时候jQuery和JavaScript是相互相成的，共通在页面中使用。比如：查找HTML元素通常是。通过JavaScript获取需要操作的HTML元素；为了做到这件事，必须首先找到该元素；在DOM中查找HTML元素常用三种方法来做这件事：1、通过id找到HTML元素2、通过标签名找到3、通过类名找到。但是不管通过什么方式找到，JavaScript和jQuery都可以实现这个操作。其JavaScript和jQuery实现功能的代码如下图；
在这里插入图片描述
1、jQuery对象转化成DOM对象
jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，为了提供更好更方便快捷的DOM处理与开发中经常使用的功能；使用jQuery的同时也能混合JavaScript原生代码一起使用，在很多场景中，需要jQuery与DOM能够相互的转换，他们都是可以相互转换，它们都可以操作DOM元素，jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。
在这里插入图片描述
二、jQuery选择器
jQuery选择器分类 1、基本 #id,element,.class,*,selector1,selector2,selectorN)
2、层级 3、基本筛选器 4、内容 5、可见性 6、属性 7、子元素 8、表单 9、表单对象属性 10、混淆选择器。
下截图是jQuery基本选择器和层级选择器的代码以及选择器的用法：
在这里插入图片描述
很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素，为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素。
筛选选择器很多都不是CSS的规范，而是jQuery自己为了开发者的便利延展出来的选择器
jQuery筛选选择器的用法与CSS中的为元素相似，选择器用冒号“：”开头，基本筛选器的描述，想详细了解可以查看jQuery API文档；
选择器

     	    $(":first") 获取匹配第一个元素      例如:$('li:first');
            $(":last") 获取匹配的最后个元素    例如:$('li:last');
            $(":not(selector)") 去除所有与给定选择器匹配的元素 例如:$("input:not(:checked)")
            $(":even")  匹配所有索引值为偶数的元素，从 0 开始计数 例如:$("li:even")
            $(":odd")  匹配所有索引值为奇数的元素，从 0 开始计数 例如:$("li:odd")
            $(":eq(index)")  匹配一个给定索引值的元素，从 0 开始计数 例如:$("li:eq(1)")
            $(":gt(index)")  匹配所有大于给定索引值的元素，从 0 开始计数 例如:$("li:gt(0)")
            $(":lt(index)")  匹配所有小于给定索引值的元素，从 0 开始计数 例如:$("li:gt(2)")
            $(":header")  匹配如h1, h2, h3之类的标题元素 例如:$(":header").css("background","#EEE");
            $(":animated")  匹配所有正在执行动画效果的元素(只有对不在执行动画效果的元素执行一个动画特效)
            
            例如:$(":header").css("background","#EEE");
            $(":focus")  匹配当前获取焦点的元素。
            $(":root")  选择该文档的根元素。在HTML中，文档的根元素，和$(":root")选择的元素一样，永远是<html>元素。
            
       示例:设置<html>背景颜色为黄色
           $(":root").css("background-color","yellow");

    // jQuery选择器之内容筛选选择器
    // jQuery选择器之可见性筛选选择器
    // jQuery选择器之属性筛选选择器
    // jQuery选择器之子元素筛选选择器
    // jQuery选择器之表单元素选择器
    // jQuery选择器之表单对象属性筛选选择器

三、jQuery的属性与样式
1、jQuery的属性与样式之.attr()与.removeAttr()

（1）每个元素都有一个或者多个特性，这些特性的用途就是给出相应元素或者其内容的附加信息。
如：在img元素中，src就是元素的特性，用来标记图片的地址。
js操作特性的DOM方法主要有3个:
(1)getAttribute方法
(2)setAttribute方法 (3)removeAttribute方法
（2）在jQuery中用一个attr()与removeAttr()就可以全部搞定了，包括兼容问题

jQuery中用attr()方法来获取和设置元素属性。

attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()。

attr()有4个表达式
    1、attr(传入属性名)：获取属性的值:get==getAttribute方法
    2、attr(属性名, 属性值)：设置属性的值:set==setAttribute方法
    3、attr(属性名,函数值)：设置属性的函数值:set        
    4、attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }

（4）removeAttr()删除方法

removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性（attribute）

（5）优点：

    attr、removeAttr都是jQuery为了属性操作封装的，直接在一个 jQuery 对象上调用该方法，很容易对属性进行操作，也不需要去特意的理解浏览器的属性名不同的问题

（6）注意的问题：

（1）dom中有个概念的区分：Attribute和Property翻译出来都是“属性”，《js高级程序设计》书中翻译为“特性”和“属性”。简单理解，Attribute就是DOM节点自带的属性

例如：html中常用的id、class、title、align等：

（2）而Property是这个DOM元素作为对象，其附加的内容，例如,tagName, nodeName, nodeType,,defaultChecked, 和 defaultSelected

使用.prop()方法进行取值或赋值等
获取Attribute就需要用attr，获取Property就需要用prop

1、attr(传入属性名)：获取属性的值:get

 var divName = $("#sdemo").attr("name");//获取name属性的值 
$("#demo").attr("class", "div-style");//设置class属性，值div-style
$("#demo").removeAttr("name");//移除name属性

2、jQuery的属性与样式之html()及.text()
（1）读取、修改元素的html结构或者元素的文本内容是常见的DOM操作。jQuery针对这样的处理提供了2个便捷的方法.html()与.text()

1、 .html()方法
获取集合中第一个匹配元素的HTML内容或设置每一个匹配元素的html内容，具体有3种用法：

 1、.html() 不传入值，就是获取get集合中第一个匹配元素的HTML内容
2、.html( htmlString )  设置set每一个匹配元素的html内容
3、.html(function(index, oldhtml) ) 用来返回设置HTML内容的一个函数
 注意事项：.html()方法内部使用的是DOM的innerHTML属性来处理的，所以在设置与获取上需要注意的一个最重要的问题，这个操作是针对整个HTML内容（不仅仅只是文本内容）、

2、.text()方法
得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。，
具体有3种用法：

.text() 得到匹配元素集合中每个元素的合并文本，包括他们的后代
.text( textString ) 用于设置匹配元素内容的文本
 .text( function(index, text) ) 用来返回设置文本内容的一个函数
注意事项：.text()结果返回一个字符串，包含所有匹配元素的合并文本

3.html与.text的异同:
.html与.text的方法操作是一样，只是在具体针对处理对象不同
.html处理的是元素内容，.text处理的是文本内容
.html只能使用在HTML文档中，.text 在XML 和 HTML 文档中都能使用
如果处理的对象只有一个子文本节点，那么html处理的结果与text是一样的
火狐不支持innerText属性，用了类似的textContent属性，.text()方法综合了2个属性的支持，所以可以兼容所有浏览器

@*<script type="text/javascript">
        //显示出html方法获取到的内容
        //.html()是整个html文档结构
         $('p:first').html($(".first-div").html());
          console.log($(".first-div").html());

//显示出text方法获取到的内容
        //.text()是文本内容的合集     
        $('p:last').text($(".first-div").text());      
	console.log($(".first-div").text());
</script>

<script type="text/javascript">

        //通过.text()方法替换文本内容

        $(".left a:first").text('替换第一个a元素的内容');

       //通过.html()方法替换html结构

        $(".left div:first").htmtl('整个div的子节点都被替换了');

</script>

以上的内容都是一些简单的基础入门知识，并且这些资料来源于老师的教材；
但是这些基础知识教会了我认识jQuery库，并且带我走进就编程的路口。
总结：JavaScript是一门语言；jQuery是一个框架，它对JavaScript进行封装，使用其更方便快捷。