JavaScript极速入门(2)

这篇具有很好参考价值的文章主要介绍了JavaScript极速入门(2)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

JQuery

W3C标准给我们提供了一系列函数,让我们可以操作:

网页内容

网页结构

网页样式

但是原生的JavaScript提供的API操作DOM元素时,代码比较繁琐,冗长.我们学习使用JQuery来操作页面对象.
 

JQuery是一个快速,简洁且功能丰富的JavaScript框架,于2006年发布.它封装JavaScript常用的功能代码,提供了简洁而强大的选择器和DOM方法.使用JQuery可以轻松地选择和操作HTML元素,从而减少了开发人员编写的代码量,从而提高了开发效率,它提供的API易于使用且兼容众多浏览器,这让诸如HTML文档的遍历和操作,事件处理,动画和ajax操作更加简单.JQuery对于事件处理也进行了简化,提供了一个简单的API来绑定,触发和处理事件,使开发人员能够更方便地处理各种交互行为. 

引入依赖

使用JQuery需要先引入对应的库.

在使用JQuery CDN时,只需要在HTML文档中加入如下代码:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

其中,src指明了JQuery库所在的url,这个url是CDN(内容分发网络)服务提供商为JQuery库提供的一个统一资源定位符. 也可以使用其它公司提供的CDN网址.

JQuery语法

jQuery语法是通过选取HTML元素,并对选取的元素执行某些操作.

基础语法

$(selector).action()

$()是一个函数,它是JQuery提供的一个全局函数,用于选择和操作HTML元素.

Selector选择器,用来"查询"和"查找"HTML元素.

action操作,执行对元素的操作.

JQuery的代码通常都写在document ready函数中.

document:整个文档对象,一个页面就是一个文档对象,使用document表示. 

这是为了防止文档在完全加载(就绪)之前运行jQuery代码,即在文档加载完成后才可以对页面进行操作. (如果文档没有完全加载之前就运行函数,操作可能失败).

$(document).ready(function(){
    //jQuery functions go here
}); 

示例:

<button type="button">点我消失</button>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $(this).hide();
        });
    });
</script>

给按钮添加了click事件,点击后元素消失.

简洁写法:

$(function(){
    //jQuery functions go here.
});

JQuery选择器

我们通过JQuery选择器来选择一些HTML元素.然后对元素进行操作.

JQuery选择器基于已经存在的CSS选择器,除此之外,还有一些自定义的选择器.

 jQuery中所有选择器都以 $ 开头:$().

语法 描述
$("*") 选取所有元素
$(this) 选取当前HTML元素
$("p") 所有<p>元素
$("p:first") 选取第一个<p>元素
$("p:last") 最后一个<p>元素
$(".box") 所有class="box"的元素
$("#box") id="box"的元素
$(".intro .demo") 所有class="intro"且class="demo"的元素
$("p.intro") 选取class=intro的<p>元素
$("ul li:first") 选取<ul>元素的第一个<li>元素
$(":input元素") 所有<input>元素
$(":text") 所有type="text"的<input>元素
$(":checkbox") 所有type="checkbox"的<input>元素

JQuery事件

JS要构建动态页面,就需要感知到用户的行为.

用户对于页面的一些操作(点击,选择,修改等)操作都会在浏览器中产生一个个事件,被JS获取到,从而进行更复杂的交互操作.

浏览器就是一个哨兵,在侦察敌情(用户行为).一旦用户有反应(触发具体动作),哨兵就会点燃烽火台的狼烟(事件),后方就可以根据狼烟来决定下一步的对敌策略. 

事件由三部分组成:

1.事件源:哪个元素触发的?

2.事件类型:是点击,选中,还是修改?

3.事件处理程序:进一步如何处理.往往是一个回调函数. 

例如:某个元素的点击事件:

$("p").click(function(){
    //动作发生后的代码
})

常见的事件有:

