jQuery基础——HTML

最新推荐文章于 2024-05-15 13:12:20 发布

A-kang

最新推荐文章于 2024-05-15 13:12:20 发布

阅读量453

点赞数

文章标签： js javascript jquery

本文链接：https://blog.csdn.net/weixin_45651821/article/details/108109737

版权

一、事件绑定

1.事件绑定
1）给标签的事件属性赋值（函数的调用） - this是window
2）节点.事件属性 = 函数 - this是事件源
3)节点.addEventLisenner(事件名称, 函数) - 事件名称要去掉on; this是事件源
可以给同一个标签的同一个事件绑定不同的驱动程序（一般在原来的功能已经实现了，需要在原功能的基础上添加新的公能的时候才考虑这个问题）

<button id="btn1" type="button">按钮1</button>
		<button id="btn1" type="button">按钮1</button>
        <button id="btn2" type="button">按钮2</button>
        <script type="text/javascript">
            btn1 = document.getElementById('btn1')
            // 绑定事件
            btn1.addEventListener('click', function(){
                console.log(this)
                alert('按钮1被点击') 
            })
            
            // 方式绑定两个驱动程序
            btn2 = document.getElementById('btn2')
            // btn2.onclick = function(){
            //     alert('按钮2被点击')
            // }
            // btn2.onclick = function(){
            //     alert('按钮2再次被点击')
            // }
            
            btn2.addEventListener('click', function(){
                alert('按钮2被点击')
            })
            btn2.addEventListener('click', function(){
                alert('按钮2再次被点击')
            })
            
            
            
        </script>

二、事件类型

1.常用事件类型
1）onclick - 标签被点击事件(可以绑定在绝大多数的可见标签上)
2）onload - 页面加载完成对应的事件(一般绑定在window上)
3）onmouseover - 鼠标悬停在标签上对应的事件
4）onmouseout - 鼠标离开标签对应的事件
5）onkeydown - 按下按键对应的事件(可以绑定在表单相关标签上)
6）onchange - 值改变事件（）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <script type="text/javascript">
            // 2)onload - 页面加载完成
            window.onload = function(){
                // 这儿的代码会在标签都加载完成后执行
                var p1 =  document.getElementById('p1')
                console.log(p1)
            }
        </script>
	</head>
	<body>
        <p id="p1" >我是段落1</p>
        <input type="" name="" id="input1" value="" />
        <div id="div1" style="width: 100px; height: 100px; background-color: goldenrod;"></div>
        <input type="button" name="" id="input2" value="确定" />
        <select name="" id="select1">
            <option value="">四川</option>
            <option value="">重庆</option>
            <option value="">北京</option>
        </select>
        
        <input type="radio" name="sex" id="boy-input" value="男" /><label for="boy-input">男</label>  
        <input type="radio" name="sex" id="girl-input" value="女" /><label for="girl-input">女</label>  
        
        <input type="checkbox" name="" id="lq" value="篮球" /><label for="lq">篮球</label>
        
        <script type="text/javascript">
            p1 = document.getElementById('p1')
            input1 = document.getElementById('input1') 
            div1 = document.getElementById('div1')
            input2 = document.getElementById('input2')
            select1 = document.getElementById('select1')
            
            // 3)onmouseover
            p1.onmouseover = function(){
                console.log('鼠标悬停')
            }
            
            // 4)onmouseout
            p1.onmouseout = function(){
                console.log('鼠标离开')
            }
            
            // 5)onkeydown
            input1.onkeydown = function(){
                console.log('input1: 键盘按下')
            }
            input2.onkeydown = function(){
                console.log('input2:键盘按下')
            }
            select1.onkeydown = function(){
                console.log('select1:键盘按下')
            }
           
           // 6)onchange
           boyInput = document.getElementById('boy-input')
           girlInput = document.getElementById('girl-input')
           lqInput = document.getElementById('lq')
           boyInput.onchange = function(){
               console.log('性别：男')
           }
           girlInput.onchange = function(){
               console.log('性别：女')
           }
           lqInput.onchange = function(){
               console.log('篮球')
           }
           select1.onchange = function(){
               console.log('地址发生改变')
           }
           
           
           
        </script>
	</body>
