你们需要网站建设,2023前端开发的就业现状,厦门百度开户,上海有限公司有哪些每个页面中一定要先引入jQuery文件 使用this 在jQuery中在一定要使用$(this) 代表当前对象
1.jQuery获取元素对象 $(选择器) 选择器可以是#xff1a;标签选择器、类选择器、ID选择器、后代选择器、子元素选择器、全局选择器 $(button)
2.绑定事件 $(选择器).事件类型( 事件…每个页面中一定要先引入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 li11/li li12/li li13/li li14/li li15/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 classb1 typebutton value按钮1 input classb2 typebutton 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 classb1 typebutton value按钮1 input classb2 typebutton 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(值)
