Jquery入门

mb60c1cbfd574ee 2021-07-20 04:20:06
Jquery


1.在jquery中$就是jQuery的一个简写形式,$(“#foo”)和Jquery(“#foo”)是等价的,

2.

$(document).ready(function () {
// 语句
});
等价于
$(function(){
//语句
})
3.
<option value='1068'>mall</option>
.value 取的是1068
.text是mall
4.
DOM(Document Object Model)文档对象模型
HTML可描述为一颗dom树
5.
$("#foo").html() 这段代码等价于
document.getElementbyId("foo").innerHTML
6.选择器中含有"." "#"  "(" 或"]"等特殊字符需要进行转义
例如  HTML代码如下:
<div id ="id#b">bb</div>
<div id = "id[1]">cc</div>
如果按照普通方式来获取,例如:
$('#id#b'); $('#id[1]')
以上代码不能正确获取到元素,正确的写法如下:
$('#id\\#b') 转义特殊字符#  $('#id\\[1\\]') 转义特殊字符[]
-------------------------------------------------------------------------------------------------------------------



 

---------------------------------------------------------------------------------------------------------------------------------------------------------

 

$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
<p1>点我不会消失。</p1>
<p>点我消失!</p>
<p>点我也消失!</p>

 $("p")和<p>是对应的

 

------------------------------------------------------------------------------------------------------------------------------------------------------------

$(document).ready(function(){
$("button").click(function(){
$(this).hide();
});
});
<body>
<button>点我</button>
</body>

 

button是按钮

-----------------------------------------------------------------------------------------------------------------------------------------------------

演示 jQuery 的 hide() 函数,隐藏所有 <p> 元素。

 

$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>

 

点击点我,这是一个段落和这是另一个段落将会隐藏。

--------------------------------------------------------------------------------------------------------------------------------------------------------

 

$(".test").hide()

演示 jQuery 的 hide() 函数,隐藏所有 class="test" 的元素。

 

<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
<body>
<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body>

 

点击点我,这是一个标题和这是一个段落将会被隐藏

---------------------------------------------------------------------------------------------------------------------------------------------------------

$("#test").hide()

演示 jQuery 的 hide() 函数,隐藏 id="test" 的元素。

 

<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
</body>


 

点击点我,这是另外一个段落将被隐藏

-----------------------------------------------------------------------------------------------------------------------------------------------------

dblclick() 双击鼠标    mouseenter() 鼠标移到此处触发事件     mouseleave() 鼠标离开触发事件    mousedown()鼠标按下触发 事件

jQuery mouseup()鼠标在段落松开触发 事件

---------------------------------------------------------------------------------------------------------------------------------------------------

使用jQuery val() 方法获取表单的字段值。

<p>名称: <input type="text" id="test" value="菜鸟教程"></p>

$("#test").val()   其值为菜鸟教程

----------------------------------------------------------------------------------------------------------------------------------------------------------

jQuery attr() 方法获取属性值。

 

<script>
$(document).ready(function(){
$("button").click(function(){
alert($("#runoob").attr("href"));
});
});
</script>
<body>
<p><a href="http://www.runoob.com" id="runoob">菜鸟教程</a></p>
<button>显示 href 属性的值</button>
</body>

点击显示href属性的值将会弹出http://www.runoob.com

 

------------------------------------------------------------------------------------------------------------------

.txt()设置文本    .html()设置html     .val()设置值

--------------------------------------------------------------------------------------------------------------------

jQuery append()
在选取元素的末尾添加内容

 

<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>追加文本</b>。");
});
$("#btn2").click(function(){
$("ol").append("<b>追加列表项</b>");
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>
</body>

点击以后

 

jQuery prepend()
在选取元素的开头添加内容

jQuery append() -插入多个元素
创新新的 text/HTML 元素, jQuery 和 JavaScript/DOM。添加在新元素文本后。

 

function appendText(){
var txt1="<p>文本。</p>"; // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
}
</script>
</head>
<body>
<p>这是一个段落。</p>
<button οnclick="appendText()">追加文本</button>
</body>

jQuery after() 和 before()
在选取元素的前后添加 HTML元素。

 

 

<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("img").before("<b>之前</b>");
});
$("#btn2").click(function(){
$("img").after("<i>之后</i>");
});
});
</script>
</head>
<body>
<img src="/images/logo.png" >
<br><br>
<button id="btn1">之前插入</button>
<button id="btn2">之后插入</button>
</body>

 

点击之后

remove()移除

empty()
移除选取元素的所有子元素

remove()使用参数

 

