首页 前端知识 JQuery的基础笔记

JQuery的基础笔记

2024-04-09 23:04:55 前端知识 前端哥 869 54 我要收藏

前言:

j --> JavaScript Query --> 查询

jquery的入口函数

等DOM结构渲染完毕即可执行内部代码

相当于原生js的DOMContentLoaded

不同于原生js中的load是等一切加载完毕再执行

用法:(推荐第二种)

$(document).ready(function() { // 执行代码 })

$(function() { // 执行代码 })

$ 和 jQuery

1.$是jQuery的别称

jQuery(function() {
    jQuery('div').hide();
});

2.$是jQuery的顶级对象

DOM对象和jQuery对象

1.DOM对象: 用原生js获取过来的对象就是DOM对象

2.jQuery对象: 用jquery方式获取过来的就是jQuery对象。本质:通过$把DOM元素进行了包装

3.jQuery对象 只能使用jquery方法 DOM对象则使用原生的JavaScript属性和方法

错误写法:

myDiv.hide();  //myDiv是一个DOM对象不能使用jquery里面的hide方法
$('div').style.display = 'none';  
//这个$('div')是一个jQuery对象不能使用原生js的属性和方法
DOM对象和jQuery对象的转换

1.DOM --> jQuery:

a.直接获取:$('video');

b.将dom转换为jquery:$(DOM对象)

2.jQuery --> DOM:

(1).$('div')[index] //index是索引号

eg: $('div')[index].play()

(2).$('div').get(index) // 通过此方法可以引用DOM有的一些而jq没有的方法

jQuery基础选择器

基础选择器:

名称用法描述
ID选择器$("#id")
全选选择器$("*")
类选择器$(".class")
标签选择器$("div")
并集选择器$("div,p,li")选取多个元素
交集选择器$("li.current")交集元素

层级选择器:

子代选择器$("ul>li")亲儿子
后代选择器$("ul li")儿子、孙子等
隐式迭代

把匹配的所有元素内部进行遍历循环

jQuery筛选选择器
语法用法描述
:first$("li:first")获取第一个li元素
:last$("li:last")最后一个
:eq(index)$("li:eq(2)")索引号为2的元素,索引号从0开始
:odd$("li:odd")奇数
:even$("li:even")偶数
jQuery筛选方法
语法用法说明
parent()$("li").parent();查找父级
children(selector)$("ul").children("li")相当于$("ul>li")找亲儿子
find(selector)$("ul").find("li")相当于$("ul li")找后代
siblings(selector)$(".first").siblings("li")兄弟,不包括自己
nextAll([expr])$(".first").nextAll()该元素之后所有同辈元素
prevtAll([expr])$(".last").prevAll该元素之前所有同辈元素
hasClass(class)$('div').hasClass("protected")检查当前元素是否含某特定值,若有则返回true
eq(index)$("li").eq(2)当对于$("li:eq(2)")

写在最后:这个是备战蓝桥杯web组时学习的一些JQuery基础用法,不过现在蓝桥杯web组已经不考JQuery了

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4730.html
标签
笔记
评论
发布的文章

HTML5学习笔记(二)

2024-04-21 10:04:45

HTML5 新增语义标签及属性

2024-04-21 10:04:32

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!