JQuery基础知识

最新推荐文章于 2024-03-29 10:28:18 发布
最新推荐文章于 2024-03-29 10:28:18 发布
阅读量246 收藏 1
点赞数 2
分类专栏： JQuery 文章标签： jquery 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ccc_bk/article/details/125681171
版权

1.JQuery介绍

JQuery是一个JavaScript库，是对ECMScript、dom、bom、的一个浅封装，让用户更方便操作。
可以理解成一个大的函数，函数内部封装了很多函数来供你使用。

jQuery库包含以下功能

* HTML选取
* HTML元素操作
* CSS操作
* HTML事件函数
* JavaScript特效和函数
* HTML DOM遍历和修改
* AJAX

提示： 除此之外，JQuery还提供了大量的插件，目前jQuery兼容于所有主流浏览器

1.1 JQuery函数
通过"jQuery"和'$'来调用函数
1.$(选择器)
通过选择器选择到符合条件的Element元素，将其保存到jQuery对象中
2.$(html片段)
将html片段转换成Element元素，然后再封装成一个jQuery对象
3.$(Element元素)
将Element元素转换成一个jQuery对象
4.$(匿名函数)
匿名函数在文档加载完毕后执行，类似于window.onload=function(){}

// jquery核心函数
console.log($,typeof $) //function jQuery(selector, context)  function
// jquery核心对象
console.log($(),$() instanceof Object)//Object{}  true
1.选择器
	选择到符合条件的Element元素，将其保存到jQuery对象中
	console.log($('.box'));
	var children=$('.child');
    console.log(children);
 	<div class="box">
        <div class="child">one</div>
        <div class="child">two</div>
        <div class="child">three</div>
    </div>
2.html片段
	将html代码片段转换成Element元素，封装成一个jQuery对象
	var newChild=$('<div class="new">four</div>');
    console.log(newChild)
3.Element元素
	console.log($('div'))--转换成一个Jquery对象
4.$(匿名函数)

1.比较原生js和jQuery
	通过原生js和jQuery来获取到三个div并修改他们的背景色
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery.js"></script>
    <script>
        // 原生js来获取div并修改背景色
        window.onload=function(){
        	//1.获取element元素
            var div1=document.getElementsByTagName('div')[0];
            var div2=document.getElementsByClassName('box1')[0];
            var div3=document.getElementById('box2');
            console.log(div1,div2,div3)
        	//2.修改element元素背景色
            div1.style.backgroundColor='red'
            div2.style.backgroundColor='yellow';
            div3.style.backgroundColor='cyan';
            div1.style.width='400px';
            div1.style.height='400px';
        }
		//利用jquery获取div并修改背景色
		$(function(){
            // 获取到element元素
            var div1=$('div:first');
            var div2=$('.box1');
            var div3=$('#box2');
            console.log(div1,div2,div3)
            // 修改背景色
            div1.css({
                backgroundColor:'red'
            });
            div2.css({
                width:'400px',
                height:'200px',
                backgroundColor:'yellow'
            })
           	//如果是想要创建并插入节点
            var div4 = $('<div id="box3">four</div>').appendTo('.parent')
        })
    </script>
</head>
<body>
    <div></div>
    <div class="box1"></div>
    <div id="box2"></div>
</body>
</html>
1.2 比较原生js和jquery入口函数的区别
原生js
	1.如果编写了多个入口就函数，后面的会覆盖掉前面的
      window.onload=function(){
            alert('我是入口函数1')
        };
      window.onload=function(){
            alert('我是入口函数2')
      }
jquery
	2.如果编写了多个入口文件，会依次执行
    $(document).ready(function(){
            alert('我是入口函数1jquery')
    })
    $(document).ready(function(){
            alert('我是入口函数2jquery')
    })
    $(document).ready(function(){
            alert('我是入口函数3jquery')
    })
3.jquery入口函数的写法
	第一种:
		$(document).ready(function(){
            alert('我是入口函数3jquery')
        })
	第二种
    	 jQuery(document).ready(function(){
            alert('我是入口函数4jquery')
        })
	第三种-->推荐写法
    	 $(function(){
            alert('我是入口函数5jquery')
        })
	第四种
    	 jQuery(function(){
            alert('我是入口函数6jquery')
        })

2.JQuery选择器

jQuery选择器与CSS选择器几乎完全一致，这里就不再赘述。

1.基本选择器

2.层次选择器