</html>

三、事件对象

事件对象
事件驱动程序对应的函数在调用的时候，系统会自定传一个参数，这个参数就是当前事件的事件对象

1）鼠标事件：事件发生的时候鼠标的位置信息
clientX/clientY - 鼠标到浏览器内容最左边的距离和顶部的距离
offsetX/offsetY - 鼠标到事件源最左边的距离和顶部的距离
2)键盘事件：被按下的键
key - 按键对应的字符
keyCode - 按键对应的字符的编码值(小写字母返回的是对应的大写字母的编码)
3）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #div1{
                margin-left: 100px;
            }
        </style>
	</head>
	<body>
        
        <!-- 1.鼠标事件 -->
        <div  id="div1" style="width: 100px; height: 100px; background-color: salmon;"></div>
        <script type="text/javascript">
            div1 = document.getElementById('div1')
            div1.onclick = mouseAction
            
            // 参数event就是事件对象
            function mouseAction(event){
                // console.log(event)
                var offsetY = event.offsetY
                if(offsetY <= 50){
                    this.style.backgroundColor = 'red'
                }else{
                    this.style.backgroundColor = 'green'
                }
            }
        </script>
        
        <!-- 2.键盘事件 -->
        <input type="" name="" id="input1" value="" />
        <script type="text/javascript">
            document.getElementById('input1').onkeydown = function(event){
                console.log(event)
            }
        </script>
        
        <!-- 3.值改变事件 -->
        <select name="city" id="city">
            <option value="四川">四川</option>
            <option value="重庆">重庆</option>
            <option value="北京">北京</option>
            <option value="河南">河南</option>
            <option value ="河北">河北</option>
            <option value ="湖北">湖北</option>
        </select>
        <script type="text/javascript">
            document.getElementById('city').onchange = function(event){
                // 获取被选中的城市
                console.log(this.value)
            }
        </script>
        
        
    </body>
</html>

四、事件捕获

1.事件传递
发生在子标签上的事件会传递父标签

2.事件捕获
阻止事件传递给父标签 (在父标签和子标签都对同一个事件进行绑定的时候才需要阻止)
事件对象.stopPropagation()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            body div{
                margin-left: auto;
                margin-right: auto;
            }
        </style>
	</head>
	<body>
        <div id="div1" style="width: 400px; height: 400px; background-color: red;">
            <div id="div2" style="width: 250px; height: 250px; background-color: green;">
                <div id="div3" style="width: 100px; height: 100px; background-color: blue;">
                    
                </div>
            </div>
        </div>
        
        <script type="text/javascript">
            document.getElementById('div3').onclick = function(event){
                alert('div3')
                
                // 事件捕获
                event.stopPropagation()
            }
            
            document.getElementById('div2').onclick = function(event){
                alert('div2')
                event.stopPropagation()
            }
            
            document.getElementById('div1').onclick = function(event){
                alert('div1')
            }
            
        </script>
        
	</body>
</html>

五、认识jQuery

什么是jQuery
jQuery是使用js封装的一个库，本质就是一个js文件。
通过jQuery类的对象来提供功能，能够让DOM操作变得很简单.
怎么使用jQuery - 导入jQuery对应的js文件
1)导入jQuery
本地：

远程：

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选择器选中的标签

<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)
                 console.log($(this))
                 alert(this.innerText+'被点击')
             })
         </script>

A-kang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础——HTML

一、事件绑定1.事件绑定1）给标签的事件属性赋值（函数的调用） - this是window2）节点.事件属性 = 函数 - this是事件源3)节点.addEventLisenner(事件名称, 函数) - 事件名称要去掉on; this是事件源可以给同一个标签的同一个事件绑定不同的驱动程序（一般在原来的功能已经实现了，需要在原功能的基础上添加新的公能的时候才考虑这个问题）<button id="btn1" type="button">按钮1</button
复制链接

扫一扫