仿照jq链式操作-贴代码

最新推荐文章于 2022-05-07 11:01:23 发布
最新推荐文章于 2022-05-07 11:01:23 发布
阅读量201 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36602186/article/details/80480459
版权

效果图




源码

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        #box p:nth-child(2n){
        background-color:pink;
        }
        </style>
    </head>
    <body>
    <div id="box">
   
    <p>我是box下面的p</p>
    <p>我是box下面的p</p>
    <p>我是box下面的p</p>
    <p>我是box下面的p</p>
    <p>我是box最后面的面的p</p>
    </div>
    </body>
</html>
<script>


$(function(){
alert(12)
})
var a = $('#box p:nth-child(2n)').css('border','1px solid red').html('链式添加html');


$('#box p:last-child').css('backgroundColor','yellow').html('测试链式操作');
console.log(a)




function $(option){
//判断是函数还是字符串
var type = typeof option;
//转化为小写
if(type.toLowerCase() == 'function'){
console.error('参数不能是函数')
}else if(type.toLowerCase() == 'string'){
var el = document.querySelectorAll(option);
// console.log(el)
}




var obj = {
css:function(attr,value){
for(var i = 0,item;item = el[i++];){
el[i -1].style[attr] = value;
}
return obj;
},
html:function(val){
for(var i = 0,item; item = el[i++];){
el[i -1].innerHTML = val;
}
return obj;
}
}


return obj;
}
</script>
唐伯虎電蚊香
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery—链式操作
ChibiMarukoChan的博客
06-04 399
以导航栏为例，单击不用的商品名称链接，显示对应的内容，同时高亮当前选择的商品。 HTML 代码如下： <div class="box"> <ul class="menu"> <li class="level1"> <a href="#none">衬衫</a> <ul class="le...
jQuery对象的链式操作
网站开发初中级代码参考-转载
03-22 152
jQuery对象的链式操作 首先来看一个例子： $(“#myphoto”).css(“border”,”solid 2px#FF0000”).attr(“alt”,” good”); 对一个jQuery对象先调用了css()函数修改样式，然后使用attr()函数修改属性，这种调用方式象链一样，所以称为“链式操作”。 链式操作能够让代码变得简洁，因为往往可以在一条语句中实现以往多条语句才能完...
jQuery(二)链式操作
a3060858469的博客
04-26 1139
$(".level>a").click(function(){ $(this).addClass("current") 给当前的元素添加 current样式 .next().show() 下一个元素显示 .parent().siblings().children("a").removeClass("current") 父元素的同辈元素的子
模仿JQ实现函数链式操作
weixin_30933531的博客
04-10 108
// 字面量写法 var obj={}; obj.a=function(){ console.log("a"); return this; }; obj.b=function(){ console.log("b"); return this; }; obj...
jquery链式操作
极客神殿
01-29 1044
jquery链式调用 - 层级菜单示例 jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写： $('#div1') // id为div1的元素 .children('ul') //该元素下面的ul子元素 .slideDown('fast') //高度从零变到实际高度来显示ul元素 .parent() //跳到ul的父元素，也就是id为div1的元素...
仿照支付宝账单界面--listview分组显示 用来做！发！财树充值交易明细-附件资源
03-05
仿照支付宝账单界面--listview分组显示 用来做！发！财树充值交易明细-附件资源
python-turtle实现模拟按钮可仿照示例代码进行更改-原创
02-16
如果在区域内，就执行相应的操作，例如弹出消息、执行函数等。 4. **做出反应**：当鼠标点击在按钮上，我们可以设计按钮的反馈效果，比如改变颜色、显示信息，或者执行预设的程序代码。 下面是一个基本的Python ...
css3模拟jq点击事件的实例代码
01-21
今天是一个css3模拟jq点击事件，因为我发现，css3中没有类似于，js的点击事件，那么，可不可以仿照jq的效果，类似的做一个呢？主要用到,input里面的radio 单选按钮，然后后面跟一个a标签，让radio覆盖在a上，那为...
基于Python的Flask的仿照知乎的网站-毕业设计源码+使用文档（高分优秀项目）.zip
最新发布
04-15
基于Python的Flask的仿照知乎的网站-毕业设计源码+使用文档（高分优秀项目）.zip基于Python的Flask的仿照知乎的网站-毕业设计源码+使用文档（高分优秀项目）.zip 【备注】 1、该资源内项目代码都经过测试运行成功，...
swift-纯代码＋xib写的高仿百度糯米
08-15
在这个项目中，“百度章鱼”可能是仿照百度糯米的一个功能模块，使用Objective-C（OC）编写，这表明项目可能包含一部分遗留代码或者为了兼容性而保留的OC代码。Swift与OC可以无缝集成，使得在同一个项目中混用两种...
js实现jQuery的简单方法和链式操作
qq_61538679的博客
05-07 456
好了，言归正传，我们来分析上面jQuery的代码。 $(“.box1”) 就是实现了选择器的功能。 $(“.box1”).click 就是选择器 + 调用click方法 最后在click里面传入函数。 第一个小目标就是自己封装js来实现上面代码的功能。我们分三步走战略来实现。 js实现 $(“.box1”) 实现 $(“.box1”).click() 实现 $(“.box1”).click( ( ) => { console.log(“123”) } ) 第一步
JQ选择的链式写法
qq_35918095的博客
10-20 1345
1 2 3 //6.JQ强大的好处：可以实现链式写法 //执行玩JQ的方法仍然会返回一个JQ对象 $("#div1").addClass("box").css({width:100,height:100,backgroundColor:"red"}); var a=(function(){ function fn1(){ console.log("fn1
jquery链式写法 java_jQuery链式操作
weixin_35510761的博客
02-26 181
两个问题1.jQuery的链式操作是如何实现的？2.为什么要用链式操作？大家认为这两个问题哪个好回答一点呢？链式操作原理相信百度一下一大把，实际上链式操作仅仅是通过对象上的方法最后return this把对象再返回回来，对象当然可以继续调用方法啦，所以就可以链式操作了。那么，简单实现一个：//定义一个JS类functionDemo() {}//扩展它的prototypeDemo.prototype...
链式代码
本事记的富伟徐
10-08 205
jQuery入门[4]－链式代码 jQuery入门[1]－构造函数 jQuery入门[2]－选择器 jQuery入门[3]－事件 jQuery入门[4]－链式代码 jQuery入门[5]－AJAX jQuery入门[6]－动画 jQuery另一个很令人惬意的地方是，一般的代码都是一行一行写，jQuery的代码可以一串一串写。 这一点，在前面的文章中已经介绍过了。 直接来一个De...
链式操作风格（jQuery）
lixielong的专栏
12-13 262
链式操作风格 #menu { width:300px; } .has_children{ background : #555; color :#fff; cursor:pointer; } .highlight{ color : ...
jq的show方法及jq的链式操作
qq_31459039的博客
12-11 704
定义和用法 show() 方法显示隐藏的被选元素。 注意：show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）。 提示：如需隐藏元素，请查看 hide() 方法。 语法      $(selector).show(speed,easing,callback) 参数 描述 ...
jq链式写法浅析
freshing123的博客
06-09 1647
还是说下转自http://www.jb51.net/article/33342.htm两个问题 1.jQuery的链式操作是如何实现的？ 2.为什么要用链式操作？ 大家认为这两个问题哪个好回答一点呢？ 链式操作 原理相信百度一下一大把，实际上链式操作仅仅是通过对象上的方法最后 return this 把对象再返回回来，对象当然可以继续调用方法啦，所以就可以链式操作了。那么，简
jQuery的链式调用原理，Promise的链式调用，this的问题
Lawliet
08-16 7086
最近被问到这个问题，jq的链式调用原理，当时比较懵=。=，毕竟现在jq接触的机会变很少了。 jq的链式调用 jq的链式调用其实就是比如我们在选择dom的时候， $('input[type=&quot;button&quot;]') .eq(0).click(function() { alert('点击我!'); }).end().eq(1) .click(function() { ...
jq的链式调用
sunlizhen的专栏
10-19 1606
1. jq的链式调用实际上是通过return this的形式来实现的；通过对象上的方法，最后加上return this，把对象再返回来，对象就可以再继续调用方法，实现链式操作了； 2. 链式调用的好处：节省代码量，代码看起来更优雅。 3. 链式调用的问题：所有对象的方法返回的都是对象本身，也就是说没有返回值，所以这种方法不一定在任何环境下都适合。...
仿照Jetty的Selvet-Proxy写一段代码,要求在在filter中实现异步的Selvet代理
06-03
好的，我可以为您提供一段基于Java语言的代码，实现异步的Servlet代理。 首先，我们需要在web.xml中配置一个过滤器(Filter)，用于拦截所有的HTTP请求。在这个过滤器中，我们可以使用Java Servlet API提供的异步特性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值