JavaScript 大佬速成 - 3 HTMLDOM(部分)&&jQuery(部分)
前言我还是那么喜欢前言(bushi
前两个帖子我们已经把JavaScript基础所实用的东西都讲完了 至于杂七腊八的咱们也没有必要讲
所以我们就直接说HTMLDOM吧
HtmlDom
HTMLDOM应该属于是每一个js大佬都应该会的
而且其非常简单好学
实用性强 学完后可以轻松的掌握网页事件
制作交互 设计ui等等等等
//由于DOM太多了 我只挑好用的讲
document.write("写的内容")
//将内容打印到网页上( HTML正常显示 )
document.Element.innerHTML("内容")
//替换掉Element所指向的元素的内容为内容并返回内容
//当不包含括号和参数时此函数代表一个值 即元素的文字内容
document.createElement("元素")
//创建一个元素
document.getElementById("元素id")
//指向拥有特定id的元素
document.Element.appendChild("内容")
//在Element元素结尾插入内容
document.Element.prepend("内容")
//在Element开头插入内容
//...
//这样写我们会发现并不整齐
//我们可以这样写
var element = document.Element
//之后可以用element代替document.Element的拼写
//你可以通过声明式来更改网页元素内容
//每个元素都是一个对象
element.id = "id"
//声明element的id属性为id
element.style.color = "blue"
//声明或更改element所指代的元素的样式的字颜色为blue
var element_length = element.innerHTML.length
//代表element所指代元素内容的长度
//var element_length = document.Element.innerHTML.length
//...
//在事件的监听上我们可以用document.eventListeners函数来监听 但是这不是最优选
//HTML为我们提供了很多的可选元素事件属性
document.write(`
<button onclick="alert('#')">按我执行alert代码</button>
<a onload="alert('元素加载完毕')">我会在元素加载好后弹出弹窗</a>
...具体请看文档
`)
jQuery事件
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<!--这是jQuery的CDN-->
有了jQuery 我们就不用费劲吧啦的写那么多的代码了 而且可以让你更方便的完成DOM操作
//准备
$(document).ready( function(){
//代码
$("#button").click( function(){
alert("你点击了id为button的元素");
$("#button").fadeToggle(1000);
//id为button元素1秒淡出
});
$(".button").click( function(){
alert("你点击了Class为button的元素")
var txt = $("<i></i>").text("love");
//创建txt元素并给其纯文字值为love text是文字 html是超文本 val是输入内容
$("img").after(txt);
//在img元素后追加文本 after是后 before是前
});
});
事件列表 - 由菜鸟教程提供
jQuery捕获
$(Element).text(设置文字,回调函数).after(添加超文本在结尾).before(添加超文本在开头)
//回调函数指设置文字完成后执行的函数 把函数连接起来的叫做链
var element = $(Element).html()
//获取Element指代元素的html
var eleval = $(Element).val()
//捕获element所指代的输入框的值
$(Element).remove();
//删除Element所指代的元素及其子元素 remove()还可以接受一个指代元素参数进行过滤(删除那个元素
$(Element).empty();
//删除被选元素的子元素
$(Element).css(css格式元素内容)
//css()方法用于设置或获取元素css内容
/*除了上述方法我们还可以用这些方法来修改css
.addClass(类名称) 向所指元素添加一个或多个类
.removeClass(类名称) 向所指元素删除一个或多个类
.toggleClass(类名称) 对被选元素进行添加/删除类的切换操作
...
本教程不全 因为我懒
此外还有
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
这些用来设置和捕获元素尺寸
*/
jQuery ajax
Ajax用来操作请求
是极其重要的部分
$("#div").load("load.txt")
//将load.txt里的所有文本添加到id为div的元素里
//load是极强的ajax方法 他可以获取指定文件的内容 添加到网页上
$("#div").load("load.txt p")
//将load.txt中的p元素文本添加到id为div的元素里
$.get( "load.php",
function(){
alert(data)
});
//get用于向后端获取数据 本示例请求了load.php返回了data内容
/*格式
$.get(URL,callback);
或
$.get( URL [, data ] [, callback ] [, dataType ] )
URL：发送请求的 URL字符串
data：可选的 发送给服务器的字符串或 key/value 键值对
callback：可选的，请求成功后执行的回调函数。
dataType：可选的，从服务器返回的数据类型 默认：智能猜测（可以是xml, json, script, 或 html）
*/
.post( "post.php",
{
num : bigint(1145141919),
//传递一个超长整数 bigint可以简写为数字+n的格式
arr :
//可以传递非原始类型的值
}, function(){
/*回调函数*/
});
//post请求允许提交信息
/*格式
$.post(URL,callback);
或
$.post( URL [, data ] [, callback ] [, dataType ] )
URL：发送请求的 URL字符串
data：可选的，发送给服务器的字符串或 key/value 键值对
callback：可选的，请求成功后执行的回调函数
dataType：可选的，从服务器返回的数据类型 默认：智能猜测（可以是xml, json, script, 或 html）
*/
jQuery Cookie
使用jQuery Cookie需要装载Cookie插件
CDN::
<script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
//创建一个会在关闭网页后消失的Cookie
$.cookie('name', 'value');
//创建了一个name为value的短期cookie
$.cookie('name', 'value', { expires: 7 });
//上面的cookie会在7天后过期
$.cookie('name', 'value', { expires: 7, path: '有效线路' });
//设置cookie并设置有效线路
$.cookie()
//读取所有cookie并返回值↑
$.cookie('name');
//读取名字为name的cookie
/*
{}里的可选内容
domain: 'example.com'
默认值：创建 cookie 的网页所拥有的域名
secure: true
默认值：false。如果为 true，cookie 的传输需要使用安全协议（HTTPS）
*/
结语
累死我了 摊
*/ 写这么多累倒了
滩 我是李君子 发表于 2024-2-7 12:33
写这么多累倒了
滩
支持！！！ 支持一下 苦力怕论坛，感谢有您~
页: [1]