3.伪类选择器

4.伪元素选择器

5.属性选择器

$("form")
$("ul.nav > li")

jQuery中所有选择器都以美元符号开头：$()

2.1 元素选择器

在页面中选取所有<div>元素

$("div")

实例

用户点击按钮后所有<div>隐藏

$(function(){
            var div= $('div');
            console.log(div)
            var button=$('button');
            button.click(function(){
                div.hide()
            })
})
	<button>隐藏按钮</button>
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>

3.事件绑定

jQuery的事件绑定与Element元素不同，不可以使用onxxx属性，也不能使用addEventListener，而是使用on()，可以理解为on是对于Element元素事件绑定的封装。

  1. on(event,[selector],[data],fn)

  2. off(event,[selector],fn)

  3. one(event,[selector],fn)

  4. trigger(event,[data]) 模拟事件

  5. 快捷绑定 click

1.on 
$('.child').on('click',function(event){
                // this--dom节点
                console.log(this)
})
		<div class="parent">
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
        </div>

2.one
$('.child').one('click',function(event){
                // this--dom节点
                console.log(this)
 })

3.trigger 先有一个点击事件 trigger模拟点击事件
 $('.child').on('click',function(event){
                // this--dom节点
                console.log(this)
 })
 // trigger 模拟事件触发
 // 触发第一个child的点击事件
 $('.child:first-child').trigger('click')

4.off 解绑 解绑第二个参数必须是具名函数，匿名函数不可解绑
function handler(){
                console.log(this)
            }
$('.child').on('click',handler);
$('.child').off('click',handler);

5.快捷绑定
$('.child').click(function(){
                console.log(this)
})
3.1 事件类型

1.click()

click()方法是当按钮点击事件被触发时会调用一个函数

2.dblclick()

当双击元素时，会发生dbclick事件

$('.child').dblclick(function(){
                console.log(this)
})

3.mouseenter()

当鼠标指针穿过元素时，会发生mouseenter事件

$('.child').mouseenter(function(){
                console.log(this)
})

4.mouseleave()

当鼠标指针离开元素时，会发生mouseleave事件

$('.child').mouseleave(function(){
                console.log(this)
})

5.mousedown()

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件

$('.child').mousedown(function(){
                console.log(this)
})

6.mouseup()

当元素上松开鼠标按钮时，会发生mouseup事件

$('.child').mouseup(function(){
                console.log(this)
})

7.hover()

hover()方法用于模拟光标悬停事件

当鼠标移动到元素上时，会触发指定当第一个函数（mouseenter）；当鼠标移出这个元素时，会触发指定当第二个函数（mouseleave）

$('.child').hover(function(){
                console.log(this)
})

8.blur()

当元素失去焦点时，发生blur事件

$('input').blur(function(){
                console.log(this)
})

9.keydown()

键盘事件：按键按下事件

$('.child').keydown(function(){
                console.log(this)
 })

10.keyup()

键盘事件：按键抬起事件

 $('.child').keyup(function(){
                console.log(this)
 })

3.3事件代理

$('body').on('click','button',function (event) {
                console.log(event)
})

4.JQuery Dom操作

jQuery中提供了一系列的操作DOM节点的api,用于解决DOM原生API无法进行批量操作并且功能性较差的弊端。

插入方法：append、appendTo、prepend、prependTo、after、before、insertBefore、insertAfter
包裹方法：wrap、unwrap、wrapAll、wrapInner、
替换方法：replaceWith、replaceAll
移除方法：empty、remove、detach
克隆方法：clone

1.append 将内容插入到元素内同尾部
	$(function(){
        $('.parent').append('<b>Hello</b>')
   })
	<div class="parent">parent</div>
2.appendTo 讲添加的元素插入到目标元素中
	 $(function(){
        $('<div class="new">new</div>').appendTo('.parent')
      })
3.empty();无参数 清空目标元素子节点
	 $('.parent').empty()
4.clone();默认浅克隆，只克隆节点不克隆事件；传递参数为true的时候深克隆，和dom事件一样克隆节点的时候,也会克隆事件
	  function myfun(){
               console.log('dom克隆')
           }
      $('.child:last-child').on('click',myfun)
      $('.child:last-child').clone(true).appendTo('.parent');
		<div class="parent">
            <div class="child">one</div>
            <div class="child">two</div>
            <div class="child">three</div>
    	</div>
属性操作

