JQuery

月梦@剑心

发布于 2023-08-31 11:07:01

1490

发布于 2023-08-31 11:07:01

文章被收录于专栏：月梦·剑心的技术专栏月梦·剑心的技术专栏

我的JQuery入门笔记，持续更新……

JQuery是一个封装了很多方法的js库

入口函数

写入口函数防止页面上的标签还没有被渲染出来，js代码就执行了 不同于js，JQuery可以有多个入口函数

// 两种写法
$(document).ready(function () {
	
});
$(function () {

});

代码中的$其实和JQuery是等价的，是一个函数。因此给他传入的参数不同，效果也是不一样的：

如果参数传递的是一个匿名函数，那么就是入口函数
如果传递的是一个字符串，那么可能是选择器/创建一个标签
如果参数是一个dom对象，那他就会把dom对象转换成JQuery对象

dom对象和JQuery对象

dom对象：原生js选择器获取到的对象

只能调用dom方法或者属性，不能调用JQuery的属性或者方法

JQuery对象：利用JQuery选择器获取到的对象

只能调用JQuery的方法或者属性，不能调用原生jsdom对象的属性或者方法

JQuery对象是一个伪数组，JQuery对象其实就是dom对象的一个包装集

dom对象转换成JQuery对象

// 其中div1是一个dom对象
$(div1);

JQuery对象转换成dom对象

// 直接使用下标取出来
$divs[0];
// 使用JQuery的get()方法
$divs.get(0);

获取和设置

获取和设置文本

使用text()方法，用法如下：

// 获取文本
$('#div1').text()
// 设置文本
$('#div1').text('新文本')

获取和设置样式

使用css()方法，方法如下：

// 获取样式
$('#div1').css('margin')
// 设置单样式
$('body').css('backgroundColor','black');
// 设置多样式
$('body').css({
    'backgroundColor':'black',
    'margin':'10px',
});

基本选择器

// ID选择器
$('#id')
// class选择器
$('.class')
// 标签选择器
$('div')
// 并集选择器,逗号隔开，满足其一即可
$('div,p,li')
// 交集选择器，没有分隔
$('div.class')

层级选择器

// 子代选择器
$('ul>li')
// 后代选择器
$('ul li')

过滤选择器

可以从获取到的元素中过滤出索引号对应的元素

// 获取索引号为2的元素
$('li:eq(2)')
// 获取索引号为奇数的元素
$('li:odd')
// 获取索引号为偶数的元素
$('li:even')

筛选选择器

是一系列方法

事件

mouseover

mouseover事件在鼠标移动到选取的元素及其子元素上时触发

mouseseenter

mouseseenter事件只在鼠标移动到选取的元素上时触发

类操作

// 添加类
addClass(类名)
// 添加多个类
addClass(类名 类名)
// 移除类
removeClass(类名)
// 移除多个类
removeClass(类名 类名)
// 移除全部类
removeClass()
// 判断类,判断元素是否有这个类，返回true或者false
hasClass(类名)
// 切换类,元素有这个类则删除，没有则添加
toggleClass(类名)

节点操作

使用html()和$()

// 无参数，获取到元素的所有内容
html()
// 有参数，可以覆盖原有的内容
html("")
// html()可以解析标签

// 使用$()函数创建元素，但是创建的元素只在内存中，如果要在页面上显示，就要追加
<button id="zhuijia">$()</button>
<div class="main">
    你好，我是旧内容。
</div>

$('#zhuijia').click(function(){
    var $link = $('<a href="https://www.baidu.com">百度一下</a>');
    $('.main').append($link);
});

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-08-10，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery