web前端进阶_jQuery相关内容_基础篇8(jQuery 的DOM操作/属性操作/事件绑定)
2020-08-21 11:36
1666 查看
jQuery相关内容
一、认识jQuery
1. 什么是jQuery
jQuery是使用js封装的一个库,本质就是一个js文件。
通过jQuery类的对象来提供功能,能够让DOM操作变得很简单.
2. 怎么使用jQuery - 导入jQuery对应的js文件
1)导入jQuery
本地:
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
远程:
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
2)怎么用
jQuery中:$就是jQuery类, $()就是jQuery对象
jQuery对象的本质就是像数组一样的容器对象,容器中的元素是标签对应的节点对象, 除了元素以外还有额外的属性和方法。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 1.导入jQuery --> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <!-- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> --> </head> <body> </body> </html> <script type="text/javascript"> // 1.数组对象 arr1 = [10, 20, 30, 40] console.log(arr1) console.log(arr1[0]) console.log(arr1.length) arr1.sort(function(a,b){ return a-b }) // 2.jQuery对象 console.log($()) </script>
二、jQuery的DOM操作
1.获取节点
获取方式 | 获取内容 |
---|---|
$(css选择器) | 获取css选择器选中的标签 |
2、创建节点
创建方式 | 创建内容 |
---|---|
$(html代码) | 创建html代码相关标签节点(heml内容一般写在``中) |
3、添加节点
添加节点方式 | 添加的位置 | 节点之间的关系 |
---|---|---|
节点对象1.append(节点对象2) | 在节点1的最后添加节点2 | 节点1和节点2是父子关系 |
节点对象1.prepend(节点对象2) | 在节点1的最前面添加节点2 | 节点1和节点2是父子关系 |
节点对象1.after(节点对象2) | 在节点1的后面插入节点2 | 节点1和节点2是兄弟关系 |
节点对象1.before(节点对象2) | 在节点1的前面插入节点2 | 节点1和节点2是兄弟关系 |
4、删除节点(此处的节点对象都是jQuery的节点对象)
删除方式 | 删除内容 |
---|---|
节点对象.remove() | 删除节点对象 |
5、jQuery对象和js对象的转换
jQuery对象是容器对象,容器中元素就是标签对应的节点对象,本质就是js对象
1)jQuery对象转换成js对象: 取出jQuery容器中的元素
2)js对象转换jQuery对象:$(js对象)
6、事件绑定(此处的节点对象也是jQuery对象)
事件绑定方式 | this指向 |
---|---|
节点对象.on(事件名,函数) | 函数中的this是事件源节点(this是js对象) |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <!--================= 1.获取节点 ================ $(css选择器) - 获取css选择器选中的标签 --> <h1>1.获取节点</h1> <p id="p1">我是段落1</p> <p class="c1">我是段落2</p> <a href="" class="c1">我是超链接1</a> <a href="" class="c2">我是超链接2</a> <span class="c1">我是span1</span> <img src="img/thumb-2.jpg" class="c2"> <div id="div1"> <p>我是段落<a href="">我是超链接3</a></p> <a href="">我是超链接4</a> </div> <script type="text/javascript"> // 通过不同的选择器选中不同的标签 p1 = $('#p1') console.log(p1) c1 = $('.c1') console.log(c1) allA = $('a') console.log(allA) a4 = $('#div1>a') console.log(a4) // 注意:对jQuery对象进行的节点操作,会作用于jQuery对象中所有的节点 c1.css('background-color', 'red') </script> <!-- ====================2.创建节点和添加================== 1)创建节点 $(html代码) 2) 添加节点 节点对象1.append(节点对象2) - 在节点1的最后添加节点2(节点1和节点2是父子关系) 节点对象1.prepend(节点对象2) - 在节点1的最前面添加节点2 (节点1和节点2是父子关系) 节点对象1.after(节点对象2) - 在节点1的后面插入节点2(节点1和节点2是兄弟关系) 节点对象1.before(节点对象2) - 在节点1的前面插入节点2(节点1和节点2是兄弟关系) --> <h1>2.创建和添加节点</h1> <div id="box1"> <p>我是段落5</p> <h1>标题1</h1> <hr> <h1>标题2</h1> </div> <script type="text/javascript"> // 创建节点 a = $('<a href="https://www.baidu.com" style="color: red;">百度</a>') sex = $('<input type="radio" value="男" id="boy"/><label for="boy">男</label>') // 添加节点 $('#box1').append(a) $('#box1').prepend(sex) $('#box1>p').before($('<br><img src="img/a3.jpg"/>')) $('#box1>p').after($('<img src="img/a1.jpg"/>')) $('#box1>h1').after($('<p>我是段落</p>')) </script> <!-- ======================3.删除================== 节点对象.remove() --> <script type="text/javascript"> $('p').remove() </script> <!-- ====================4.jQuery对象和js对象的转换============= jQuery对象是容器对象,容器中元素就是标签对应的节点对象,本质就是js对象 1)jQuery对象转换成js对象: 取出jQuery容器中的元素 2)js对象转换jQuery对象:$(js对象) --> <p id="p2" class="c3">我是最后一个段落</p> <a href="" class="c3">我是最后一个超链接</a> <script type="text/javascript"> qp2 = $('#p2') console.log(qp2) jp2 = qp2[0] console.log(jp2) jp2.innerText = '你好!' $(jp2).before($('<img src="img/picture-3.jpg" />')) </script> <!-- =================5.事件绑定================== 节点对象.on(事件名,函数) - 函数中的this是事件源节点(this是js对象) --> <button type="button">按钮1</button> <button type="button">按钮2</button> <script type="text/javascript"> $('button').on('click', function(event){ console.log(this) //此处的this还是js的节点对象 console.log($(this)) alert(this.innerText+'被点击') }) </script> </body> </html>
三、jQuery的属性操作
1.获取父子节点
获取方式 | 获取对象 |
---|---|
节点对象.parent() | 获取父节点 |
节点对象.children() | 获取所有的子节点 |
节点对象>*:first-child | 获取节点对象第一个子标签 |
2、属性操作
1)标签内容
内容获取 | 内容赋值 |
---|---|
节点对象.text() | 节点对象.text(值) |
节点对象.html() | 节点对象.html(值) |
2)value属性
value值获取 | value值赋值 |
---|---|
节点对象.val() | 节点对象.val(值) |
3)class属性操作
class属性操作方式 | 功能 |
---|---|
节点对象.addClass(class值) | 增加节点对象class属性 |
节点对象.removeClass(class值) | 减少节点对象class属性 |
4)样式
a.节点对象.css(css的属性名, css属性值) - 单独设置一个属性(属性名和值要和css保持一致)
b.节点对象.css({
属性名1: css属性值1,
属性名2: css属性值2,
属性名3: css属性值3
…
})
注意:属性名是驼峰式的css属性名,属性值和css属性值一样
5)普通属性
普通属性值获取 | 普通属性值赋值 |
---|---|
节点对象.attr(属性名) | 节点对象.attr(属性名,属性值) |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> .c1{ color: red; } </style> </head> <body> <!-- ===============1.获取父子节点 ================= 节点对象.parent() - 获取父节点 节点对象.children() - 获取所有的子节点 --> <h1>1.获取节点</h1> <div id="div1"> <a href="">超链接1</a> <p id="p1">我是段落1</p> <p>我是段落2</p> <h2>我是标题2 <a href="">百度</a></h2> <a href="">超链接2</a> </div> <script type="text/javascript"> // 1)获取父节点 p1 = $('#p1') console.log(p1.parent()) // 2)获取所有的子节点 div1 = $('#div1') div1Children = div1.children() console.log(div1Children) // 获取div1中的第一个子标签 console.log($('#div1>*:first-child')) </script> <!-- ===============2.属性操作 ================= 1)标签内容 节点对象.text()/节点对象.text(值) 节点对象.html()/节点对象.html(值) 2)value属性 节点对象.val()/节点对象.val(值) 3)class属性操作 节点对象.addClass(class值) 节点对象.removeClass(class值) 4)样式 a.节点对象.css(css的属性名, css属性值) - 单独设置一个属性(属性名和值要和css保持一致) b.节点对象.css({ 属性名1: css属性值1, 属性名2: css属性值2, 属性名3: css属性值3 ... }) 注意:属性名是驼峰式的css属性名,属性值和css属性值一样 5)普通属性 节点对象.attr(属性名)/节点对象.attr(属性名,属性值) --> <h1>2.属性操作</h1> <p id="p3" class="c0">我是段落3</p> <p class="c0 c3" id="p4">我是段落4</p> <input type="" name="" id="name" value="张三" /> <img src="img/bear.png" title="熊"> <script type="text/javascript"> // 1)标签内容 p3 = $('#p3') console.log(p3.text(), p3.html()) p3.html('你好:<a href="">我是超链接3</a>') // 2)value属性 input = $('#name') console.log(input.val()) // 3)class属性操作 p3.addClass('c1') $('#p4').removeClass('c0') // 4)样式 $('#p4').css('font-size', '25px') $('#p4').css({ color: 'red', fontSize: '30px', backgroundColor: 'yellow' }) // 普通属性 imgTitle = $('img').attr('title') console.log(imgTitle) imgTitle = $('img').attr('src', 'img/hat.png') </script> </body> </html>
四、jQuery的事件绑定
1.第一种绑定方式
绑定方法 | 绑定对象 |
---|---|
jQuery节点对象.on(事件名, 函数) | 直接给指定标签绑定事件 |
2. 第二种绑定方式
绑定方法 | 绑定对象 |
---|---|
jQuery节点对象.on(事件名, 选择器, 函数) 父节点.on(事件名, 子节点选择器, 函数) |
给指定标签中通过选择器选中的子标签绑定事件 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <h1>1.绑定事件的第二种方法</h1> <button type="button">按钮1</button> <p class="c1">我是段落2</p> <div id="div1"> <button type="button">按钮3</button> </div> <!-- ===============绑定事件================= 1. jQuery节点对象.on(事件名, 函数) - 直接给指定标签绑定事件 2. jQuery节点对象.on(事件名, 选择器, 函数) - 给指定标签中通过选择器选中的子标签绑定事件 父节点.on(事件名, 子节点选择器, 函数) --> <script type="text/javascript"> $('body').on('click', 'button', function(){ // alert('按钮被点击') }) $('body').on('click', '.c1', function(){ // alert('p标签被点击') }) $('#div1').on('click', 'button', function(){ // alert('内部被点击') }) </script> <h1>2.第二种绑定方式的作用</h1> <div id="div2"> <button type="button">div2-btn1</button> <button type="button">div2-btn2</button> </div> <br> <button type="button" onclick="addButton()">添加</button> <script type="text/javascript"> count = 1 function addButton(){ newBtn = $(`<button>新增按钮${count}</button>`) $('#div2').append(newBtn) count ++ } // 1)第一种绑定方式 // $('#div2>button').on('click', function(){ // alert(this.innerText) // }) // 2)第二种绑定方式 $('#div2').on('click', 'button', function(){ alert(this.innerText) }) </script> </body> </html>
相关文章推荐
- 从零开始学 Web 之 jQuery(五)操作元素其他属性,为元素绑定事件
- 第一百六十六节,jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度、偏移、滚动条
- WEB前端技巧之JQuery为动态添加的元素绑定事件.md
- jQuery学习笔记之DOM操作、事件绑定(2)
- web前端之锋利的jQuery三:jQuery中的DOM操作
- WEB05_jQuery、WEB06_jQuery(DOM转换和选择器、jQuery的属性操作、jQuery的遍历和DOM操作、jQuery的事件、validation插件)
- jQuery基础3(操作dom元素的属性和方法)
- web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记
- jQuery学习笔记 —— 2. DOM操作和 3. 事件绑定
- jquery查找元素,绑定事件,DOM操作
- jQuery操作DOM基础 - 元素属性的查看与设置
- web前端入门:使用jQuery操作元素的属性与样式
- jQuery——样式、元素属性、文本、节点、事件相关操作
- Web29. jQuery选择器 Dom操作 样式 事件处理 动画
- Vue基础1(vue目录结构,数据、属性绑定,循环(v-for)渲染数据,vue数据双向,vue事件,vue中ref获取dom元素节点)
- 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
- jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
- Web前端——JQuery的进阶(测试使用 jQuery进行指定的操作)
- PHP Jquery 代码操作 内容 属性 样式 事件 Json数据
- 前端基础之jquery_mouse相关操作与不同