JavaScript 大佬速成 - 3 HTMLDOM(部分)&&jQuery(部分)

我是李君子

前言
我还是那么喜欢前言(bushi
前两个帖子我们已经把JavaScript基础所实用的东西都讲完了 至于杂七腊八的咱们也没有必要讲
所以我们就直接说HTMLDOM吧

HtmlDom

HTMLDOM应该属于是每一个js大佬都应该会的
而且其非常简单好学
实用性强 学完后可以轻松的掌握网页事件
制作交互 设计ui等等等等

1. 
   
2. //由于DOM太多了 我只挑好用的讲
   
3. document.write("写的内容")
   
4. //将内容打印到网页上( HTML正常显示 )
   
5. document.Element.innerHTML("内容")
   
6. //替换掉Element所指向的元素的内容为内容并返回内容
   
7. //当不包含括号和参数时此函数代表一个值 即元素的文字内容
   
8. document.createElement("元素")
   
9. //创建一个元素
   
10. document.getElementById("元素id")
    
11. //指向拥有特定id的元素
    
12. document.Element.appendChild("内容")
    
13. //在Element元素结尾插入内容
    
14. document.Element.prepend("内容")
    
15. //在Element开头插入内容
    
16. //...
    
17. //这样写我们会发现并不整齐
    
18. //我们可以这样写
    
19. var element = document.Element
    
20. //之后可以用element代替document.Element的拼写
    
21. //你可以通过声明式来更改网页元素内容
    
22. //每个元素都是一个对象
    
23. element.id = "id"
    
24. //声明element的id属性为id
    
25. element.style.color = "blue"
    
26. //声明或更改element所指代的元素的样式的字颜色为blue
    
27. var element_length = element.innerHTML.length
    
28. //代表element所指代元素内容的长度
    
29. //var element_length = document.Element.innerHTML.length
    
30. //...
    
31. //在事件的监听上我们可以用document.eventListeners函数来监听 但是这不是最优选
    
32. //HTML为我们提供了很多的可选元素事件属性
    
33. document.write(`
    
34. <button onclick="alert('#')">按我执行alert代码</button>
    
35. <a onload="alert('元素加载完毕')">我会在元素加载好后弹出弹窗</a>
    
36. ...具体请看文档
    
37. `)
    

复制代码

jQuery事件

1. 
   
2. <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
   
3. <!--这是jQuery的CDN-->
   

复制代码

有了jQuery 我们就不用费劲吧啦的写那么多的代码了 而且可以让你更方便的完成DOM操作

1. 
   
2. //准备
   
3. $(document).ready( function(){
   
4.   //代码
   
5.   $("#button").click( function(){
   
6.     alert("你点击了id为button的元素");
   
7.     $("#button").fadeToggle(1000);
   
8.     //id为button元素1秒淡出
   
9.   });
   
10. $(".button").click( function(){
    
11.     alert("你点击了Class为button的元素")
    
12.     var txt = $("<i></i>").text("love");
    
13.     //创建txt元素并给其纯文字值为love text是文字 html是超文本 val是输入内容
    
14.     $("img").after(txt);
    
15.     //在img元素后追加文本 after是后 before是前
    
16.   });
    
17. });
    

复制代码

事件列表 - 由菜鸟教程提供


jQuery捕获

1. 
   
2. $(Element).text(设置文字,回调函数).after(添加超文本在结尾).before(添加超文本在开头)
   
3. //回调函数指设置文字完成后执行的函数 把函数连接起来的叫做链
   
4. var element = $(Element).html()
   
5. //获取Element指代元素的html
   
6. var eleval = $(Element).val()
   
7. //捕获element所指代的输入框的值
   
8. $(Element).remove();
   
9. //删除Element所指代的元素及其子元素 remove()还可以接受一个指代元素参数进行过滤(删除那个元素
   
10. $(Element).empty();
    
11. //删除被选元素的子元素
    
12. $(Element).css(css格式元素内容)
    
13. //css()方法用于设置或获取元素css内容
    
14. /*除了上述方法我们还可以用这些方法来修改css
    
15. .addClass(类名称) 向所指元素添加一个或多个类
    
16. .removeClass(类名称) 向所指元素删除一个或多个类
    
17. .toggleClass(类名称) 对被选元素进行添加/删除类的切换操作
    
18. ...
    
19. 本教程不全 因为我懒
    
20. 此外还有
    
21. width()
    
22. height()
    
23. innerWidth()
    
24. innerHeight()
    
25. outerWidth()
    
26. outerHeight()
    
27. 这些用来设置和捕获元素尺寸
    
28. */
    

复制代码

jQuery ajax
Ajax用来操作请求
是极其重要的部分

1. 
   
2. $("#div").load("load.txt")
   
3. //将load.txt里的所有文本添加到id为div的元素里
   
4. //load是极强的ajax方法 他可以获取指定文件的内容 添加到网页上
   
5. $("#div").load("load.txt p")
   
6. //将load.txt中的p元素文本添加到id为div的元素里
   
7. 
   
8. $.get( "load.php",
   
9. function(){
   
10.   alert(data)
    
11. });
    
12. //get用于向后端获取数据 本示例请求了load.php返回了data内容
    
13. /*格式
    
14. $.get(URL,callback);
    
15. 或
    
16. $.get( URL [, data ] [, callback ] [, dataType ] )
    
17. URL：发送请求的 URL字符串
    
18. data：可选的 发送给服务器的字符串或 key/value 键值对
    
19. callback：可选的，请求成功后执行的回调函数。
    
20. dataType：可选的，从服务器返回的数据类型 默认：智能猜测（可以是xml, json, script, 或 html）
    
21. */
    
22. 
    
23. .post( "post.php",
    
24. {
    
25.   num : bigint(1145141919),
    
26.   //传递一个超长整数 bigint可以简写为数字+n的格式
    
27.   arr : [1,2,3]
    
28.   //可以传递非原始类型的值
    
29. }, function(){
    
30.   /*回调函数*/
    
31. });
    
32. //post请求允许提交信息
    
33. /*格式
    
34. $.post(URL,callback);
    
35. 或
    
36. $.post( URL [, data ] [, callback ] [, dataType ] )
    
37. URL：发送请求的 URL字符串
    
38. data：可选的，发送给服务器的字符串或 key/value 键值对
    
39. callback：可选的，请求成功后执行的回调函数
    
40. dataType：可选的，从服务器返回的数据类型 默认：智能猜测（可以是xml, json, script, 或 html）
    
41. */
    

复制代码

jQuery Cookie
使用jQuery Cookie需要装载Cookie插件

1. 
   
2. CDN::
   
3. <script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>
   
4. <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
   

复制代码

1. 
   
2. //创建一个会在关闭网页后消失的Cookie
   
3. $.cookie('name', 'value');
   
4. //创建了一个name为value的短期cookie
   
5. 
   
6. $.cookie('name', 'value', { expires: 7 });
   
7. //上面的cookie会在7天后过期
   
8. 
   
9. $.cookie('name', 'value', { expires: 7, path: '有效线路' });
   
10. //设置cookie并设置有效线路
    
11. 
    
12. $.cookie()
    
13. //读取所有cookie并返回值↑
    
14. 
    
15. $.cookie('name');
    
16. //读取名字为name的cookie
    
17. /*
    
18. {}里的可选内容
    
19. domain: 'example.com'
    
20. 默认值：创建 cookie 的网页所拥有的域名
    
21. 
    
22. secure: true
    
23. 默认值：false。如果为 true，cookie 的传输需要使用安全协议（HTTPS）
    
24. */
    

复制代码

结语
累死我了 摊
*/

我是李君子

写这么多累倒了
滩

克里昂一世

我是李君子 发表于 2024-2-7 12:33
写这么多累倒了
滩

支持！！！

LineXic

支持一下