<script>
$(document).ready(function(){
$("button").click(function(){
$("p").remove(".italic");
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p class="italic"><i>这是另外一个段落。</i></p>
<p class="italic"><i>这是另外一个段落。</i></p>
<button>移除所有 class="italic" 的 p 元素。</button>

点击以后这是另外一个段落会消失

-----------------------------------------------------------------------------------------------------------------

parent()父元素

 

<script>
$(document).ready(function(){
$("span").parent().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<div class="ancestors">
<div style="width:500px;">div (曾祖父元素)
<ul>ul (祖父元素)
<li>li (父元素)
<span>span</span>
</li>
</ul>
</div>

li父元素会是红色,因为li是span的父节点

 

 

下面是find()的用法

 $("div").find("span").css({"color":"red","border":"2px solid red"});

则span将是红色

 

parents()则是他的父节点和爷爷节点全部包含进来

 

parentsUtil( )是直到的意思

 $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});

 

children()孩子接点

siblings()同胞

next()下一个节点

nextAll()后面所有的

nextUntil()直到

------------------------------------------------------------------------------------------------------------------------------------------

 

版权声明
本文为[mb60c1cbfd574ee]所创,转载请带上原文链接,感谢
https://blog.51cto.com/u_15265854/2894545

  1. Netty源码解析-概述篇
  2. Netty源码解析-概述篇
  3. Netty源码解析1-Buffer
  4. Netty源码解析1-Buffer
  5. Netty源码解析2-Reactor
  6. Netty源码解析2-Reactor
  7. Netty源码解析3-Pipeline
  8. Netty源码解析3-Pipeline
  9. Netty源码解析4-Handler综述
  10. Netty源码解析4-Handler综述
  11. Netty源码解析5-ChannelHandler
  12. Netty源码解析5-ChannelHandler
  13. Netty源码解析6-ChannelHandler实例之LoggingHandler
  14. Netty源码解析6-ChannelHandler实例之LoggingHandler
  15. Netty源码解析7-ChannelHandler实例之TimeoutHandler
  16. Netty源码解析7-ChannelHandler实例之TimeoutHandler
  17. Netty源码解析8-ChannelHandler实例之CodecHandler
  18. Netty源码解析8-ChannelHandler实例之CodecHandler
  19. Netty源码解析9-ChannelHandler实例之MessageToByteEncoder
  20. Netty源码解析9-ChannelHandler实例之MessageToByteEncoder
  21. 大数据面试题之Hbase系列
  22. 你可能需要的Kafka面试题与答案整理
  23. 你可能需要的Kafka面试题与答案整理
  24. 后起之秀Pulsar VS. 传统强者Kafka?谁更强
  25. 后起之秀Pulsar VS. 传统强者Kafka?谁更强
  26. 【大数据哔哔集20210123】别问,问就是Kafka最可靠
  27. 【大数据哔哔集20210123】别问,问就是Kafka最可靠
  28. 【大数据哔哔集20210124】有人问我Kafka Leader选举?我真没慌
  29. 【大数据哔哔集20210124】有人问我Kafka Leader选举?我真没慌
  30. 【大数据哔哔集20210117】Kafka 的高可靠性是怎么实现的
  31. 【大数据哔哔集20210117】Kafka 的高可靠性是怎么实现的
  32. Kafka Connect | 无缝结合Kafka构建高效ETL方案
  33. Kafka面试题总结(一)
  34. Kafka面试题总结(一)
  35. Kafka面试题整理(二)
  36. Kafka面试题整理(二)
  37. 基于Kafka Flink Redis的电商大屏实时计算案例
  38. 基于Kafka Flink Redis的电商大屏实时计算案例
  39. Google布隆过滤器与Redis布隆过滤器详解
  40. Google布隆过滤器与Redis布隆过滤器详解
  41. 【Java Web前端开发】前端框架 bootstrap+jquery+angularjs探索
  42. 关于Redis的几件小事 | 高并发和高可用
  43. 关于Redis的几件小事 | 高并发和高可用
  44. 关于redis的几件小事(一)redis的使用目的与问题
  45. 关于redis的几件小事(一)redis的使用目的与问题
  46. 阿里云Redis技术架构演进
  47. 阿里云Redis技术架构演进
  48. 阿里云Redis技术架构演进
  49. Flink实战(109):connector(十八)hdfs 读写(三)StreamingFileSink相关特性及代码实战
  50. Flink实战(110):flink-sql使用(十八)connector(十九)Flink 与 hive 结合使用(七) Flink Hive Connector 使用
  51. Flink实战(110):flink-sql使用(十八)connector(十九)Flink 与 hive 结合使用(七) Flink Hive Connector 使用
  52. Flink实战(111):flink-sql使用(十九)Flink 与 hive 结合使用(八)Hive Streaming 实战解析
  53. Flink实战(111):flink-sql使用(十九)Flink 与 hive 结合使用(八)Hive Streaming 实战解析
  54. Docker常用命令,这些都要会!
  55. 鸟哥的Linux私房菜学习之第九章笔记
  56. Java NIO之Channel(通道)
  57. Java NIO之拥抱Path和Files
  58. Redis changed its open source license, and many projects were no longer open source
  59. JDK 11 has entered the candidate release stage, and the official version is planned to be released on September 25
  60. [* *] the latest version of windows 10 hides Linux?