Web前端学习:jQuery基础--1【简介和安装、语法使用、三种选选择器的使用(元素、class、id)】(附操作源码)

简介: Web前端学习:jQuery基础--1【简介和安装、语法使用、三种选选择器的使用(元素、class、id)】(附操作源码)



一、jQuery介绍和安装


1、jQuery简介


jQuery是一个轻量级的"写的少,做的多"的JavaScript函数库,是JavaScript的一个框架

它就是把JavaScript的代码封装好了,导入调用即可使用




2、jQuery安装和引用


jQuery安装基本说明


  • 下载注意事项
  • 1.x版本:兼容IE8以下(用的最多的)


  • 2.x版本:不兼容IE8以下


  • 3.x版本:不兼容IE8以下



安装好了之后,可以看到文件里有两个文件


f4faea36d2b34ede940d2259379bd26a.png


可以看到, jquery-1.10.2.min.js 的文件大小只有91KB,这是里面的代码没有任何的格式,都堆积在一起,没有空格;而jquery-1.10.2.js  文件的大小虽然比较大些,但是它的代码逻辑都是比较清楚的,格式比较规范。


但是两个文件都可以使用,喜欢用体积大的或者体积小的就看个人习惯~



jQuery引用


  • 下载Jquery库到本地后,引用本地文件,以下为引用方法


d146e2aad5eb46bab14d024759dfd192.png


  • 复制jquery-1.10.2.min.js文件,并粘贴到和即将使用的html文件的同目录下

322b01b2663744aba3d56c0ebca00501.png




二、jQuery语法和使用


1、jQuery语法


基础语法:$(selector).action()


  • $符号代表定义jQuery


  • 选择符(selector)"查询"和“查找”HTML元素


  • jQuery的action()执行对元素的操作




2、jQuery使用


文件就绪事件


  • 第一种写法


使用时所有jQuery函数位于document ready函数中


1. $(document).ready(function(){
2. // 开始写 jQuery 代码...
3. });



  • 第二种写法(简洁写法)


1. $(function(){
2. // 开始写 jQuery 代码...
3. });


  • jQuery和JavaScript的对比
1. //JavaScript
2. window.onload = function () {
3. //网页资源(dom结构,图片)都加载完之后才会执行这个里面的代码
4. //在一个页面中只能写一次,后面的会把前面的内容覆盖掉
5. }
//jQuery
$(function () {
    //只用加载dom结构就会执行这个里面的代码
    //里面可以有多个
})



52d93c9f2e704a598ea9794613ff4a98.png


jQuery语法使用


  • 语法示例


  • $(this).hide()--隐藏当前元素


  • $("p").hide()--隐藏所有元素


  • $(".test").hide()--隐藏所有class="test"的元素


  • $("#test").hide()--隐藏,id="test"的元素



代码演示 :


通过引入js文件,然后通$("div").hide()隐藏div元素


  • 首先通过一个script标签引入js文件,这个script标签只是用来引入文件,如果要写代码的话要另起炉灶,重新建立一个script标签,在里面写代码

007d9a80e3ed4a7f84d859c258b38cbe.png


先运行,查看结果,可看到页面中出现div元素的内容

2526c0c023b744f097e9b3362f6e661d.png


  • 然后在第二个script标签中写入隐藏div标签的语句

76de5490d92f4447a74c762f05669e89.png


  • 刷新页面,查看结果,发现div元素已经被隐藏

0c3a17b1d8e344fa919f09c0b8d03e78.png


附上原操作代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.10.2.min.js"></script>
    <script>
        $(function () {
            $("div").hide();
        })
    </script>
</head>
<body>
    <div>
        这是div
    </div>
</body>
</html>




三、jQuery选择器


jQuery中分有三种选择器,分别为:


  • 元素选择器


  • id选择器


  • class选择器


1、元素选择器


通过元素选择器实现鼠标点击后,隐藏内容的功能


首先,通过 <input type="button" value="点我隐藏"> 设置一个按钮,然后再写入一个p标签


接着在第二个script标签中写入一个文件就绪事件:$(function () {}),并在这一事件中通过元素选择器找到input元素


然后给input元素设置一个点击事件:$('input').click(function () {})


最后在这个点击事件中再次通过元素选择器找到p元素,给p元素设置一个隐藏功能:$('p').hide();


eda552aed4fd4fb6a47714dfc72d8e29.png



