jQuery
2019-03-28 本文已影响2人
壹枕星河
jQuery 语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
jQuery 中所有选择器都以美元符号开头：$()
文档就绪事件
$(document).ready(function(){
// 开始写 jQuery 代码...
});
简洁写法（与以上写法效果相同）:
$(function(){
// 开始写 jQuery 代码...
});
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作
<body>
<div>123</div>
<div class="div1">456</div>
<div id="div2">789</div>
<p class="p1">qeq</p>
<p>xxx</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var div = $("div");
console.log(div);
// console.log(jQuery);
console.log($("div").eq(1));//选择第一个div
console.log($("div:eq(2)"));//选择第二个div
console.log($("div").html());//div的内容
console.log($("*"));//查找所有的元素
console.log($(this));//选取当前的HTML元素
console.log($("p.p1"));//选择class="p1"的p标签
console.log($("p:first"));//选择第一个p标签
console.log($("ul li:first"));//选择ul下的第一个li
$("p:first").dblclick(function(){
alert("双击！");
})
console.log($("div")[0]);//转换为原生js
console.log($("div").get(0));转换为原生js
$("div").eq(1).html("我QQ(#`O′)").addClass("box1").css("color","red");
var div2 = document.querySelector("#div2");
console.log($("div2"));//转换为jQuery
console.log($("ul").children(".two"));//ul下class="two"的li
console.log($("ul").find(".two"));//ul下的class="two"的所有元素
</script>
jQuery选择器.png
jQuery事件
jQuery事件.png
