jQuery（未整理完）

JQ简单介绍

- JQ是JS写的插件库，就是一个js文件
- 凡是用jq能实现的，js都能实现，js能实现的，jq不一定能实现
- JQ理念
	- write less，do more
- 在JQ中使用选择器选择元素和在css中使用CSS选择器是一样的,如下：
<p id="p1">111</p>
<p id="p2">hahaha</p>
<script src="../js/jquery-3.3.1.js"></script>	#下面的也一样
#<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
#在https://www.bootcdn.cn/jquery/里https://cdn.bootcss.com/jquery/3.3.1/jquery.js复制到本地或者直接引用
<script type="text/javascript">
    $("p").click(function () {	//必须引用外部文件才能用$
        alert("qwe");
    })
</script>

ＪＱ基本使用

JQ基本使用1

修改内容

- html（）
- text（）
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
   // $("ul li").html(111);		//text()亦可
	$("ul li").eq(0).html(111);     //111		(0)是索引
			                                        2
			                                        3
			                                        4
</script>

转换

- get()/[]
- $()
js对象要使用jQuery用$()
$("#btn").get(0).innerHTML='8888';

// 特定转换，不会换对象类型
var btn1 = $(".p11");
btn1.eq(0).html(555)

点击

• click()
  $("#btn").click(function () {
  alert(“qew”);
  })

鼠标

- hover()

$("#p1").hover(function () {
console.log(“移入”)
},function () {
console.log(“移出”)
})

追加

- append()
 $("#p1").append("<p>我是被追加进来的</p>")	//加到后面

添加

- prepend()
$("#p1").prepend("<p>我是被添加进来的</p>")	//添加到前面

前后

- before()
- after()
$("#p1").before("<p>前</p>");
$("#p1").after("<p>后</p>");

移除

- empty()
- remove()
$("div").empty()    // 清空里面的内容，保留自己属性
$("div").remove()    // 清除掉自己和下面子集的所有

ＪＱ的基本使用２

操作属性

- attr()
- removeAttr()
alert($("#p1").attr("id"));     //返回属性值
$("#p1").attr("a","b")  //添加属性，无则增，有则改
    $("#p1").attr({
    "a":"b",    //注意符号
    "class":"d"
    });
$(".d").removeAttr("a");    //移除

添加/移除

- addClass()
- removeClass()
$("#div1").addClass("div3");     //写多个也可以加多个
$("#div1").addClass("div4");     //写多个也可以加多个
$("#div1").removeClass("div3")  //移除
$(".div3").removeClass("div3")  //可以移除自己

判断

- hasClass()
<div id="div1" class="div12">
alert($(".div12").hasClass("div12"));	//添属性值
 alert($("#div1").hasClass("div12"));	//返回结果都是ｔｒｕｅ

索引

- each()
- index()
$("ul li").each(function (i) {
    $(this).html("我是第"+i+"个")
})
alert($("#li2").index());   //2，查索引

滚动条事件

- scroll()
- scrollTop()
- scrollLeft()
    $(window).scroll(function () {
    console.log($(document).scroll());
    console.log($(document).scrollLeft());	//左右
    console.log($(document).scrollTop());		//上下
})

ＪＱ基本使用３

父子元素

- parent
- children()

兄弟

- siblings

后代

- find

祖宗(父级之上)

- parents
<div id="div1">
<input type="button">
<div><ul class="abc">
    <li id="li1"></li>
    <li id="li2"></li>
    <li></li>
</ul>
</div>
<ul></ul>
<p><span>222</span></p>
<p></p>
</div>
<script src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
    // 父级
    console.log($(".abc").parent());
    // 子级
    console.log($("#div1").children());
    // 兄弟
    console.log($("#li1").siblings());
    // 后代 find需要传参
    console.log($("#div1").find("li"))
    // 祖宗 parents逐层向外查，可以加参
    console.log($("li").parents())
    console.log($("li").parents("div"))
    结果：

定位父级

- position()

窗口

- offset()

宽高

- width()/height()

循环添加

- on

移除

- off

JQ操作样式

JQ动画

常用的特殊符号

- hide():隐藏
- show():显示
- slideUp:向上
- slideDown:向下
- slideToggl:取反
- fadeIn:淡入
- fadeOut:淡出
- fadeTo:自定义
- fadeToggle;取反
- animate;动画
- stop:停止
- delay:延迟

练习

• <
• >