开发工具：
hbuilder webstrom(推荐) dreamweaver idea notepad++
**
使用：
引入jquery
引入js库时
必须是 
不能：
常见错误：
html中 如果出错，不提示！
如果调试工具（F12）没有错误提示，但显示效果不一致，考虑html错误
$(document).ready(function(){})：
初始化函数， 当网页中的dom元素（不包含图片、视频、资源）全部加载完毕后 立刻执行
onload :
javascript，初始化函数，当网页中的dom元素（关联图片、视频、资源）全部加载完毕后 立刻执行
jquery初始化函数简化：
$(function(){...});
$等价于jQuery
dom模型：
**将html xml等文档结构的标签语言 看成dom模型**
dom节点有三种类型：
元素节点
-
…
属性节点 ：title src alt …
文本节点： 文本节点
Dom对象：
以上三种节点类型的具体对象 就是Dom对象。
使用层面： 凡是JavaSCript能够直接操作的对象，就是Dom对象。
例如，var title = document.getElementById("myTitile");通过js获取到的title对象 就是一个dom对象
（就是<p>对象）
jQuery对象：
凡是jQuery能够直接操作的对象，就是jQuery对象。
例如：var $title = $("#myTitile") ; 通过jquery获取到的 $title 就是一个jquery对象。
同样一个元素，即可以成为一个dom对象（javascript对象），也可以成为一个jquery对象
注意：
dom对象 只适用于js的各种语法（函数、属性），jquery对象只用于jquery的各种语法（函数、属性）。
dom对象和jquery对象的各自独立。
例如
title 是dom对象，因此可以使用js属性或方法 title.innerHTML
$title 是jquery对象，因此可以使用jquery属性或方法 $title.html()
建议：
js对象 直接写title
jquery 加上$，例如$title
dom对象和jquery对象的转换：
title.innerHTML;
tile ->$title
$title.html();
$title->title
dom对象->jquery对象 :jquery工厂， $(dom对象)
jquery对象 ->dom对象：
基础：jquery对象默认是一个数组 或集合 ；dom对象默认是一个单独的对象
数组：jquery对象[0]
集合：jquery对象.get(0)
Jquery选择器：jquery根基
1基本选择器
标签选择器：
$(“标签名”)
$(“p”).html() 获取p标签对象，是jquery对象形式的
$(“p”).length
类选择器：
$(".class值")
id选择器
$("#id值")
并集(或)选择器 逗号,
$(".class值,#id值")
交集选择器（同时存在） 连续直接写
$(".class值#id值")
$(“p.myStyle”).html()：选中 即是p标签，并且class的值是myStyle
注意：不能出现歧义
错误写法 KaTeX parse error: Expected 'EOF', got '#' at position 40: …集选择器 在交接处 只能是.或#̲开头的选择器 全局选择器：选…("*")
2层次选择器（只取后面的那些元素）
相邻选择器 +
$(“选择器1+选择器2”)
同辈选择器 ~
$(“选择器1~选择器2”)
后代选择器 空格
$(“选择器1 选择器2”)
子代选择器 >
$(“选择器>选择器2”)
3属性选择器 [ … ]
$("[属性名]")
$("[class]") :选中全部元素中 有class属性的 元
$("[属性名=属性值]")
$("[class=xxx]")
$("[class=‘xxx’]")
$("[class!=a]") 不等于， 包含两种： 有class但值不是a, 没有class
$("[class^=a]") class以a开头的元素
(
"
[
c
l
a
s
s
("[class
("[class=a]") class以a结尾的元素
$("[class*=a]") class有a的元素
4过滤选择器 :
过滤选择器的一些方法 和其他函数类型，例如
(
"
u
l
>
l
i
:
f
i
r
s
t
"
)
等
价
于
("ul>li:first")等价于
("ul>li:first")等价于(“ul>li”).first()
有些不同，例如， 可以
(
"
u
l
>
l
i
:
o
d
d
"
)
；
错
误
("ul>li:odd") ；错误
("ul>li:odd")；错误(“ul>li”).odd();
a.基本过滤选择器（从0开始）
:first：最开头那一个
:last：最后那一个
:even：偶数
:odd:奇数
:eq(index)：第index个
:gt(index) : >index的全部元素
:lt(index): <index的全部元素
:not(选择器) :除了…以外
:header:选中所有的标题元素 h1 h2
:focus: 获取当前焦点的元素
5.可见性选择器
:visible ：选中所有可见的元素
:hidden：选中所有隐藏的元素
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery第一次使用</title>
<!-- 引入jquery -->
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<!-- 使用jquery -->
<script type="text/javascript">
// $()被称为jQuery工厂
/* $(document).ready(function(){
// jquery初始化函数,当网页中的dom元素圈闭加载完毕后，立刻执行
alert("liugaugn");
});
$(function(){
// 上面的简化写法
alert("hello");
}); */
$(function(){
// 基本选择器
// alert($("p").length);
<!-- alert($("p").length);//$("p")基本选择器中的标签选择器 -->
// alert($(".myStyle").html());//$(".myStyle")基本选择器中的类选择器
// alert($("#myTitile3").html());//$("#myStyle3")基本选择器中id选择器
// alert($("#myTitile1,#myTitile3,.myStyle").length);//#myTitile1,#myTitile3,.myStyle用逗号(,)并集选择器
// alert($("*"));//$("*")全局选择器
// 层次选择器(只取后面的一个元素，前面的元素不考虑)
// alert($("#b+li").html());
// alert($("#b+li").length);//相邻选择器$("#b+li")加号(+)
// alert($("#b~li").html());
// alert($("#b~li").length);//同辈选择器$("#b~li")波浪线(~)
// alert($("body li").length);//后代选择器 空格 $("body li")
// alert($("ul>li").length);//子代选择器>$("ul>li")
// 属性选择器[....]
// alert($("[class]").html());
// alert($("[id]").length);//$("[属性名]") $("[id]")
// alert($("[class=xxx]").html());//$("[class=xxx]") $("[属性名=属性值]")
// alert($("[class!=xxx]").length);// 属性名不等于属性值的 $("[属性名!=属性值]")
// (包含两种 有class但是值不是xxx，另外一种就是没有class<不建议使用>)
// alert($("[class^=x]").length); //class中以x开头的元素
// alert($("[class$=x]").length);//class中以x结尾的元素
// alert($("[class*=y]").length);//class中有y的元素
// 过滤选择器 :
// 基本过滤选择器 1. first:最开头的一个（从0开始，所以第一个是偶数）2.last:最后一个 3. even:偶数 4. :odd:奇数
// 5. eq(index):第index个 6. gt(index): >index的全部元素 (greate then) 7.lt(index): <index的全部元素(less then)
// 8. not(选择器): 除了...以外的 9. header: 选中所有的标题元素 h1 h2 10. focus: 获取焦点元素(光标)
// alert($("ul>li").first().html());//这是first方法,有的时候方法和选择器是等价的
// alert($("ul>li:first").html());
//.first()最开头的一个（从0开始，所以第一个是偶数）
// alert($("ul>li:last").html());//.last()最后一个
// alert($("ul>li:eq(2)").html());//eq(index):第index个
// alert($("ul>li:odd").length); //odd:奇数
// alert($("ul>li:odd")[1].innerHTML);//此时$("ul>li:odd")[1] jQuery对象就变成dom对象.
// alert($($("ul>li:odd")[1]).html());//$($("ul>li:odd")[1])是将dom对象再转换成jquery对象
// alert($("ul>li:gt(2)").length);//gt(index): >index的全部元素 (greate then)
// alert($("ul>li:lt(2)").length);//lt(index): <index的全部元素(less then)
// alert($("li:not(ul>li:eq(2))").length);//not(选择器): 除了...以外的
// $(":header").css("background-color","gray");//s设置css样式通过$(":header")选择器拿到h1 ,h2....
// $("input:focus").css("background-color","yellow");
//可见性选择器 1. :visible: 选中所有可见的元素 2. :hidden:选中所有隐藏的元素
// alert($(":visible").length);
// alert($(":hidden").length);
});
// function test()
// {
// $("input:focus").css("background-color","yellow");//focus: 获取焦点元素(光标)
// }
</script>
</head>
<body>
id<input type="text" /><br />
usename<input type="text" />
<!-- <input type="button" value="测试" onclick="test()" /> -->
<h1>h1h1h1</h1>
<h2>h2h2h2h1h1h1</h2>
<h4>h3h3h3h4h5h1h1</h4>
<p id="myTitile1" >color</p>
<p class="myStyle" >color222</p>
<p class="xxx" >color543</p>
<p class="yyx" >color6663</p>
<p id="myTitile3">color3333</p>
<ul>
<li>aaa</li>
<li id="b">bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
<li>ttt</li>
</ul>
</body>
</html>
230
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
