JAVAScript——JQuery—$ ( )

it2023-07-16 73

什么是JQuery？

JQuery是一个JavaScipt库，它通过封装原生的JavaScript函数得到一整套定义好的方法。

优点 ———— 便捷

像CSS一样访问和操作DOM修改CSS控制页面外观简化JavaScript代码事件处理更加容易让AJAX技术更加完美——异步加载

第一个JQuery代码

$ 选中 id <script src="./jquery-3.5.1.js"></script> <script type="text/javascript"> $('button').click(function(){ alert("你点了我一下哦"); }); alert($==jQuery); —————————— 返回true </script>

JQuery

在JQuery中，$ ——— 就是JQuery中最重要且独有的对象$（function() { }）———— 执行一个匿名函数$（‘# box’）———— 执行的id选择器$（’# box’).css(‘color’，‘red’)———— 执行功能函数 JQuery的代码模式是采用的连缀方式，可以不停的连续调用功能函数 <script src="./jquery-3.5.1.js"></script> <script type="text/javascript"> var obj01 = $('#button'); // JQuery选择的元素 var obj02 = jQuery('#button'); // JQuery选择的元素 var obj03 = document.getElementById("button"); // 原生选择的元素 // alert($==jQuery); $('#button').css('background','red').css('font-size','20px') </script>

JQuery加载模式

JQuery使用 $ ( function ( ) { } ) 这段代码进项首位包裹————因为我们JQuery库文件是在body元素之前加载的，必须等待所有的DOM元素加载后，延迟DOM操作，否则就无法获取到。

JQuery与DOM对象转化

JQuery元素选择器

选择器CSSJQuery模式描述标签选择器div{ }$(‘div’)获取所有div元素的DOM对象id选择器#box{ }$(’#box’)获取一个id为box元素的DOM对象类选择器.box{ }$(’.box’)获取所有class为box元素的DOM对象群组选择器span em box$(‘span em box’)获取多个选择器的DOM对象后代选择器ul li a { }$('ul li a ')获取追溯到的多个DOM对象通配选择器* { }$(’*’)获取所有元素标签的DOM对象 <script src="./jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // DOM原生代码 var obj = document.getElementById('button01') obj.style.background = 'black' obj.style.color = 'white' // DOM原生代码遍历 var btnarr = document.getElementsByTagName('button') for (var i = 0; i < btnarr.length; i++) { btnarr[i].style.fontSize = '20px' } // jquery代码 var obj02 = $('#button02') obj02.css('background','red') // jquery代码遍历 —————— 使用JQuery自带的函数进行遍历 var btnarr02 = $('.button00') btnarr02.each(function(index,ele){ // index:索引 ele：元素 if(index %3 == 0){ $(ele).css('font-size','35px') }else{ $(ele).css('font-size','15px') } }) </script>

属性选择器

选择器JQuery模式描述a [ tittle ]$(’ a [ tittle ]’)获取具有这个属性的DOM对象a [ tittle = t1 ]$(’ a [ tittle = t1 ]’)获取具有这个属性等于这个属性值的DOM对象

过滤选择器

选择器JQuery模式描述li:first$(’ li:first’)获取第一个元素li:last$(’ li:last’)获取最后一个元素li:eq(index)$(’ li:eq(index)’)获取索引为index的DOM元素 <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div> <a href="" id="aa">子1标签</a> <a href="">子2标签</a> <a href="" id="aa">子3标签</a> <a href="" id="aa">子4标签</a> <a href="" id="aa">子5标签</a> <a href="" id="aa">子6标签</a> <a href="" id="aa">子7标签</a> <a href="" id="aa">子8标签</a> </div> <div id="d1">JQuery</div> <ul> <li>选项一</li> <li>选项二</li> <li>选项三</li> </ul> </body> </html> <script src="./jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $('a[href]').css('color','red') $('a[id=aa]').css('font-size','30px') $('li').eq(2).css('font-size','40px') $('li').first().css('color','blue') $('a').css('color',function(index,value){ // index 为索引 value 是原属性 if (index%2==0) { return "red" }else{ return "pink" } }) $('#d1').css({ 'width': '100px', 'height': '100px', 'background': 'pink', 'border': '1px black solid' }) </script>

HTML( ) 和TEXT ( )

方法名描述HTML()获取元素中HTML内容HTML(value)设置元素中HTML内容TEXT()获取元素中文本内容TEXT(value)设置元素中文本内容 <script src="./jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var h = document.getElementById("hhh") // 原生代码设置文本内容 h.innerText="Hello World"; // 原生代码追加文本内容——方法一 h.innerText+=",欢迎来到我的世界！" // 原生代码追加文本内容——方法二 var ddd = document.createTextNode("Mary") h.appendChild(ddd) // 原生代码添加标签————覆盖原文本内容 h.innerHTML="<span style='color:palevioletred'>WELCOME!</span>" </script>

高级选择器

