首页 前端知识 JavaScript-jQuery1-笔记

JavaScript-jQuery1-笔记

2024-04-30 11:04:12 前端知识 前端哥 624 173 我要收藏

每个页面中一定要先引入jQuery文件
使用this 在jQuery中在一定要使用$(this) 代表当前对象


1.jQuery获取元素对象
$('选择器')
选择器可以是:标签选择器、类选择器、ID选择器、后代选择器、子元素选择器、全局选择器
$('button')

2.绑定事件
$('选择器').事件类型( 事件处理函数 )
注意:事件类型不加on
$('button').click(function () {
         alert('你好')
 })

3.入口函数----页面加载
<script>
// 使用页面加载函数: 可以实现先写js代码 再写标签
// $(function(){ 所有js代码 })
$(function(){
     // 获取元素并绑定事件: $('选择器').click( 事件处理函数 )
      $('button').click(function () {
                alert('你好')
      })
})
</script>
<button>按钮</button>

4.DOM对象和jQuery对象互相转换
将DOM对象转换成jQuery对象 :$(DOM对象)
将jQuery对象转换成DOM对象: jQuery对象[下标] 或 jQuery对象.get(下标)
一般常用:将DOM对象转换成jQuery对象,方便使用jQuery中的简单办法

<head>
<script src="../jquery-3.7.0.js"></script>    // jquery-3.7.0.js文件需要导入
</head>
<body>
<button>按钮</button>
<script>
// 原生js获取DOM对象 只能使用DOM对象的方法 元素.onclick = function(){ }
var btn1 = document.querySelector('button')
console.log(btn1);
// 使用jQuery获取jQuery对象 只能使用jQuery对象的方法 元素.click( function(){} )
var btn2 = $('button')
console.log(btn2);
</script>

5.隐式迭代
隐式迭代:根据选择器获取元素后,不需要循环遍历,直接绑定事件即可, 就会将所有元素都添加事件


<ul>
     <li>11</li>
     <li>12</li>
     <li>13</li>
     <li>14</li>
     <li>15</li>
</ul>
<script>
// 获取所有的li 都会添加上事件
$('li').click(function(){
        alert('你好')
})
</script>

6.jQuery显示、隐藏元素
jQuery 元素
​隐藏元素:元素.hide()
​显示元素:元素.show()


<head>
<script src="../jquery-3.7.0.js"></script>
<style>
div {
      width: 100px;
      height: 100px;
      background-color: pink;
}
</style>
</head>
<body>
<div></div>
<input class="b1" type="button" value="按钮1">
<input class="b2" type="button" value="按钮2">
<script>
// 盒子 100*100 pink 点击按钮1 隐藏盒子 点击按钮2 显示盒子
$('.b1').click(function () {
      $('div').hide()
})
$('.b2').click(function () {
      $('div').show()
})
</script>

7.jQuery元素样式相关
​获取元素的样式:元素.css('样式名') ------ 不使用驼峰命名法,跟css一样 颜色使rgb格式
​设置元素的样式:元素.css('样式名','值')
​设置多样式:元素.css( {'样式名1':'值1' , '样式名2':'值2' } )


<head>
<script src="../jquery-3.7.0.js"></script>   // jquery-3.7.0.js文件需要导入
<style>
div{
     width: 100px;
     height: 100px;
     background-color: pink;
}
</style>
</head>
<body>
<div>盒子</div>
<input class="b1" type="button" value="按钮1">
<input class="b2" type="button" value="按钮2">
<script>
       // 100*100的盒子 在控制台输出盒子背景颜色
       console.log( $('div').css('background-color') );
       // 点击按钮1 将盒子的背景颜色设置成绿色 green
       $('.b1').click(function(){
            $('div').css('background-color','green')
       })
       // 点击按钮2 将盒子的背景颜色设置成黄色 、 字体变成红色 、字体大小30px
       $('.b2').click(function(){
            $('div').css({'background-color':'yellow', 'color':'red' , 'font-size':'30px'})
       })
</script>

8.jQuery类名相关
添加:元素.addClass('类名')
​删除:元素.removeClass('类名')
判断有没有指定类名:元素.hasClass('类名')  // true false
​切换类名: 元素.toggleClass('类名')  // 如果有就删掉 没有就加上

9.获取兄弟元素、链式编程
兄弟元素:元素.siblings()
链式编程:元素.操作.siblings().操作
​同时操作当前元素和兄弟元素

10.jQuery元素文字内容
​获取 元素.text()
​设置 元素.text('值')

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6707.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!