1.属性：attr、removeAttr

2.css：addClass、removeClass、toggleClass

3.内容：html、text、val

1.atte 获取属性 一个参数代表获取属性值 两个参数代表修改当前属性值为第二个参数
	console.log($('.parent').attr('class'))
 	<div class="parent" title="lalalal"></div>
 	$('.parent').attr('title','one')
      console.log($('.parent').attr('title'))
2.removeAttr
	$('.parent').removeAttr('title')
    console.log($('.parent').attr('title'))
3.removeClass 移除类名 并且移除样式
	 $('.child').removeClass('child');
4.addClass 添加类名 
	 $('.child').addClass('active')
	 <div class="parent" title="lalalal">
        <div class="child">one</div>
        <div class="child">two</div>
        <div class="child">three</div>
    </div>
5.toggleClass 切换类名 原dom有类名删除，没有类名添加
	$('.child').toggleClass('active')
	<div class="parent" title="lalalal">
        <div class="child active">one</div>
        <div class="child active">two</div>
        <div class="child active">three</div>
    </div>
	使用this通过点击事件也可以切换
 	$('.child').on('click',function(){
            $(this).toggleClass('active')
    })
6.  获取内容
	console.log($('.parent').html());
    console.log($('.parent').text());
    console.log($('input[type=text]').val());
