2021-05-10

最新推荐文章于 2024-09-16 08:47:17 发布

tikongshu

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量50

点赞数 1

分类专栏：前端文章标签： javascript jquery html html5

本文链接：https://blog.csdn.net/tikongshu/article/details/116607120

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

菜鸟教程打赏的html和javascript解析同新手第一篇试水

<```+ 回车直接出代码块>

<ctrl+b加粗>

<*** + 回车直接出分割线>

js/css引用

js文件的引用：

1.jquery等大包的引用要在自己写的小js文件之前，(因为自己写的js有可能调用了 jquery的方法)

2.引用语句

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script src="ds.js" type="text/javascript"></script>

可以（常用） 出现在</body>前也可以出现在head里

如果非引用也可以以<script></script>这种形式出现

css文件的引用

固定引用只能：<link rel="stylesheet" type="text/css" href="ds.css"> 出现在head里

如果非引用也可以以<style></style>这种形式出现在head里(常用)或者body里

解析

html

onclick 事件

实例

当按钮被点击时执行javascript代码：

<button οnclick="myFunction()">Click me</button>

javascript:void(0)的含义

void(0)含义

死链接不跳转虽然不跳转但是可以对当前页面进行某些操作改变页面类似于页内执行

扩展

void关键字介绍

　　首先，void关键字是javascript当中非常重要的关键字，该操作符指定要计算或运行一个表达式，但是不返回值。

　　语法格式：

void func()
void(func())

实例1

　　当点击超链接时，什么都不发生

<!-- 1.当用户链接时，void(0)计算为0,用户点击不会发生任何效果 -->
    <a href="javascript:void(0);">单击此处什么都不会发生</a><br>

实例2

　　执行void操作符当中的代码

<!-- 2.执行 void() 操作符中的代码 -->
    <a href="javascript:void(alert('还真点啊你，真听话！！！哈哈哈！！！'))">点我弹出警告框!!!</a><br>
    <a href="javascript:void(console.log('还真点啊你，真听话！！！哈哈哈！！！'))">点我输出到控制台!!!</a><br>

HTML < a > 标签

超链接用

< p>标签

标记一个段落

单选框

这里的单选标签是自己css+js写的并不是系统自带的系统自带的是

<input type="text" name="lname" />

滤镜

class= hide_box 的空div块是用来给到半透明的后面用css来做到半透明

当时B站的黑白:

filter: grayscale(1);

加在html的css里

html{filter: grayscale(1);}

源代码:

<!DOCTYPE html>
<html><head><script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head><body><p><a href="javascript:void(0)" οnclick="dashangToggle()" class="dashang" title="打赏，支持一下">打赏</a></p>
<div class="hide_box"></div>
<div class="shang_box">
    <a class="shang_close" href="javascript:void(0)" οnclick="dashangToggle()" title="关闭"><img src="https://static.runoob.com/images/dashang/close.jpg" alt="取消"></a>
    
    <div class="shang_tit">
        <p>感谢您的支持，我会继续努力的!</p>
    </div>
    <div class="shang_payimg">
        <img src="https://static.runoob.com/images/dashang/alipayimg.png" alt="扫码支持" title="扫一扫">
    </div>
        <div class="pay_explain">扫码打赏，你说多少就多少</div>
    <div class="shang_payselect">
        <div class="pay_item checked" data-id="alipay">
            <span class="radiobox"></span>
            <span class="pay_logo"><img src="https://static.runoob.com/images/dashang/alipay.jpg" alt="支付宝"></span>
        </div>
        <div class="pay_item" data-id="weipay">
            <span class="radiobox"></span>
            <span class="pay_logo"><img src="https://static.runoob.com/images/dashang/wechat.jpg" alt="微信"></span>
        </div>
    </div>
    <div class="shang_info">
        <p>打开<span id="shang_pay_txt">支付宝</span>扫一扫，即可进行扫码打赏哦</p>
        <p>Powered by <a href="http://www.runoob.com" target="_blank" title="菜鸟教程">RUNOOB.COM</a>，学的不仅是技术，更是梦想！！！</p>
    </div>
</div>
<style>.content{width:80%;margin:10px auto;}
.hide_box{z-index:999;filter:alpha(opacity=50);background:#666;opacity: 0.5;-moz-opacity: 0.5;left:0;top:0;height:99%;width:100%;position:fixed;display:none;}
.shang_box{width:540px;height:540px;padding:10px;background-color:#fff;border-radius:10px;position:fixed;z-index:1000;left:50%;top:50%;margin-left:-280px;margin-top:-280px;border:1px dotted #dedede;display:none;}
.shang_box img{border:none;border-width:0;}
.dashang{display:block;width:100px;margin:5px auto;height:25px;line-height:25px;padding:10px;background-color:#E74851;color:#fff;text-align:center;text-decoration:none;border-radius:10px;font-weight:bold;font-size:16px;transition: all 0.3s;}
.dashang:hover{opacity:0.8;padding:15px;font-size:18px;}
.shang_close{float:right;display:inline-block;}
        .shang_logo{display:block;text-align:center;margin:20px auto;}
.shang_tit{width: 100%;height: 75px;text-align: center;line-height: 66px;color: #a3a3a3;font-size: 16px;background: url('//static.runoob.com/images/dashang/cy-reward-title-bg.jpg');font-family: 'Microsoft YaHei';margin-top: 7px;margin-right:2px;}
.shang_tit p{color:#a3a3a3;text-align:center;font-size:16px;}
.shang_payimg{width:140px;padding:10px;border:6px solid #EA5F00;margin:0 auto;border-radius:3px;height:140px;}
.shang_payimg img{display:block;text-align:center;width:140px;height:140px; }
.pay_explain{text-align:center;margin:10px auto;font-size:12px;color:#545454;}
.radiobox{width: 16px;height: 16px;background: url('https://static.runoob.com/images/dashang/radio2.jpg');display: block;float: left;margin-top: 5px;margin-right: 14px;}
.checked .radiobox{background:url('https://static.runoob.com/images/dashang/radio1.jpg');}
.shang_payselect{text-align:center;margin:0 auto;margin-top:40px;cursor:pointer;height:60px;width:280px;}
.shang_payselect .pay_item{display:inline-block;margin-right:10px;float:left;}
.shang_info{clear:both;}
.shang_info p,.shang_info a{color:#C3C3C3;text-align:center;font-size:12px;text-decoration:none;line-height:2em;}</style><script>$(function(){
    $(".pay_item").click(function(){
        $(this).addClass('checked').siblings('.pay_item').removeClass('checked');
        var dataid=$(this).attr('data-id');
        $(".shang_payimg img").attr("src","https://static.runoob.com/images/dashang/"+dataid+"img.png");
        $("#shang_pay_txt").text(dataid=="alipay"?"支付宝":"微信");
    });
});
function dashangToggle(){
    $(".hide_box").fadeToggle();
    $(".shang_box").fadeToggle();
}</script></body></html>

js部分

js要做的

1.单选框切换 2.支付宝扫一扫--->微信

3.点击打赏后的渐变动画 (这里他直接用了jq里自带的动画)

1.单选框切换(类中checked属性的赋予与删除)

jQuery 属性操作 - addClass() 方法

addClass() 方法向被选元素添加一个或多个类。

该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。

jQuery - siblings() 方法

实例

查找每个 p 元素的所有类名为 "selected" 的所有同胞元素：

$("p").siblings(".selected")

本题中是

$(this).addClass('checked').siblings('.pay_item').removeClass('checked');

(当点击时)给被点击的div块添加class= checked 并删除原来有checked的div的

jquery $()的几种用法

目前了解的:

传入一个选择器字符串，获得这个选择器对应的dom内容，保存在[]中，也就是俗称的jQuery对象。例如 dom理解为html对象就行了

$('#id')

$(‘.class’)

$(‘tag’)

$( +js对象 )

是把js对象封装成jquery对象以使用jq方法

js 中的 this就是返回当前js对象

3.$(+function(){})

这个匿名函数在网页载入完成后开始执行

jq - .attr()

attribute - 属性

两个情况单参数和二参数

单参数:

返回被选元素的属性值。

语法

$(selector).attr(attribute)

参数	描述
attribute	规定要获取其值的属性。

二参数:

设置被选元素的属性和值。

语法

$(selector).attr(attribute,value)

参数	描述
attribute	规定属性的名称。
value	规定属性的值。

例如

 $("img").attr("width","180");

DOM

dom理解为html对象就行了

DOM对象就是html的规范对象 , 可以在各大主流语言使用 js java python等

内自带很多方法可以使用如.innerhtml .style

css? css爬

滤镜