jQuery基础

最新推荐文章于 2024-08-08 17:09:09 发布

qq_53446980

最新推荐文章于 2024-08-08 17:09:09 发布

阅读量88

点赞数

本文链接：https://blog.csdn.net/qq_53446980/article/details/120210518

版权

JavaScript 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

jQuery

2 篇文章 0 订阅

订阅专栏

本文介绍了jQuery的基础知识，包括其作为DOM和BOM封装库的功能，安装方法，函数用法，jQuery对象操作，选择器、事件和DOM操作实例。重点讲解了如何利用jQuery进行元素查询、事件绑定以及常见的DOM操作技巧。

摘要由CSDN通过智能技术生成

1. jQuery入门

1.1jQuery介绍

jQuery是一个工具库，是对于ECMAScript、DOM、BOM的一个浅封装

功能：

使用css选择器进行元素查询
事件机制
DOM操作
属性操作
工具方法
Ajax

1.2.jQuery安装

网页中jquery的引入有两种方式：本地下载引入、CDN载入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.本地下载引入 -->
    <script src="./js/jquery-3.6.0.js"></script>
    <!-- 2.CDN载入 进入bootcdn网页复制最新版jquery链接-->
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> -->
</head>
<body>
    <script>
        // jQuery $
        console.log(jQuery);
        console.log($);
        console.log(jQuery===$);
    </script>
</body>
</html>

1.3.jQuery函数

$(匿名函数) 匿名函数在文档加载完毕之后执行

$(选择器) 选中符合条件的element元素，转换为jQuery对象

$(element) 将element元素转换为jQuery对象

$(dom) 将dom节点转换为jQuery this $(this)

jQuery和原生js的区别：

原生js和jQuery入口函数加载模式不同，原生js会等到DOM元素加载完毕，图片加载完毕才会执行；jQuery会等到DOM元素加载完毕但不会等图片加载完毕就执行

原生js的入口函数是：window.onload(function(){})

jQuery的入口函数是: $(decument).ready(function(){})

在编写了多个入口函数的情况下，原生js后面编写的会覆盖前面的；jQuery后面编写的不会覆盖前面的，会全部按顺序执行

1.4 jQuery对象

jQuery对象是类数组对象，即它的方法都是对类数组中元素的批量操作

<script>
    $(function(){
        // 1.说明$()返回的是一个Object对象
         console.log($);
         console.log($());
         console.log($()  instanceof Object);//true
        
		$('div').click(function(){
		//this指向的是element对象
		console.log(this)
		})
        
          })
</script>

$.each(类数组,function(){}) 或 $(element).each()

遍历jQuery对象（遍历类数组对象）

实例：

<script>
    $(function(){
        var arr = [1,2,3,4,5]
      //隐式遍历数组   $.each()  
        $.each(arr,function(index,item){
            console.log(index,item)
        })
        //遍历所有的div标签且修改css样式
        $('div').each(function(){            
            $(this).css('color','red')
        })		
          })
    	
</script>
<body>
    <div>  head   </div>
    <div class="content">  content   </div>
    <div id="foot">  foot   </div>
</body>

$.trim() 去点字符串起始和结尾的空格字符

var str='  hello jQuery  ';
console.log($.trim(srt));//"hello jQuery"

2.jQuery选择器

基本选择器

$(‘div’) 标签选择器