选择器CSS模式JQuery模式JQuery等价方法描述后代选择器ul li a { }$('ul li a ')fin(‘p’)获取追溯到的多个DOM对象子选择器div > p{ }$(‘div > p’)children( )只获取子类节点的多个DOM对象 <script src="./jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $('div ul li').css('font-size','20px') // 使用JQuery提供的方法 $('div').find('ul').find('li').css('color','red') $('#dd02>h1').css('color',"pink") // 使用JQuery提供的方法 $('#dd02').children('h2').css('background','yellow') </script>

attr ( ) 和 romoveattr ( )

方法名描述attr()获取元素key属性的属性值attr(key,value)设置元素key属性的属性值attr({key1:value1,key2:value2,…})设置元素多个key属性的属性值attr(key,function(index,value){})元素key的属性值通过方法来设置 <script src="./jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // 原生代码 // document.getElementsByTagName()——返回带有指定标签名的对象的集合所以要选定第一个元素 var h = document.getElementsByTagName("h1")[0] h.setAttribute("align","right") //getAttributeNode()——从当前元素中通过名称获取属性节点 var k = h.getAttributeNode("align") k.value = "left" h.removeAttributeNode(k); JQuery代码 $('h1').attr('align','right') </script>

css操作方法

方法名描述addClass（class）给元素添加一个类removeClass（class）移除元素的一个类toggleClass（class1，class2，…）来回切换默认样式和指定样式 <html> <head> <meta charset="utf-8"> <title></title> <style> .d1 { width: 200px; height: 200px; background: red; } .d2 { width: 200px; height: 200px; background: yellow; } </style> </head> <body> <div class="d1"></div> <button type="button">点我切换颜色</button> </body> </html> <script src="./jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // 添加class属性 $('div').attr('class','d2'); // button添加点击事件切换颜色 $('button').click(function(){ // 添加class属性 toggleClass()——对设置或移除被选元素的一个或多个类进行切换 $('div').toggleClass('d2') }) </script>

节点操作

内部插入结点

方法名描述append（content）向元素后插入结点appendTo（content）将指定元素移入到content元素内部的后面prepend（content）向元素前插入结点prependTo（content）将指定元素移入到content元素内部的前面 <html> <head> <meta charset="utf-8"> <title></title> <style> #ddd{ background-color: aquamarine; width: 200px; height: 200px; } </style> </head> <body> <h1 id="h">我是h1</h1> <h2 id="hh">我是h2</h2> <h3 id="hhh">我是h3</h3> <div id="ddd"> <span id="s">我是span文本</span> </div> </body> </html> <script src="./jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // 创建节点 var sp = $("<span>我是新建节点span</span>") // 给body添加新建节点————法一：父添加子 $('body').append(sp) // sp移到div内部后面————法二：子移到父中 sp.appendTo('body') // h1移到div内部前面 $('div').prepend($('#h')) //把h2放进div中前 $('#hh').prependTo('#ddd') //把h3放在div后 $('#hhh').appendTo($('#ddd')) </script>

外部插入结点

方法名描述after（content）向元素外部后插入结点before（content）向元素外部前插入结点insertAfter（content）将指定元素移入到content元素外部的后面insertBefore（content）将指定元素移入到content元素外部的前面 <script src="./jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // 每一个h1后都有一个h2 $('h1').after($('h2')) // 每一个h3前都有一个h1 $('h3').before($('h1')) // 把span放在div外部的后面 $('span').insertAfter('div'); // 把span放在div外部的前面 $('span').insertBefore('div'); </script>

包裹节点

方法名描述wrap（html）向元素包裹一层html代码wrapAll（html）用html将所有代码包裹在一起unwrap（html）移除一层元素包裹的内容wrapInner（element）向元素的子内容包裹一层DOM对象节点 <html> <head> <meta charset="utf-8"> <title></title> <style> #d{ background-color: aquamarine; width: 200px; height: 200px; } </style> </head> <body> <div id="ddd"> <h1>我是h1</h1> <h1>我是h1</h1> </div> </body> </html> <script src="./jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // 给每一个h1包裹一个div $('h1').wrap('<div id="d"></div>') // 给所有h1包裹一个div $('h1').wrapAll('<div id="d"></div>') // 移除包裹 $('h1').unwrap(); // 给每个h1包裹一个父标签 $('h1').wrapInner('<div id="nei"></div>') // 给div包裹一个子标签 $('div').wrapInner('<div id="nei"></div>') </script>

基础事件

