jQuery基础知识

最新推荐文章于 2024-06-10 22:18:41 发布

_chun_

最新推荐文章于 2024-06-10 22:18:41 发布

阅读量156

点赞数

文章标签： jquery javascript html5

本文链接：https://blog.csdn.net/li_chun_can/article/details/120196864

版权

jQuery介绍

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

jQuery安装

1.本地引入：新建一个.js文件，将jQuery库中jquery.js 与 jquery.min.js版本的代码复制到新建的.js文件中。然后在html文件中引入。

<script src="./js/jquery.js"></script>

2.在线引入：从jQuery库中复制jquery.js 与 jquery.min.js版本的

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

jQuery函数

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

<!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>jQuery</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        // 页面文档加载完毕执行代码
        $(function(){  //相当于window。onload
            // 选择器
            console.log($('.parent'));
            console.log($('.child'));
            // html代码片段
            console.log($(`<div class="new">four</div>`));
            // Element元素 
            console.log($('div'));
        })
    </script>
</head>
<body>
    <div class="parent">
        <div class="child">one</div>
        <div class="child">two</div>
        <div class="child">three</div>
    </div>
</body>
</html>

原生js和jquery入口函数的区别

原生js
	如果编写了多个入口就函数，后面的会覆盖掉前面的
      window.onload=function(){
            alert('我是入口函数1')
        };
      window.onload=function(){
            alert('我是入口函数2')
      }
jquery入口函数
	如果编写了多个入口文件，会依次执行
    $(document).ready(function(){
            alert('我是入口函数1jquery')
    })
    $(document).ready(function(){
            alert('我是入口函数2jquery')
    })
    $(document).ready(function(){
            alert('我是入口函数3jquery')
    })
jquery入口函数的写法
	第一种:
		$(document).ready(function(){
            alert('我是入口函数3jquery')
        })
	第二种
    	 jQuery(document).ready(function(){
            alert('我是入口函数4jquery')
        })
	第三种-->推荐写法
    	 $(function(){
            alert('我是入口函数5jquery')
        })
	第四种
    	 jQuery(function(){
            alert('我是入口函数6jquery')
        })

jQuery对象

jQuery对象是类数组对象，jQuery方法都是对类数组对象中元素的批量操作。
注意：jQuery对象可以调用jQuery.prototype中声明的方法，普通的Element元素则不能调用。

jQuery选择器

<!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>选择器</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        $(function(){
            $('button').on('click',function(){
            		 // 标签选择器
                // 隐藏所有div标签
                // $('div').hide();
                // 类选择器
                // 隐藏类选择器名为child1
                // $('.child1').hide();
                // id选择器
                // 隐藏id选择器名为child2
                $('#child2').hide();
            })
        })
    </script>
</head>
<body>
    <button>点我点我</button>
    <div class="child1">one</div>
    <div id="child2" class="child2">two</div>
    <div class="child3">three</div>
</body>
</html>

事件绑定

on(event,[selector],[data],fn) 事件绑定
off(event,[selector],fn) 解绑。解绑第二个参数必须是具名函数，匿名函数不可解绑
3.one(event,[selector],fn) 一次事件绑定
trigger(event,[data]) 模拟事件
click 快捷绑定

事件类型

事件类型	描述
click()	click()方法是当按钮点击事件被触发时会调用一个函数
dblclick()	当双击元素时，会发生dbclick事件
mouseenter()	当鼠标指针穿过元素时，会发生mouseenter事件
mouseleave()	当鼠标指针离开元素时，会发生mouseleave事件
mousedown()	当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件
mouseup()	当元素上松开鼠标按钮时，会发生mouseup事件
hover()	click()方法是当按钮点击事件被触发时会调用一个函数
blur()	当元素失去焦点时，发生blur事件
keydown()	键盘事件：按键按下事件
keyup()	键盘事件：按键抬起事件

事件代理

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

jQuery Dom操作

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

append 将内容插入到元素内同尾部
appendTo 讲添加的元素插入到目标元素中
empty() 无参数清空目标元素子节点
clone() 默认浅克隆，只克隆节点不克隆事件；传递参数为true的时候深克隆，和dom事件一样克隆节点的时候,也会克隆事件

属性操作

1.属性：attr、removeAttr
2.css：addClass、removeClass、toggleClass
3.内容：html、text、val

atte 获取属性。一个参数代表获取属性值,两个参数代表修改当前属性值为第二个参数
removeAttr 移除属性
removeClass 移除类名，并且移除样式
addClass 添加类名
toggleClass 切换类名，原dom有类名删除，没有类名添加
html、text、val 获取内容

静态方法

静态方法属于定义在jQuery函数上的方法，通过jQuery或者$直接调用的方法
数组及对象操作：each、map、toArray

<!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>静态方法</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        $(function(){
            var arr=[1,2,3,4,5];
            //each 遍历数组或者对象 第一个参数 要遍历的数组或对象 第二个参数 处理函数
            $.each(arr,function(index,item){
                console.log(index,item);
            })
            //map() 将一个数组中的元素转换到另一个数组中
            var result=$.map(arr,function(item,index){
                return item+4
            })
            console.log(result);
            //toArray 将类数组对象转换为数组
            console.log($('.child').toArray());
            // var obj={
            //     name:'zhangsan',
            //     age:12
            // }
            // $.each(obj,function(index,item){
            //     console.log(index,item);
            // })
        })
    </script>
</head>
<body>
    <div class="parent">
        <div class="child">one</div>
        <div class="child">two</div>
        <div class="child">three</div>
    </div>
</body>
</html>

_chun_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础知识

jQuery介绍JQuery是一个JavaScript库，是对ECMScript、dom、bom、的一个浅封装，让用户更方便操作。理解成一个大的函数，函数内部封装了很多函数来供你使用。jQuery安装1.本地引入：新建一个.js文件，将jQuery库中jquery.js 与 jquery.min.js版本的代码复制到新建的.js文件中。然后在html文件中引入。<script src="./js/jquery.js"></script>2.在线引入：从j
复制链接

扫一扫