2. it技术
  3. jQuery的学习之路

jQuery的学习之路

it2025-01-18  4

j Q u e r y jQuery jQuery的学习之路

前言：两题肝完(水完) 了 J s Js Js，开始了 j Q u e r y jQuery jQuery的学习之路， j Q q u e r y jQquery jQquery就是一个 J s Js Js库，为开发提供了更简洁的代码，更为方便，但是现在已经淘汰了，一般大公司都不用这个东西，只是用于维护老代码，但是还是有许多值得学习的地方的，下面是我学习 j Q u e r y jQuery jQuery 时的一些记录，希望能给大家一点帮助。

原始 J s Js Js实现入口函数。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { height: 100px; margin-top: 10px; /* 上边距 */ } </style> <script> //设置入口函数 window.onload = function () { var bt1 = document.getElementById('Bt1'); //获取元素名 var bt2 = document.getElementById('Bt2'); var divs = document.getElementsByTagName('div'); //获取标签名 bt1.onclick = function () { for (var i = 0; i < divs.length; i++) { divs[i].style.border = '1px solid red'; } } bt2.onclick = function () { for (var i = 0; i < divs.length; i++) { divs[i].textContent = '我是设置的文本'; } } } </script> </head> <body> <input type="button" value="设置边框" id='Bt1'> <input type="button" value="设置文本" id='Bt2'> <div></div> <div></div> <div></div> </body> </html>

1.入口函数只能有一个。 2.原生 J s Js Js的 A P I API API 较为复杂。 3.浏览器兼容性不好。

关于 j q u e r y jquery jquery的一些简单介绍。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src='jquery-3.5.1.js'></script> <style> div { height: 100px; margin-top: 10px; } </style> <script> //jquery 是一个自执行函数 //window.jquery=window.$=jquery //$ =jquery 是一个函数 // $ 的参数为一个函数 就是入口函数 $(function () { alert('这是一段文本'); // $的参数为一个id 利用jQuery选择器获取的dom对象 var $div1 = $('#one'); $div1.css('backgroundColor', 'red'); var $divs = $('div'); //获取所有div标签的dom对象 console.log($divs); $divs.text('这是一段文本'); var div1 = $divs.get(1); //get 方法获取 console.log(div1); console.log($divs[0]); //或者用 括号访问dom对象 }) </script> </head> <body> <div id='one'></div> <div></div> <div></div> </body> </html>

开关灯实例：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src='jquery-3.5.1.js'></script> <style> .g1 { vertical-align: middle; width: 400px; height: 600px; } </style> <script> //jquery 是一个自执行函数 //window.jquery=window.$=jquery //$ =jquery 是一个函数 // $ 的参数为一个函数 就是入口函数 $(function () { var $btns = $('input'); //$btns 储存的是dom对象 $btns[1].onclick = function () { //jquery 转dom对象 创建点击事件 $('body').css('backgroundColor', 'black'); //jquery选择器 } /* $btns[0].onclick = function () { $('body').css('backgroundColor', 'white'); } */ $btns[0].onclick = function () { $('body')[0].style.backgroundColor = 'white'; //jquery 转dom 对象调用style属性 } }) </script> </head> <body> <input type="button" value="开灯"> <input type="button" value="关灯"> <div align='center'><img src='g1.png' title='背景图片' class='g1'></div> </body> </html>

效果图：

获取和设置文本方法：

t e x t ( ) text() text()方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src='jquery-3.5.1.js'></script> <style> .g1 { vertical-align: middle; width: 400px; height: 600px; } </style> <script> //jquery 是一个自执行函数 //window.jquery=window.$=jquery //$ =jquery 是一个函数 // $ 的参数为一个函数 就是入口函数 $(function () { var btns = $('button'); $('#b1').click(function () { //click 是 jquery 的方法 触发点击事件 console.log($('div').text()); }); btns[1].onclick = function () { //onclick 是js dom对象的方法 ,jq中没有 $('div').text('这是设置后的文字'); } }) </script> </head> <body> <button id='b1'>获取</button> <button>设置</button> <div>这是第一段文字 <p>这是一个段落</p> </div> <br> <div>这是第二段文字</div> </body> </html>

效果图：

CSS()方法的使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src='jquery-3.5.1.js'></script> <style> /* #div1 { background-color: pink; height: 100px; } */ </style> <script> $(function () { var btns = $('button'); $(btns[0]).click(function () { //btns[0] 是dom对象 要使用$(dom)　方法才能转换为jquery对象 //alert('12313'); $('div').css({ width: 200, 'height': '200px', backgroundColor: 'red', 'border': '10px solid blue' }); }) $(btns[1]).click(function () { $('div').css({ width: 300, 'height': '300px', backgroundColor: 'yellow', 'border': '10px solid purple' }); }) $(btns[2]).click(function () { $('#div1').css({ width: 100, height: 100, backgroundColor: 'red', 'border': '10px solid blue' }); }) }) </script> </head> <body> <button>设置样式</button> <button>更改样式</button> <button>更改第一个样式</button> <div id='div1'></div> <div></div> <div></div> </body> </html>

效果图：

最新回复(0)