爱站程序员基地安装
jquery.com
3.0 下载至VScode jquery.min.js
再直接引入script。
1.执行需要准备
jQuery入口函数要等待页面DOM树加载完后执行
window.onload要等待所有的资源（DOM树/外部css/js链接、图片）都加在完毕后执行
$ is not found ==说明没有引入jQuery文件
jQuery对象命名最好带$
var $top-banner=$(\'.top-banner\');$top-banner. css(\' backgroundColor\',\' green\')
<script>$(document).ready(function(){$(\'div\').hide();})</script>$(function(){$(\'.top-banner\').hide();})
2.自执行函数/匿名函数
- 写法1：(函数)(实参)
(function(i){console.log(\'kawasaki\')}）(i)
- 写法2：(函数(实参))
(function (i){console.log(\"kawasaki\")}(i))
2.DOM对象和jQuery对象转换
- DOM对象转换为jQuery对象
var div1=document. getElementById(\"one\");var $div1=$(div1);```- jQuery对象转换为DOM对象
var divs=divs=divs=(’ div’);
-
var div1=$divs[0];
-
var div2=$divs.get(1);
## 3.设置获取id为div1这个标签的文本，会获取到这个标签中所有文本，包括后代元素的文本。$(\'#div1\').text()$(\'#div1\').text(\'新设置的文本\')草拟吗我手伤了打字好疼。获取标签为div的元素的文本，包含了多了个DOM元素的jQuery对象，通过text（）方法获取文件会把所有DOM元素获取到设置多样式$(\'# div1\"). css({width:300,\'height\':\'300px\',backgroundColor:\'green\',//\'background-color\':\'red\',});
2.DOM对象和jQuery对象可以混合使用，选择器用DOM事件用jQuery反之亦可
var btns = document.getElementsByTagName(\"button\");btns[1].onclick = function(){$(\"body\")[0].style.backgroundColor = \'black\';//关灯}$(btns[0]).click(function(){$(\"body\").css(\'backgroundColor\',\'white\');//开灯})
3.获取标签为div的元素们的样式
$(function () {
KaTeX parse error: Expected \’EOF\’, got \’#\’ at position 3: (\’#̲ getBtn\’ ). cli…(’# div1’). css(’ backgroundColor’));
});
});
获取包含了多个dom元素的jQuery对象的样式，只能返回第一个 dom对象的样式值。
console.log（$（‘div’）.css（‘width’））；//‘200px’
设置样式：css（样式名，样式值）是行内样式；
$（\'#setBtn\'）.click（function（）{$（\'#div1\'）.css（\'width\'，\'300px\'）；$（\'#div2\'）.css（\'width\'，300）；//不写冒号不写单位，写冒号写单位
设置多祥式
$（\”#div1’）.css（{
width：300，
height’：‘300px’,
backgroundColor：‘green’;
});
3.选择器
- 交集并集选择器
| 例子 | 描述 | |
|---|---|---|
| 并集选择器 | $(“div,p,li”); | 使用逗号分隔，只要符合条件之一就可。 |
| 交集选择器 | $(“div.redClass”); | 获取class为redClass的div元素 |
- 过滤选择器
| 例子 | 描述 | |
|---|---|---|
| children(selector) | $(“ul”).children(“li”) | 相当于$(“ul>li”)，子类选择器 |
| find(selector) | $(“ul”).find(“li”); | 相当于$(“ul li”),后代选择器 |
| siblings(selector) | $(“#first”).siblings(“li”); | 查找兄弟节点，不包括自己本身。 |
| parent() | $(“#first”).parent(); | 查找父亲 |
| eq(index) | $(“li”).eq(2); | 相当于$(“li:eq(2)”),index从0开始 |
| next() | $(“li”).next() | 找下一个兄弟 |
| prev() | $(“li”).prev() | 找上一次兄弟 |
- 筛选选择器(方法)
| 例子 | 描述 | |
|---|---|---|
| :eq（index） | $(“li:eq(2)”).css(“color”, ”red”); | 获取到的li元素中，选择索引号为2的元素，索引号index从0开始。 |
| :odd | $(“li:odd”).css(“color”, ”red”); | 获取到的li元素中，选择索引号为奇数的元素 |
| :even | $(“li:even”).css(“color”, ”red”); | 获取到的li元素中，选择索引号为偶数的元素 |
3.选择器
$(\".hidebtn\").click(function(){$(\"div\").hide(1000,\"linear\",function(){alert(\"Hide() 方法已完成!\");});});
$(\"button\").click(function(){alert(\"Text: \" + $(\"#test\").text());alert(\"值为: \" + $(\"#test\").val());alert($(\"#runoob\").attr(\"href\"));});
4.祖先
| 例子 | 描述 | |
|---|---|---|
| parent() | $(“span”).parents(); | 返回每个span元素的直接父元素 |
| parents() | $(“span”).parents(“ul”); | 返回所有span元素的所有祖先并且它是 ul元素，空值就返回所有祖先 |
| parentsUntil() | $(“span”).parentsUntil(“div”); | 返回介于 span与div元素之间的所有祖先元素 |