这就像是一个函数嵌套,当代码运行时,会等到其他元素加载完之后才会执行 $(function () {}) 内的代码,然后等鼠标点击按钮时(也就是执行了点击事件:


$('input').click(function () {})),会运行到 $('p').hide(); 然后隐藏p标签的内容



e1bcf7fb2f354e3bb59f8c8f7b746915.pnge9689e51a343435286f90f173ff07984.png


  • 附上原操作代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.10.2.min.js"></script>
    <script>
        //加载
        $(function () {
            //通过元素选择器
            //找到input标签,click为点击事件
            $('input').click(function () {
                $('p').hide();
            })
        })
    </script>
</head>
<body>
    <input type="button" value="点我隐藏">
    <p>
        这是内容
    </p>
</body>
</html>


2、id选择器


id选择器的使用方法同元素选择器相同,只不过将$('p').hide();中的p换成一个id,比如:$('#div1').hide(); (#号表示获取的是id,#后的内容就是id的值)


  • 附上原操作代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.10.2.min.js"></script>
    <script>
        //加载
        $(function () {
            //通过id选择器
            //找到input标签,click为点击事件
            $('input').click(function () {
                $('#div1').hide();
            })
        })
    </script>
</head>
<body>
    <input type="button" value="点我隐藏">
    <p id="div1">
        这是内容
    </p>
</body>
</html>


3、class选择器


id选择器的使用方法同元素选择器相同,只不过将$('p').hide();中的p换成一个class,比如:$('.class').hide(); . 表示获取的是class,. 后的内容就是class的值)


  • 附上原操作代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.10.2.min.js"></script>
    <script>
        //加载
        $(function () {
            //通过id选择器
            //找到input标签,click为点击事件
            $('input').click(function () {
                $('.cla1').hide();
            })
        })
    </script>
</head>
<body>
    <input type="button" value="点我隐藏">
    <p class="cla1">
        这是内容
    </p>
</body>
</html>




相关文章
|
9天前
|
前端开发 JavaScript 关系型数据库
从前端到后端:构建现代化Web应用的技术探索
在当今互联网时代,Web应用的开发已成为了各行各业不可或缺的一部分。从前端到后端,这篇文章将带你深入探索如何构建现代化的Web应用。我们将介绍多种技术,包括前端开发、后端开发以及各种编程语言(如Java、Python、C、PHP、Go)和数据库,帮助你了解如何利用这些技术构建出高效、安全和可扩展的Web应用。
|
10天前
|
编解码 前端开发 JavaScript
Web 前端开发中的最佳实践
本文将介绍 Web 前端开发中的最佳实践,包括代码组织、性能优化、响应式设计和用户体验等方面。通过遵循这些实践,开发人员可以提高开发效率,优化用户体验,并减少潜在的问题和错误。
|
1月前
|
前端开发
Web前端---表格和表单
Web前端---表格和表单
27 1
|
1月前
|
前端开发
Web前端---图层嵌套与层叠&&三行三列效果
Web前端---图层嵌套与层叠&&三行三列效果
29 0
|
1月前
|
前端开发 容器
web前端-------弹性盒子(2)
web前端-------弹性盒子(2)
17 0
|
1月前
|
前端开发 容器
web前端------弹性盒子
web前端------弹性盒子
19 0
|
3天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
13 1
|
3天前
|
前端开发 JavaScript vr&ar
前端新技术探索:WebAssembly、Web Components与WebVR/AR
【4月更文挑战第12天】WebAssembly、Web Components和WebVR/AR正重塑Web应用的未来。WebAssembly允许C/C++等语言在Web上高效运行,提供接近原生的性能,如游戏引擎。Web Components通过Custom Elements和Shadow DOM实现可复用的自定义UI组件,提升模块化开发。WebVR/AR(现WebXR)则让VR/AR体验无需额外应用,直接在浏览器中实现。掌握这些技术对前端开发者至关重要。
11 3
|
26天前
|
移动开发 前端开发 HTML5
Web前端全栈HTML5通向大神之路
本套课程共三大阶段,六大部分,是WEB前端、混合开发与全栈开发必须要掌握的技能,从基础到实践,是从编程小白成长为全栈大神的最佳教程!
33 3
Web前端全栈HTML5通向大神之路
|
29天前
|
JavaScript
jquery给轮播图的第一张设置class样式
jquery给轮播图的第一张设置class样式
9 0