事件 代码
文档就绪事件(完成加载) $(document).ready(function)
点击事件 $(selector).click(function)
双击事件 $(selector).dbclick(function)
元素的值发生改变 $(selector).change(function)
鼠标悬停事件 $(selector).mouseover(function)

操作元素

获取/设置元素内容

三个简单的获取元素内容的JQuery方法.

JQuery方法 说明
text() 设置或返回所选元素的文本内容
html() 设置或返回所选元素的内容(包括HTML标签)
val() 设置或返回表单字段的值

这三个方法即可以获取元素的内容,又可以设置元素的内容.

有参数时,就进行元素的值设置,没有参数时,就进行元素内容的获取.

代码示例:

获取元素内容:

<div id="test"><span>你好</span></div>
<input type="text" value="hello">

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function() {
            var html = $("#test").html();
            console.log("html内容为:"+html);

            var text = $("#test").text();
            console.log("文本内容为:"+text);

            var inputVal = $("input").val();
            console.log(inputVal);
        });
    </script>

设置元素内容:

    <div id="test"></div>
    <div id="test2"></div>
    <input type="text" value="">
    <script>
        $(document).ready(function() {
            $("#test").html('<h1>设置html</h1>');
            $("#test2").text('<h1>设置text</h1>');
            $("input").val("设置内容");
        });
    </script>

获取/设置元素属性

JQuery attr()方法用于获取属性值.

代码示例

获取元素属性

    <p><a href="https://www.baidu.com/" id="baidu">百度搜索</a></p>

    <script>
        $(function(){
            var href = $("p a").attr("href");
            console.log(href);
        });
    </script>

设置元素属性

    <p><a href="https://www.baidu.com/" id="baidu">百度搜索</a></p>

    <script>
        $(function(){
            $("p a").attr("href", "https://www.taobao.com/");
            console.log($("p a").attr("href"));
        });
    </script>

 获取/返回CSS属性

css()方法设置或返回被选元素的一个或多个样式属性.

代码示例

获取元素属性

    <div style="font-size: 36px;">我是一个文本</div>
    <script>
        $(function(){
            var fontSize = $("div").css("font-size");
            console.log(fontSize);
        });
    </script>

设置元素属性

    <div style="font-size: 36px;">我是一个文本</div>
    <script>
        $(function(){
            $("div").css("font-size", "24px");
        });
    </script>

添加元素

添加HTML内容

1.append():在被选元素的结尾插入内容

2.prepend():在被选元素的开头插入内容

3.after():在被选元素之后插入内容

4.before():在被选元素之前插入内容

代码示例:

    <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ol>
    <img src="C:\Users\86133\Desktop\文章\课件\html\78383f3dgy1hkcbcvjkxgj20rz0rztc2.jpg">
    <script>
        $(function(){
            $("ol").append("<li>append</li>");
            $("ol").prepend("<li>prepend</li>");

            $("img").before("在图片前插入");
            $("img").after("在图片后插入");
        });
    </script>

运行结果:

JavaScript极速入门(2),javascript,开发语言,ecmascript 

删除元素

删除元素和内容,一般使用以下两个jQuery方法:

1.remove():删除被选元素(及其子元素)

2.empty():删除被选元素的子元素.

代码示例:

    <div id="div1">我是一个div</div>
    <button>删除div元素</button>
    <script>
        $(function(){
            $('button').click(function() {
                $('#div1').remove();
            });
        });
    </script>

删除被选元素的子元素

 文章来源地址https://www.toymoban.com/news/detail-841293.html

    <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ol>
    <button>删除列表元素</button>
    <script>
        $(function(){
            $('button').click(function(){
                $('ol').empty();
            });
        });
    </script>

