我的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);
});