$(’#div’) id选择器

$(’.div’) 类选择器

$(‘div[]’) 通过数组下标选择页面中div标签选择器

属性选择器

$(’[href]’) 选取所有带href属性的元素

$(’[href=’#‘]’) 选取所有带href值等于’#‘的元素

css选择器

$('p').css("background-color","red")    //修改单个属性
//修改多个属性
$('p').css({

	"background-color":"red",

	"color":"blue"
})

3.jQuery事件

3.1事件的基本使用

 <script>
        $(function(){
            // 1.给按钮绑定事件   通过点击按钮获取按钮的文本
            // $('button').on('click',function(){
     		//触发后执行的代码
            //     console.log($(this).text());
            // })
     
			//2.给函数设置事件属性
            function myfun(){
                console.log($(this).text());
            }
            // 绑定事件
            //$('button').on('click',myfun) ;
            // 解绑事件
            //$('button').off('click',myfun)
     		// 一次绑定
            // $('button').one('click',myfun)
     	
     
            //3. 快捷绑定
            // $('button').click(function(){
     		//触发后执行的代码
			//	console.log('我被点击了')
            // })
     		//trigger 触发被选元素的指定事件类型
     		$('button').trigger('click')

        })
    </script>
</head>
<body>
    <button>按钮1</button>
    <button class="two">按钮2</button>
    <button id="three">按钮3</button>
</body>

3.2事件类型

常用的jQuery事件快速绑定方法

$(document).ready() 允许在文档完全加载完成后执行函数
click() 当按钮点击事件被触发时会调用一个函数
dbclick() 当双击元素时，会发生dbclick事件
mouseenter() 当鼠标指针穿过元素时，会发生mouseenter事件

与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。
mouseleave() 当鼠标指针离开元素时，会发生mouseleave事件
mousedown() 当指针移动到元素上方，并按下鼠标按键时，会发生的事件
mouseup() 当元素上松开鼠标按钮时，会发生的事件
hover() 用于模拟光标悬停事件。鼠标移动到元素上触发mouseenter函数，移出元素触发mouseleave函数
blur() 当元素失去焦点时，发生的事件
keydown() 键盘按下事件
keyup() 键盘抬起事件
等等

4.jQueryDOM操作

插入方法：

$(‘目标节点’).append(‘插入节点’) 添加在目标节点之前，形成父子结构
$(‘插入节点’).appendTo(‘目标节点’) 添加在目标节点之后，形成父子结构
$(‘目标节点’).before(‘插入节点’) 添加在目标节点的前面，形成兄弟结构
$(‘目标节点’).after(‘插入节点’) 添加在目标节点的后面，形成兄弟结构

移除方法：

$(‘div’).empty() 删除匹配的元素集合中所有的子节点。
$(‘div’).remove() 删除匹配的元素，匹配的元素还在jQuery的对象中，可以再次调用其元素本身，绑定事件附加数据会被删除

克隆/复制节点：

$(‘被选元素’).clone(true/false).appendTo() 一般结合appendTo使用复制插入

当clone为false时为浅复制，只复制被选元素内容不复制事件

当clone为true时为深复制，复制被选元素内容和事件

5.属性操作

$(‘被选元素’).attr(‘属性’) 获取被选元素的某个属性
$(‘被选元素’).attr(‘属性’，‘要修改的属性值’)
$(‘被选元素’).removeAttr(‘被选元素中的一个属性’)

从每一个匹配的元素中删除一个属性

$(function(){
    console.log($('input').attr('title'));//hello
    //console.log($('input').attr('title'));//hi
    $('input').removeAttr('tilte');
    console.log($('input').removeAttr('tilte'))
    //如果删除前属性有修改删除失败，会返回修改过后的属性值；如果属性没有修改过则会返回undefined，删除成功
  })

CSS样式

$(‘被选元素’).addclass (‘类名’) 添加类样式
$(‘被选元素’).removeClass(‘类名’) 删除类样式
$(‘被选元素’).toggleClass(‘类名’) 如果有该class就删除，没有就添加

内容

html() 设置或返回所选元素的内容
text() 设置或返回所选元素的文本内容
val() 设置或返回表单字段的值

6.jQuery静态方法

数组及对象操作

$.each() 用于遍历对象和数组

不同于遍历 jQuery 对象的 $().each() 方法，此方法可用于遍历任何对象

第一个参数要遍历数组或对象第二个参数处理函数

// 遍历对象
var obj = {
    name: 'zach',
    age: 18,
    height: '1.88'
}
// 第一个参数 要遍历的数组或对象 第二个参数 处理函数
$.each(obj, function (key, value) {
    console.log(key, value);
})
//遍历数组
$.each( [0,1,2], function(i, n){
    alert( "Item #" + i + ": " + n );
});

map() 将一个数组中的元素转换到另一个数组中
toArray() 把jQuery集合所有DOM元素恢复成一个数组
merge() 合并两个数组

返回的结果会修改第一个数组的内容

第一个数组的元素后面跟着第二个数组的元素。要去除重复项，请使用$.unique()
```
console.log(($.merge([1,2,3],[3,4,5])));//[1,2,3,3,4,5]
console.log($.unique($.merge([1,2,3],[3,4,5])));//[1,2,3,4,5]
```

测试操作

type()

用于检测obj的数据类型

console.log($.type($)); //function
console.log(jQuery.type(true) === "boolean");//true
console.log(jQuery.type(3) === "number");//true
console.log(jQuery.type("test") === "string");//true
console.log(jQuery.type(function(){}) === "function");//true
console.log(jQuery.type([]) === "array");//true

isEmptyObject()
测试对象是否是空对象（不包含任何属性）,这个方法既检测对象本身的属性，也检测从原型继承的属性

console.log(jQuery.isEmptyObject({})); // true
console.log(jQuery.isEmptyObject({ foo: "bar" })); //false

isPlainObject()
测试对象是否是纯粹的对象（通过 “{}” 或者 “new Object” 创建的）

console.log(jQuery.isPlainObject({})); // true
console.log(jQuery.isPlainObject("test")); // false
console.log($.isPlainObject($('body')))//false

isNumberic()
确定它的参数是否是一个数字

$.isNumeric() 方法检查它的参数是否代表一个数值。如果是这样，它返回 true。否则，它返回false。该参数可以是任何类型的

console.log($.isNumeric("-10"));  // true
console.log($.isNumeric(16));     // true
console.log($.isNumeric(0xFF));   // true
console.log($.isNumeric("0xFF")); // true
console.log($.isNumeric("8e5"));  // true (exponential notation string)
console.log($.isNumeric(3.1415)); // true
console.log($.isNumeric(+10));    // true
console.log($.isNumeric(0144));   // true (octal integer literal)
console.log($.isNumeric(""));     // false
console.log($.isNumeric({}));     // false (empty object)
console.log($.isNumeric(NaN));    // false
console.log($.isNumeric(null));   // false
console.log($.isNumeric(true));   // false
console.log($.isNumeric(Infinity)); // false
console.log($.isNumeric(undefined)); // false
注意：其他更多关于测试的操作，例如$.isArray(obj)判断是否是数组、$.isFunction(obj)判断是否是函数等，请移步[https://jquery.cuishifeng.cn/](https://jquery.cuishifeng.cn/)

6.3 字符串操作

param()

将表单元素数组或者对象序列化。

例如：

var obj={name:"张三",age:12}
var str = jQuery.param(obj);
$("#results").text(str);

trim()
去掉字符串起始和结尾的空格,多用于用户数据的清洗

例如：

console.log('--'+$.trim(" hello, how are you? ")+'--');

补充：进入网页查看更详细的字符操作https://jquery.cuishifeng.cn/

qq_53446980

关注

0
点赞
踩
0

收藏

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

1. jQuery入门1.1jQuery介绍jQuery是一个工具库，是对于ECMAScript、DOM、BOM的一个浅封装功能：使用css选择器进行元素查询事件机制DOM操作属性操作工具方法Ajax1.2.jQuery安装网页中jquery的引入有两种方式：本地下载引入、CDN载入<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <m
复制链接

扫一扫

专栏目录