到了这里,关于JavaScript极速入门(2)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 深入理解 ECMAScript modules:提升你的 JavaScript 技能(六)

    🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_ CSDN 博客专家、23年度博客之星前端领域TOP1 🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你

    2024年02月21日
    浏览(51)
  • 深入理解 ECMAScript modules:提升你的 JavaScript 技能(一)

    🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_ CSDN 博客专家、23年度博客之星前端领域TOP1 🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你

    2024年02月20日
    浏览(42)
  • esbuild 极速的JavaScript构建打包工具

    相对于nodeJs的构建工具如webpack。go语言是纯机器码,没有js的解释过程;go新开了一个进程多线程并行,而js是单线程串行化的,所以从开发语言层面来说就更快。当nodejs还在解析打包程序的js的时候,go已经在解析要构建的js了。 相对于nodeJs的构建工具中相同功能的loader相比也

    2024年04月25日
    浏览(34)
  • 开发语言漫谈-JavaScript

           JavaScript、Java名字很相近,但它们没有任何亲缘关系,是由不同公司开发的编程语言。Java由Sun公司(后被Oracle收购)开发,JavaScript最初是由Netscape公司开发的(当年浏览器的霸主)。JavaScript最初的名字是 LiveScript,Netscape将其命名为 JavaScript,无非是蹭 Java流量。当

    2024年04月16日
    浏览(49)
  • 建站系列(五)--- 前端开发语言之HTML、CSS、JavaScript

    建站系列(一)— 网站基本常识 建站系列(二)— 域名、IP地址、URL、端口详解 建站系列(三)— 网络协议 建站系列(四)— Web服务器之Apache、Nginx 建站系列(五)— 前端开发语言之HTML、CSS、JavaScript 建站系列(六)— 后端开发语言 建站系列(七)— 常用前后端框架

    2024年02月09日
    浏览(51)
  • 【你也能从零基础学会网站开发】Web建站之javascript入门篇 浅谈JavaScript中的AJAX和XMLHttpRequest对象

    🚀 个人主页 极客小俊 ✍🏻 作者简介:程序猿、设计师、技术分享 🐋 希望大家多多支持, 我们一起学习和进步! 🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注 什么是AJAX AJAX 其实就是 异步 JavaScript 及 XML(Asynchronous JavaScript and XML) AJAX 不是一种新的编程语言,而是一种

    2024年04月14日
    浏览(50)
  • ECMAScript6历史-前端开发+ECMAScript+基础语法+入门教程

    我们首先来看 ECMA 是什么。 ECMA ,读音类似“埃科妈”,是 欧洲计算机制造商协会 (European Computer Manufacturers Association)的简称,是一家国际性会员制度的信息和电信标准组织。1994年之后,由于组织的标准牵涉到很多其他国家,为了体现其国际性,更名为 Ecma 国际 (Ecma In

    2024年01月16日
    浏览(47)
  • [JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript

    目录 一 特色  二  收获​编辑  三 什么是web? 四 网站的工作流程  五 web网站的开发模式​编辑  六 web开发课程学习安排  七、初始web前端  八 HTML、CSS 8.1 什么是HTNLCSS(w3cschool) 8.2 HTML快速入门 8.3 VS Code开发工具 8.3.1  插件  8.3.2 主题(改变颜色) 8.3.3 设置 8.4 基础标签样

    2024年02月12日
    浏览(42)
  • BCSP-玄子前端开发之JavaScript+jQuery入门CH10_jQuery基础

    4.10.1 jQuery 简介 jQuery是流行的JavaScript程序库,是对JavaScript对象和函数的封装 设计思想是write less, do more [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gx0f3UFO-1682307309412)(./assets/image-20230423230915569.png)] 4.10.2 jQuery 能做什么 访问和操作DOM元素 控制页

    2023年04月24日
    浏览(52)
  • (自己动手开发自己的语言练手级应用)JSON(JavaScript Object Notation) 产生式(BNF)

     写自己的开发语言时,很多人都会拿JSON当第一个练习对象 开源net json FJSON 解析工具 https://dbrwe.blog.csdn.net/article/details/107611540?spm=1001.2014.3001.5502 以上是JSON的简化产生式表示形式。其中, json 是最顶层的规则,可以是一个对象或一个数组。 object 表示一个对象,由一对大括号

    2024年02月10日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包