您的位置:首页 > Web前端 > JQuery

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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