JQuery

2023-08-31 11:07:01 浏览数 (1)

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

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

入口函数

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

代码语言:javascript复制
// 两种写法
$(document).ready(function () {
	
});
$(function () {

});

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

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

dom对象和JQuery对象

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

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

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

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

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

dom对象转换成JQuery对象

代码语言:javascript复制
// 其中div1是一个dom对象
$(div1);

JQuery对象转换成dom对象

代码语言:javascript复制
// 直接使用下标取出来
$divs[0];
// 使用JQuery的get()方法
$divs.get(0);

获取和设置

获取和设置文本

使用text()方法,用法如下:

代码语言:javascript复制
// 获取文本
$('#div1').text()
// 设置文本
$('#div1').text('新文本')

获取和设置样式

使用css()方法,方法如下:

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

基本选择器

代码语言:javascript复制
// ID选择器
$('#id')
// class选择器
$('.class')
// 标签选择器
$('div')
// 并集选择器,逗号隔开,满足其一即可
$('div,p,li')
// 交集选择器,没有分隔
$('div.class')

层级选择器

代码语言:javascript复制
// 子代选择器
$('ul>li')
// 后代选择器
$('ul li')

过滤选择器

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

代码语言:javascript复制
// 获取索引号为2的元素
$('li:eq(2)')
// 获取索引号为奇数的元素
$('li:odd')
// 获取索引号为偶数的元素
$('li:even')

筛选选择器

是一系列方法

事件

mouseover

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

mouseseenter

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

类操作

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

节点操作

使用html()和$()

代码语言:javascript复制
// 无参数,获取到元素的所有内容
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);
});

0 人点赞