jquery属性操作和绑定click事件

jquery属性操作

1、html() 取出或设置html内容

// 取出html内容

var $htm = $('#div1').html();

// 设置html内容

$('#div1').html('<span>添加文字</span>');

2、text() 取出或设置text内容

// 取出文本内容

var $htm = $('#div1').text();

// 设置文本内容

$('#div1').text('<span>添加文字</span>');

3、attr() 取出或设置某个属性的值

// 取出图片的地址

var $src = $('#img1').attr('src');

// 设置图片的地址和alt属性

$('#img1').attr({ src: "test.jpg", alt: "Test Image" });

绑定click事件

给元素绑定click事件,可以用如下方法:

$('#btn1').click(function(){

    // 内部的this指的是原生对象

    // 使用jquery对象用 $(this)

})
### 如何使用 jQuery 动态绑定 click 事件 当页面中的 HTML 元素是通过 JavaScript 或者其他方式动态生成时,传统的 `$(selector).click()` 方法可能无法正常工作。这是因为这些方法仅适用于在 DOM 加载完成时已经存在的元素。对于动态添加的元素,可以使用 **`on()`** 方法来实现事件委托。 以下是关于如何使用 jQuery 动态绑定 click 事件的具体说明: #### 使用 `.on()` 方法 `.on()` 是一种强大的方法,用于为当前以及未来动态创建的元素绑定事件处理程序。其语法如下: ```javascript $(staticParentElement).on(eventName, dynamicChildSelector, eventHandler); ``` - `staticParentElement`: 静态父级元素的选择器,该元素必须存在于 DOM 中。 - `eventName`: 要监听的事件名称(如 `"click"`)。 - `dynamicChildSelector`: 动态子元素的选择器。 - `eventHandler`: 当触发事件执行的回调函数。 这种方法利用了事件冒泡机制,即使目标元素尚未存在,也可以通过监听其父容器上的事件来捕获它们的行为[^3]。 #### 示例代码 下面是一个具体的例子,展示如何动态绑定 click 事件到新创建的按钮上: ```html <div id="container"></div> <button id="addButton">Add New Button</button> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> // 添加新的按钮 $('#addButton').click(function () { $('<button class="newBtn">Click Me!</button>').appendTo('#container'); }); // 绑定 click 事件给动态生成的按钮 $('#container').on('click', '.newBtn', function () { alert('Dynamic button clicked!'); }); </script> ``` 在这个示例中,每次点击 `#addButton` 按钮都会向 `#container` 容器内新增一个带有类名 `newBtn` 的按钮。尽管这些按钮是在运行时动态生成的,但由于我们使用了 `.on()` 方法并将事件绑定到了静态的 `#container` 上,因此仍然能够成功响应用户的点击操作。 #### 关键点总结 1. 对于动态生成的内容,推荐始终采用 `.on()` 方法而不是直接调用 `.click()` 来设置事件处理器。 2. 确保所选的父节点在整个生命周期都保持不变,并且它应该尽可能接近实际的目标元素以提高性能可维护性。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值