jquery的基本使用(2)

在jquery重要的主干就是选择器和事件,其他的所有操作都是基于这两者来进行操作的。

jquery选择器

选择器就类似我们之前讲的getElementById之类的,就是查找dom中的某个元素。在jquery中,我们可以很简单的就能选择到我们想操作的dom元素。

复制代码
$(function(){
    var dom = $("#container_id").html();
    console.log(dom);
    dom = $("#container_id").text();
    console.log(dom);
    dom = $(".container_class:eq(0)");
    console.log(dom.text());
    console.log(dom.html());
});

注:

由以上可知,jquery的选择器很简单,只需要使用$("选择元素")就能获取到相关的dom,这里的"选择元素" 如果是id,需要加上id的#号标识,如果是class,就需要加上.的标识,:后接的是伪类选择器,就是满足某个条件的相应的元素,这里的eq就是等于的意思。

jquery事件

html中可以对各种元素添加事件,在jquery中想要对元素添加事件,需要先 选择 元素,然后使用事件。比如,我们点击container_id的元素就输出一段字符串:

复制代码
$(function(){
    var dom = $("#container_id");
    dom.click(function(){
        console.log("我输出了");
    });
});

注:

由以上可知dom元素添加事件,需要先选中,然后使用.事件名(function(){ 执行的函数 });就可以简单的进行添加。

相关推荐
GISer_Jing32 分钟前
WebGL跨端兼容实战:移动端适配全攻略
前端·aigc·webgl
迦南giser35 分钟前
前端性能——传输优化
前端
小白_ysf40 分钟前
Vue 中常见的加密方法(对称、非对称、杂凑算法)
前端·vue.js·算法
2501_944448002 小时前
Flutter for OpenHarmony衣橱管家App实战:支持我们功能实现
android·javascript·flutter
人工智能训练7 小时前
【极速部署】Ubuntu24.04+CUDA13.0 玩转 VLLM 0.15.0:预编译 Wheel 包 GPU 版安装全攻略
运维·前端·人工智能·python·ai编程·cuda·vllm
会跑的葫芦怪8 小时前
若依Vue 项目多子路径配置
前端·javascript·vue.js
xiaoqi9228 小时前
React Native鸿蒙跨平台如何进行狗狗领养中心,实现基于唯一标识的事件透传方式是移动端列表开发的通用规范
javascript·react native·react.js·ecmascript·harmonyos
jin1233229 小时前
React Native鸿蒙跨平台剧本杀组队消息与快捷入口组件,包含消息列表展示、快捷入口管理、快捷操作触发和消息详情预览四大核心功能
javascript·react native·react.js·ecmascript·harmonyos
烬头882110 小时前
React Native鸿蒙跨平台实现二维码联系人APP(QRCodeContactApp)
javascript·react native·react.js·ecmascript·harmonyos
pas13610 小时前
40-mini-vue 实现三种联合类型
前端·javascript·vue.js