一日不学甚慌
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery基础知识小结
10-25
本文主要通过jQuery基础知识、选择要操作的元素及处理DOM元素3个方面给我们做了下小结，非常的详尽，推荐给有需要的小伙伴。
jQuery基础
ac果的博客
08-22 2655
jQuery 是免费、开源的，jQuery 的语法设计可以使开发更加便捷，例如操作文档对象、选择 DOM 元素、 制作动画效果、事件处理、使用 Ajax 以及其他功能。$(“.class 属性值”);jQuery 对象是 dom 对象的数组 + jQuery 提供的一系列功能函数。7.通过 JQuery 提供的 API 查询到的对象，是 JQuery 对象。5.通过 JQuery 提供的 API 创建的对象，是 JQuery 对象。6.通过 JQuery 包装的 Dom 对象，也是 JQuery 对象。
jQuery看这一篇就够啦，jQuery基础大全，可用于快速回顾知识，面试首选
a2868221132的博客
03-27 4610
jQuery看这一篇就够啦，jQuery基础大全，可用于快速回顾知识，面试首选
jQuery 基础知识总结（超级详细）
最新发布
2401_83704252的博客
03-29 577
比较推崇的的第一种写法，也就是 jQuery 的写法。二者有何不同呢，当我们的代码运行在更早期的环境当中（pre-ES5，eg. Internet Explorer 8），undefined 仅是一个变量且它的值是可以被覆盖的。意味着你可以做这样的操作：当使用第一种方式，可以确保你需要的 undefined 确实就是 undefined。
JQuery入门基础
m0_74934282的博客
03-30 8606
jQuery 是一个快速、简洁的 **`JavaScript 库`**，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。JavaScript库**`仓库`**： 可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。**`JavaScript库`**：即 library，是一个封装好的特定的集合（方法和函数）。
jQuery入门、选择器、事件、静态方法、动画
qq_51066068的博客
04-20 2078
目录 第一章-jQuery基础知识 1.jQuery入门 1.1.jQuery介绍 1.2.jQuery安装 1.3.jQuery函数 1.4.jQuery对象 2.jQuery选择器 3.jQuery事件 3.1.事件的基本使用 3.2.事件代理 3.3.事件类型 4.jQueryDOM操作 5.jQuery静态方法 5.1.数组及对象操作 5.2.测试操作 5.3.字符串操作 6.jQuery动画 第一章-jQuery基础知识 第一天的授课重点在于梳理与对比..
一个小时学会jQuery<最通俗易懂的讲解>
chetianyao8457的博客
08-07 1512
最近一直在研读 jQuery 源码，初看源码一头雾水毫无头绪，真正静下心来细看写的真是精妙，让你感叹代码之美。 其结构明晰，高内聚、低耦合，兼具优秀的性能与便利的扩展性，在浏览器的兼容性（功能缺陷、渐进增强）优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹。 另外，阅读...
jquery基础知识总结
06-02
详细的jquery基础知识总结 jQuery
jquery基础知识第一讲之认识jquery
10-22
jquery基础知识第一讲之初次见面，对jquery有一个初步认识，为之后的学习打下基础，感兴趣的小伙伴们可以参考一下
jquery基础知识
05-09
实用性的文档，关于web应用与开发，今后流行趋势
jQuery基础知识
woyejiu的博客
08-26 3126
jQuery基础知识
jquery基础
qq_46670673的博客
04-14 209
jquery 基础 学习目标 1.jquery概念 2.jquery的常见选择器 3.熟练掌握jquery操作节点的属性、内容、样式 4.熟练掌握jquery的文档处理、筛选 5.熟练掌握jquery的常见事件和效果 6.熟练掌握jquery的ajax 一、jquery概念 1.1 Jquery介绍 jquery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write
jQuery基础知识点
xiri_的博客
09-07 845
jQuery基本操作 1、jQuery选择器 基本选择器： 层级选择器： 基本筛选器： 内容选择器： 主要有 :contain(text) , :empty() , :has(selector) , :parent 这四种用法。 属性选择器： 子元素选择器: 表单选择器和表单对象属性选择器: 表单选择器可直接通过标签或者标签中的元素来获取表单中某一语句。例子： 表单对象属性选择器的使用主要有四种： :enabled , :disabled , :checked , :selected :enabl
jQuery基础知识点汇总
heliuerya的博客
05-31 1381
class 选择器： 语法：$(".class值") 根据 class样式值 查找标签对象 class表示css中的样式，这是使用样式的名称定位dom对象。组合选择器： 语法：$("#id,.class,标签名") 是多个被选对象之间使用逗号分隔后形成的选择器，可以组合id，class，标签名等，举例：$("body" > "div");$("选择器").attr("username","张三") //设置数组中的所有dom对象的username属性值为"张三"。
jQuery的基本知识
努力学习Java的彬彬的博客
05-11 441
jQuery的基本知识
Java基础29-JavaWeb(09)【JQuery】
小管博客空间站
12-05 255
JQuery 1 什么是JQuery jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。 j 就是 JavaScript； Query 查询； 意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。 jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。 学习jQuery本质： 就是学习调用这些函数（方法）。
jquery开发基础
09-14
jQuery 是一个 JavaScript 库，它简化了对 HTML 文档的遍历、事件处理、动画效果和 Ajax 操作等操作。以下是一些 jQuery 开发的基础知识： 1. 引入 jQuery 库：在 HTML 文件的 `<head>` 标签中使用 `<script>` 标签引入 jQuery 库。可以从官方网站下载最新版的 jQuery，也可以使用公共 CDN（内容分发网络）提供的 jQuery 资源。 ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> ``` 2. 文档加载完成后执行代码：可以使用 `$(document).ready()` 或简写的 `$(function(){})` 来确保文档加载完成后再执行 jQuery 代码。 ```javascript $(document).ready(function(){ // 代码在文档加载完成后执行 }); ``` 3. 选择元素：使用 CSS 选择器来选择 HTML 元素，并使用 `$()` 或 `jQuery()` 函数将其封装为 jQuery 对象。可以选择单个元素或多个元素。 ```javascript // 选择 ID 为 "myElement" 的元素 var element = $("#myElement"); // 选择所有 class 为 "myClass" 的元素 var elements = $(".myClass"); ``` 4. 处理事件：使用 `.on()` 方法来绑定事件处理函数。常见的事件包括点击事件（`click`）、鼠标移入事件（`mouseenter`）、键盘按下事件（`keydown`）等。 ```javascript // 绑定点击事件 $("#myButton").on("click", function(){ // 处理点击事件的代码 }); ``` 5. 修改元素属性和内容：使用 jQuery 的方法来修改元素的属性和内容。常见的方法包括 `.html()`（修改元素的 HTML 内容）、`.text()`（修改元素的纯文本内容）和 `.attr()`（修改元素的属性）等。 ```javascript // 修改元素的 HTML 内容 $("#myElement").html("New Content"); // 修改元素的纯文本内容 $("#myElement").text("New Text"); // 修改元素的属性 $("#myElement").attr("src", "new-image.jpg"); ``` 6. 添加和移除样式类：使用 `.addClass()` 和 `.removeClass()` 方法来添加和移除元素的样式类。 ```javascript // 添加样式类 $("#myElement").addClass("highlight"); // 移除样式类 $("#myElement").removeClass("highlight"); ``` 这些是 jQuery 开发的一些基础知识，希望对你有帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值