jQuery个人笔记

安装

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=$(’ div’);

1.  var div1=$divs[0];
   

2.  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.选择器

1. 交集并集选择器

	例子	描述
并集选择器	$(“div,p,li”);	使用逗号分隔，只要符合条件之一就可。
交集选择器	$(“div.redClass”);	获取class为redClass的div元素

2. 过滤选择器

	例子	描述
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()	找上一次兄弟

3. 筛选选择器(方法)

	例子	描述
: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元素之间的所有祖先元素

5.动画