前言：
今天各位老铁们对“jquery 定义函数”大概比较着重，咱们都需要剖析一些“jquery 定义函数”的相关资讯。那么小编也在网摘上汇集了一些关于“jquery 定义函数””的相关知识，希望兄弟们能喜欢，看官们一起来学习一下吧！通过jQuery获取的元素 都是jQuery对象
jQuery是依赖原生js写出来的 所以并不能超脱出js
你们所看到的通过选择器查询 或者是 事件的方法 依然是通过原生的技术实现的
1.1jQuery核心函数:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div class="box"><button id="btn">测试</button><br><input type="text" name="masg1"><br><input type="text" name="masg2"><br></div><script type="text/javascript" src="js/jquery-1.10.1.js"></script><script type="text/javascript">//需求1：点击按钮 显示按钮的文本，在增加一个新的input// 1.参数为函数：当dom加载完成后，执行的回调函数$(function () {// 2.参数为选择器字符串：查找到匹配的元素并封装成jQuery对象// 在事件回调函数里边 this依旧是指向dom对象$('#btn').click(function () {// 3.参数为dom对象：把dom对象转换成相应的jQuery对象返回alert($(this).html());// $(this).html('哈哈')// 4.参数为html标签字符串：创建标签对象并封装成jQuery对象$('<input type="text" name="masg3"><br>').appendTo('.box');})})// 需求2：遍历输出数组中所有的元素值var arr = [3,1,5,7,11,2];// 通用遍历方法// 参数1：要遍历的内容 参数2：回调函数 回调函数：参数1 index 参数2 元素值$.each(arr,function (index,item) {console.log(index,item);})// 需求3：去掉字符串两端空格var str = ' my dog ';// 把字符串当做参数传递给$.trim（）方法 返回值即为去除两端空格后的字符串console.log('---'+$.trim(str)+'---');</script></body></html>1.2jQuery核心对象:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><p>hahaha</p><button>按钮一</button><button>按钮二</button><button>按钮四</button><button id="btn3">按钮三</button><script type="text/javascript" src="js/jquery-1.10.1.js"></script><script type="text/javascript">// 所有通过jquery获取的元素对应的变量 需要以$开头 用以标记是jquery对象,和dom对象区分var $btns = $('button');//需求1：统计一共多少个按钮// console.log($btns.length);// console.log($btns.size());//需求2：取出第二个button的文本// jQuery对象和dom对象的互转// jQuery => dom 下标取值或者遍历// dom => jQuery $(this)// console.log($btns[1].innerHTML);//需求3：输出所有button的文本// $.each(); 通用遍历方法 用来遍历数组或者对象的// $btns.each() 是专门用来遍历jQuery对象的$btns.each(function () {// this 指向每一次拿出来的dom元素console.log(this.innerHTML);})//需求4：输出第三个按钮是所有按钮当中的第几个//index() 是用来获取当前元素在兄弟元素当中的索引console.log($('#btn3').index());</script></body></html>1.3jQuery基本-层级-过滤选择器:<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><div id="div1" class="box">class为box的div1</div><div id="div2" class="box">class为box的div2</div><div id="div3">div3</div><span class="box">class为box的span</span><br/><ul><li>AAAAA</li><li title="hello">BBBBB</li><li class="box">CCCCC</li><li title="hello">DDDDDD</li><li title="two">BBBBB</li><li style="display:none">我本来是隐藏的</li></ul><script src="js/jquery-1.10.1.js" type="text/javascript"></script><script type="text/javascript">//基本选择器://jQuery的方法内置隐试遍历//选择id为div1的元素// $('#div1').css('background','pink');// 选择所有的div元素// $('div').css('background','pink');// 选择所有class属性为box的元素// $('.box').css('background','pink');// 选择所有的div和span元素// $('div,span').css('background','pink');// 选择class属性为box的div$('div.box').css('background','pink');//层级选择器:// 选中ul下所有的span// $('ul span').css('background','pink');// 选中ul下所有的子元素span// $('ul>span').css('background','pink');// 选中class为box的下一个li// $('.box + li').css('background','pink');// 选中class为box后边所有的兄弟元素$('.box ~ *').css('background','pink');//过滤选择器:// 选择第一个div :first// $('div:first').css('background','pink');// 选择最后一个div// $('div:last').css('background','pink')// 选择所有class属性不为box的div :not()// $('div:not(.box)').css('background','pink');// 选择第二个和第三个li元素// $('li:eq(1)').css('background','pink');// $('li:eq(2)').css('background','pink');// $('li:eq(1),li:eq(2)').css('background','pink');// 大于0 小于3 之间就剩下索引1和索引2对应的元素了// :gt和:lt 都是不包含给定索引的// jQuery的选择器是从左向右依次执行 用上一次的执行结果来执行下一个选择器// $('li:gt(0):lt(2)').css('background','pink');// $('li:lt(3):gt(0)').css('background','pink');// 选择内容为BBBBB的li// $('li:contains(BBBBB)').css('background','pink');// 选择隐藏的li// $('li:hidden').show(1000);// 选择有title属性的li元素// $('li[title]').css('background','pink');// 选择title属性为hellow的li元素// $('li[title=hello]').css('background','pink');// 选择所有有title属性且title属性不为hello的li元素// $('li[title][title!=hello]').css('background','pink');$('li[title]:not([title=hello])').css('background','pink');</script></body></html>1.4jQuery表单选择器:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>08_表单选择器</title></head><body><form>用户名: <input type="text"/><br>密 码: <input type="password"/><br>爱 好:<input type="checkbox" checked="checked" value="篮球"/>篮球<input type="checkbox" checked="checked" />足球<input type="checkbox" />羽毛球 <br>性 别:<input type="radio" name="sex" value='male'/>男<input type="radio" name="sex" value='female'/>女<br>邮 箱: <input type="text" name="email" disabled/><br>所在地:<select><option value="1" >北京</option><option value="2" selected="selected">天津</option><option value="3" >河北</option></select><br><input type="submit" value="提交"/></form><!--表单选择器1). 表单2). 表单对象属性--><script src="js/jquery-1.10.1.js" type="text/javascript"></script><script type="text/javascript">// 选择不可用的文本输入框// input 是标签选择器 用来选择所有的input标签// :input 是表单选择器 选择所有的表单元素 input 下拉框 文本域 button// $(':input:text:disabled').css('background','pink');// 显示选择爱好的个数// console.log($(':input:checkbox:checked').length)// 显示选择的城市名称console.log($('select option:selected').html())</script></body></html>1.5jQuery切换TAB:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>02_多Tab点击切换</title><style>* {margin: 0;padding: 0;}#tab li {float: left;list-style: none;width: 80px;height: 40px;line-height: 40px;cursor: pointer;text-align: center;}#container {position: relative;}#content1, #content2, #content3 {width: 300px;height: 100px;padding: 30px;position: absolute;top: 40px;left: 0;}#tab1, #content1 {background-color: #ffcc00;}#tab2, #content2 {background-color: #ff00cc;}#tab3, #content3 {background-color: #00ccff;}</style></head><body><h2>多Tab点击切换</h2><ul id="tab"><li id="tab1" value="1">10元套餐</li><li id="tab2" value="2">30元套餐</li><li id="tab3" value="3">50元包月</li></ul><div id="container"><div id="content1">10元套餐详情：<br/> 每月套餐内拨打100分钟，超出部分2毛/分钟</div><div id="content2" style="display: none">30元套餐详情：<br/> 每月套餐内拨打300分钟，超出部分1.5毛/分钟</div><div id="content3" style="display: none">50元包月详情：<br/> 每月无限量随心打</div></div><script src="js/jquery-1.10.1.js"></script><script>$(function () {// 获取三个livar $list = $('#tab>li');// 获取三个divvar $divs = $('#container>div');// 保存上一次的索引var oldIndex = 0;// li绑定单击事件$list.click(function () {// 把所有的div隐藏 让当前li索引值对应的div显示var index = $(this).index();if(oldIndex === index){alert('请不要重复点击');return}alert('恭喜点击成功');// hide和show对应隐藏与显示 hide就相当于display = none// $divs.hide(); 不是用这种方法 虽然方便 但是效率相对而言不是特别好$divs[oldIndex].style.display = 'none';$divs[index].style.display = 'block';// 更新索引// 一个函数的结尾 也相当于是下一次执行的开始 一个函数的开始 也相当于是上一次的结尾oldIndex = index;})})</script></body></html>1.6jQuery操作css和html属性:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>10_属性</title></head><body><div id="div1" class="box" title="one">class为box的div1</div><div id="div2" class="box" title="two">class为box的div2</div><div id="div3">div3</div><span class="box">class为box的span</span><br/><ul><li>AAAAA</li><li title="hello" class="box2">BBBBB</li><li class="box">CCCCC</li><li title="hello">DDDDDD</li><li title="two"><span>BBBBB</span></li></ul><input type="text" name="username" value="guiguClass"/><br><input type="checkbox"><input type="checkbox"><br><button>选中</button><button>不选中</button><!--1. 操作任意属性attr() // 用于操作标签自定义属性 操作可更改属性removeAttr()prop() // 用于操作标签固有属性 操作布尔值2. 操作class属性addClass() //添加class属性removeClass()//删除class属性3. 操作HTML代码/文本/值html() // 文本`val() // input 或者说带有value属性的value值--><script type="text/javascript" src="js/jquery-1.10.1.js"></script><script type="text/javascript">/*需求:1. 读取第一个div的title属性2. 给所有的div设置name属性(value为atgui)3. 移除所有div的title属性4. 给所有的div设置class='guiguClass'5. 给所有的div添加class='abc'6. 移除所有div的guiguClass的class7. 得到最后一个li的标签体文本8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"9. 得到输入框中的value值10. 将输入框的值设置为atgui11. 点击'全选'按钮实现全选12. 点击'全不选'按钮实现全不选*/// 一个参数的方法：传值为写 不传值为读 html() val()// 两个参数的方法：传两个值为写 传一个值为读 attr() css()// 读只读第一个 写是写所有// 1. 读取第一个div的title属性console.log($('div').attr('title'));// 2. 给所有的div设置name属性(value为atgui)$('div').attr('name','atgui');// 3. 移除所有div的title属性$('div').removeAttr('title');// 4. 给所有的div设置class='guiguClass'$('div').attr('class','guiguClass');// 5. 给所有的div添加class='abc'// $('div').attr('class','guiguClass abc');$('div').addClass('abc');// 6. 移除所有div的guiguClass的class$('div').removeClass('guiguClass');// 7. 得到最后一个li的标签体文本console.log($('li:last').html());// 8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"$('li:first').html('<h1>mmmmmmmmm</h1>');// 9. 得到输入框中的value值console.log($(':input:text').val());// 10. 将输入框的值设置为atgui$(':input:text').val('atgui');// 11. 点击'全选'按钮实现全选// attr 用于操作标签自定义属性 (属性值可以自己随意写的)// prop 用于操作标签固有属性 操作布尔值$('button:first').click(function () {$(':checkbox').prop('checked',true);});// 12. 点击'全不选'按钮实现全不选$('button:last').click(function () {$(':checked').prop('checked',false);})</script></body></html>1.7jQuery直接写css:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><p style="color: blue">今天天气好晴朗</p><p style="color: yellowgreen">处处好风光</p><script type="text/javascript" src="js/jquery-1.10.1.js"></script><script type="text/javascript">// 得到第一个p标签的文本颜色console.log($('p:first').css('color'));// 设置所有p标签的文本颜色为pink$('p').css('color','pink');// 设置第二个p标签的文本颜色为red 背景为blue 宽度为300px 高度为30px// $('p:last').css('color','red');// $('p:last').css('background','blue');// $('p:last').css('width','300px');// $('p:last').css('height','30px');// 样式可以统一写在{}括号里$('p:last').css({'color':'#fff','background':'pink','width':'500px','height':'40px'})</script></body></html>1.8jQuery对象筛选过滤:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><ul><li>AAAAA</li><li title="hello" class="box2">BBBBB</li><li class="box">CCCCC</li><li title="hello" class="item">DDDDD</li><li title="two"><div><span>EEEEE</span></div></li></ul><li>EEEEE</li><li>FFFFF</li><script type="text/javascript" src="js/jquery-1.10.1.js"></script><script type="text/javascript">// 过滤选择器 是在查找dom的过程当中进行筛选 把匹配的dom元素封装进jQuery对象// 筛选过滤的方法 是在已经有jQuery对象的前提下 要对当前这个对象进行过滤// 这时只能通过方法来解决 而不能使用选择器了var $list = $('ul>li');// 1.ul下li标签的第一个// $list.first().css('background','pink');// 2.ul下li标签的最后一个// $list.last().css('background','pink');// 3.ul下li标签的第二个// $list.eq(1).css('background','pink');// 4.ul下li标签中title属性为hello的//filter 根据传递的选择器 筛选已有的jQuery对象// $list.filter('[title=hello]').css('background','pink')// $list.filter(':first').css('background','pink');// 5.ul下li标签中有span子标签的//has() 这个方法只要内部存在即可$list.has('span').css('background','pink');</script></body></html>1.9jQuery筛选查找子级-父级-兄弟:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div><ul><span>span文本1</span><li>AAAAA</li><li title="hello" class="box2">BBBBB</li><li class="box" id='cc'>CCCCC</li><li title="hello">DDDDDD</li><li title="two"><span>span文本2</span></li><span>span文本3</span></ul><span>span文本444</span><br><li>eeeee</li><li>EEEEE</li><br></div><script type="text/javascript" src="js/jquery-1.10.1.js"></script><script type="text/javascript">var $ul = $('ul');// 1.ul标签下第二个span子标签// children() 用来获取子元素// find() 用来获取后代元素// $('ul>span:eq(1)').css('background','pink')// $ul.children('span:eq(1)').css('background','pink');// 2.ul标签下第二个span后代标签// $ul.find('span:eq(1)').css('background','pink');// 3.ul标签的父标签parent()// $ul.parent().parent().css('background','pink');// 4.id为cc的li标签的前面的所有li标签// $('#cc').prevAll('li').css('background','pink');// prevAll 获取前边所有兄弟标签 查到的元素会以倒序存入jQuery对象// console.log($('#cc').prevAll())// $('#cc').nextAll('li').css('background','skyblue');// 单个的不能写选择器// $('#cc').prev().css('background','pink');// $('#cc').next().css('background','pink');// 5.id为cc的li标签的所有兄弟li标签 除了我以外$('#cc').siblings('li').css('background','pink');</script></body></html>1.91:jQuery筛选查找子孙-兄弟-父:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>16_筛选_查找孩子-父母-兄弟标签</title></head><body><div id="div1" class="box" title="one">class为box的div1</div><div id="div2" class="box">class为box的div2</div><div id="div3">div3</div><span class="box">class为box的span</span><br/><div><ul><span>span文本1</span><li>AAAAA</li><li title="hello" class="box2">BBBBB</li><li class="box" id='cc'>CCCCC</li><li title="hello">DDDDDD</li><li title="two"><span>span文本2</span></li><span>span文本3</span></ul><span>span文本444</span><br><li>eeeee</li><li>EEEEE</li><br></div><!--在已经匹配出的元素集合中根据选择器查找孩子/父母/兄弟标签1. children(): 子标签中找2. find() : 后代标签中找3. parent() : 父标签4. prevAll() : 前面所有的兄弟标签5. nextAll() : 后面所有的兄弟标签6. siblings() : 前后所有的兄弟标签--><!--需求:--><!--1. ul标签的第2个span子标签--><!--2. ul标签的第2个span后代标签--><!--3. ul标签的父标签--><!--4. id为cc的li标签的前面的所有li标签--><!--5. id为cc的li标签的所有兄弟li标签--><script type="text/javascript" src="js/jquery-1.10.1.js"></script><script type="text/javascript">var $ul = $('ul');// children这个方法如果默认什么都不传 则返回所有子元素 也可以选择传递选择器对子元素集合进行过滤// find 这个方法如果默认什么都不传 则返回所有后代元素 也可以选择传递选择器对后代元素集合进行过滤<!--1. ul标签的第2个span子标签-->// $ul.children('span:eq(1)').css('background','pink');<!--2. ul标签的第2个span后代标签-->// $ul.find('span:eq(1)').css('background','pink');<!--3. ul标签的父标签-->// $ul.parent().css('background','pink');<!--4. id为cc的li标签的前面的所有li标签-->// prevAll 获取前边所有兄弟标签 查找到的元素会以倒序存入jQuery对象 可以使用选择器进行筛选// nextAll 获取后边所有所有兄弟标签 可以使用选择器进行筛选// next和prev分别是返回后边一个和前边一个兄弟元素 这两个方法不能传递选择器// $('#cc').prevAll('li').css('background','pink');// $('#cc').nextAll('li').css('background','pink');// $('#cc').next().css('background','pink');// $('#cc').prev().css('background','pink');<!--5. id为cc的li标签的所有兄弟li标签-->$('#cc').siblings('li').css('background','pink');</script></body></html>#春日生活打卡季##we##前端##vue##react#
欢迎关注我的原创文章：小伙伴们！我是一名热衷于前端开发的作者，致力于分享我的知识和经验，帮助其他学习前端的小伙伴们。在我的文章中，你将会找到大量关于前端开发的精彩内容。
学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师，还是仅仅对前端开发感兴趣，我的文章将能为你提供宝贵的指导和知识。
在我的文章中，你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识，并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者，我的文章都能够满足你的学习需求。
此外，我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展，新的框架和工具层出不穷。通过我的文章，你将会了解到最新的前端技术趋势，并了解如何应对这些变化。
我深知学习前端不易，因此我将尽力以简洁明了的方式解释复杂的概念，并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发，并提升你的技能。
如果你想了解更多关于前端开发的内容，不妨关注我的原创文章。我会不定期更新，为你带来最新的前端技术和知识。感谢你的关注和支持，我们一起探讨交流技术共同进步，期待与你一同探索前端开发的奇妙世界！
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
