IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> jQuery学习笔记2 2021-9-22 -> 正文阅读

[JavaScript知识库]jQuery学习笔记2 2021-9-22

jQuery核心函数
$是jQuery核心函数 能完成jQuery的很多功能
$()就是调用的 $这个函数
1.当传入参数为函数时
表示当页面加载完成之后
相当于 window.οnlοad=function(){}

		window.onload=function () {
            alert("加载完成");
        }
        
        $(function () {
            alert("加载完成");
        })
        //以上两部分效果相同

2.传入参数为HTML字符串时
会帮我们创建HTML标签对象

//加载页面后 自动调用
        $(function () {
            $("<div>" +
                "        <span>div-span1</span>" +
                "        <span>div-span2</span>" +
                "    </div>").appendTo("body");
        })

传入参数为选择器字符串时

$("#id属性值")id选择器 根据id查询对象
$("标签名") 标签名选择器
$(".class属性值") 类型选择器

传入参数为dom对象时
将dom对象转换为jQuery对象

		$(function () {
            var btnObj=document.getElementById("btnId");
            alert(btnObj);
            alert($(btnObj).length);
        })

jQuery对象和dom对象的区分
alert出来的效果不同
通过上面jQuery的api实现出来的的都是jQuery对象

jQuery对象的本质
jQuery对象是dom对象数组+jQuery中的一系列功能函数

jQuery和DOM对象使用区别
jQuery对象和DOM对象的属性和方法完全不同
例如
DOM对象有innerHTML方法 但是jQuery对象不能用
jQuery对象有click()DOM不能用

DOM对象和jQuery对象互转
1.dom转换为jQuery对象
(1)现有dom对象
(2)使用$(dom对象)就可以 转换为jQuery对象

		$(function () {
            var btn=document.getElementById("btnId");
            alert($(btn));
        })

2.jQuery转换为DOM对象
1.先有jQuery对象
2.jQuery对象[下标] 取出相应的DOM对象

		$(function () {
            var $btn=$("#btnId");
            alert($btn[0]);
        })

jQuery基础选择器
1.id选择器 $("#ID")
2.标签名选择器 $(“标签名”)
3.类型选择器 $(".class类型名")
4.全部选择器 $("*")
5.组合选择器 $(“div,span,p.myClass”)
//p.class表示标签名必须是p标签 同时class名必须是myClass
//组合选择器与页面的标签顺序有关 从上到下

//css()可以设置或获取样式
$("#btnId").css(“background-color”,“red”);

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-09-23 11:22:20  更:2021-09-23 11:24:37 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 19:51:05-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码