方法名描述.bind(‘click’,function ( ) { }）为元素绑定事件.unbind()解绑所有事件.unbind(‘click’)解绑指定事件 <script src="./jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // 给button元素添加点击事件 $('#b1').bind('click',function(){ $('#b1').css('background','red') }) // 可以连缀 $('#b2').bind('mouseover',function(){ $('#b2').css('background','blue') }).bind('mouseout',function(){ $('#b2').css('background','black') $('#b2').css('font-size','20px') $('#b2').css('color','yellow') }).bind('click',function(){ $('#b2').css('background','pink') }) // 解绑所有事件 $('#b2').unbind() $('#b2').unbind('click') // 移除指定事件 var a = function(){ alert('aaa') } var b = function(){ alert('bbb') } var c = function(){ alert('ccc') } $('#b3').bind('click',a).bind('click',b).bind('click',c) $('#b3').unbind('click',a) </script>

事件简写

方法名描述.hover( function( ){ } ）为元素添加鼠标移入移出事件.click( function( ){ } ）为元素添加点击事件.mousedown( function( ){ } ）为元素添加鼠标摁下事件.mouseup( function( ){ } ）为元素添加鼠标松开事件.mouseout( function( ){ } ）为元素添加鼠标移出事件.keydown( function( ){ } ）为元素添加键盘摁下事件.keyup( function( ){ } ）为元素添加键盘松开事件.keypress( function( ){ } ）为元素添加键盘摁下不松开事件.on( ‘click’,function(){ } ）绑定某个事件.off( ‘click’ )解绑某个事件.one( ‘click’,function(){ } )使事件只触发一次e.currentTarget获取的是绑定了该事件的那个元素e.target获取的是触发了该事件的元素 <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #d{ width: 200px; height: 200px; background-color: black; } #dd{ width: 200px; height: 200px; background-color: pink; } </style> </head> <body> <div id="d"></div> <div id="dd"> <button type="button">点击事件</button> </div> <button type="button" id="b1">自动触发事件</button> <button type="button" id="b2">绑定事件</button> </body> </html> <script src="./jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $('#d').mouseover(function(){ $('#d').css('background','blue') }).mouseout(function(){ $('#d').css('background','red') }).mousedown(function(){ $('#d').css('background','gray') }) // 以上可以简写为 $('#d').hover(function(){ $('#d').css('background','blue') },function(){ $('#d').css('background','red') }) //target和currentTarget区别 $('#dd').mousedown(function(e){ // $('div').css('background','blue') // target: 获取的是触发了该事件的元素————点哪个哪个变 // var obj = e.target // currentTarget:获取的是绑定了该事件的那个元素————点任何一个都是绑定事件的div变 var obj = e.currentTarget $(obj).css('background','yellow') }) // 自动触发事件 $('#b1').click(function(){ $('#b1').css('background','green') alert("自动触发事件触发了") }).trigger('click') // 绑定事件 $('#b2').on('click',function(){ $('#b2').css('background','black') $('#b2').css('color','yellow') }) // 解绑事件 $('#b2').off('click') // 让事件只触发一次 $('#b2').one('click',function(){ alert("事件只能触发一次") }) </script>

冒泡行为

方法名描述e.stopPropagation()阻止事件冒泡 <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #one { width: 300px; height: 300px; background: #FFC0CB; } #two { width: 200px; height: 200px; background: yellow; } #three { width: 100px; height: 100px; background: blue; } </style> </head> <body> <div id="one" onclick="show01(event)"> 1 <div id="two" onclick="show02(event)"> 2 <div id="three" onclick="show03(event)"> 3 </div> </div> </div> </body> </html> <script src="./jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> function show01(e){ e.stopPropagation() alert("点击了01") } function show02(e){ e.stopPropagation() alert("点击了02") } function show03(e){ e.stopPropagation() alert("点击了03") } </script>

冒泡行为

方法名描述.show( 1000)显示元素（毫秒）.hide(1000 )隐藏元素（毫秒）.toggle(1000 )显示隐藏切换（毫秒）.slideUp(1000)上拉元素隐藏.slideDown(1000)下拉元素显示.slideToggle(1000)上拉下拉切换.fadeIn(1000)淡入元素显示.fadeOut(1000)淡出元素隐藏.fadeToggle(1000)淡入淡出切换 <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; background-color: #FFC0CB; } </style> </head> <body> <div id="d1"></div> <button type="button" class="b1"> 显示</button> <button type="button" class="b1"> 隐藏</button> <button type="button" class="b1"> 切换01</button> <div id="d2"></div> <button type="button" class="b2"> 上拉</button> <button type="button" class="b2"> 下拉</button> <button type="button" class="b2"> 切换02</button> <div id="d3"></div> <button type="button" class="b3"> 淡入</button> <button type="button" class="b3"> 淡出</button> <button type="button" class="b3"> 切换03</button> </body> </html> <script src="./jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // 显示隐藏切换 $('.b1').eq(0).click(function(){ $('#d1').show(1500) }) $('.b1').eq(1).click(function(){ $('#d1').hide(1500) }) $('.b1').eq(2).click(function(){ $('#d1').toggle(1500) }) // 上拉下拉切换 $('.b2').eq(0).click(function(){ $('#d2').slideUp(1000) }) $('.b2').eq(1).click(function(){ $('#d2').slideDown(1000) }) $('.b2').eq(2).click(function(){ $('#d2').slideToggle(1000) }) // 淡入淡出切换 $('.b3').eq(0).click(function(){ $('#d3').fadeIn(1000) }) $('.b3').eq(1).click(function(){ $('#d3').fadeOut(1000) }) $('.b3').eq(2).click(function(){ $('#d3').fadeToggle(1000) }) </script>

最新回复(0)