初步!

  • https://jquery.com/ 来这个网站,下载好之后放到你的项目中,和 Bootstrap 的导入原理是一样的哦?(在你的项目中新建一个JS文件夹,然后把你的JQ 导入到程序中,注意做好文件的分类!)

重要理念

JQuery 对象要用 JQuery 方法 !!! 一定是 方法
Dom 对象 要用 Dom 方法

隐式迭代

意思 :在方法的内部会为匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用

jQuery 中会帮我们做好 循环 的工作

比方说我想给很多 li 增加点击事件,如果用原生的话,就要用循环 (例如 for) 给所有的 li 增加点击事件。
然而 JQuery 源码中已经帮我们干好了这类 循环 ,直接用 $("li").click() 就可以把所有的 li 增加点击事件了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<  body>
< div>
< ul>
< li>这是1&lt;/li>
< li>这是2&lt;/li>
< li>这是3&lt;/li>
< li>这是4&lt;/li>
< li>这是5&lt;/li>
&lt;/ul>
&lt;/div>
&lt;/body>

< script>
$("li").click(function () {
alert($(this).text());
})
&lt;/script>

展示如下:
< img width = 70% src = “https://img-blog.csdnimg.cn/20190921143331242.gif">

细节:隐式迭代只发生在设置(set)的阶段,如果是 获取(get)的时候,只能拿到第一个值,也就是你如果拿的是个数组,只能拿到 array[0] 的属性。?

理念这类的先记住,操作的时候慢慢理解


JQ 基本操作

Dom、JQ 对象互相转换

  • Dom 文件转换成 JQuery :$(dom对象),只需要把想要转换的 Dom 放到 括号里就好
  • JQuery 文件转换成 Dom :$("div")[0] ,(把 Div 改成你想要转的 JQuery 对象)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    < body>
    < div>
    这是1
    &lt;/div>
    < div>
    这是2
    &lt;/div>
    &lt;/body>

    < script>
    /*JQuery对象 转 Dom 对象方法,加下标!*/
    console.log($("div")[0].innerText);
    console.log($("div")[1].innerText);
    &lt;/script>

each 循环

JQuery中有each循环,其用法如下

1
2
3
4
5
6
7
let arr = ['你','好','啊'];
$.each(arr,function (index,elements) {
console.log(index,elements);
})
//0 "你"
//1 "好"
//2 "啊"

或者是

1
2
3
4
5
6
7
let arr = ['你','好','啊'];
$(arr).each(function (index,elements) {
console.log(index,elements);
})
//0 "你"
//1 "好"
//2 "啊"

样式修改

  • 单个样式修改的格式如下:$("li").css("color","red");

  • 如果要修改多个,那么 可以用对象(对象前面是 key,后面是 value)

    1
    2
    3
    4
    5
    $("li").css({
    color:"red",
    fontSize:30,
    "font-size":60
    });

    如果属性名字是类似 font-size 这样中间有 - 的,注意有两种写法

  • 第一种 :驼峰命名法 fontSize:30

  • 第二种:套上引号 "font-size":60


类操作

添加类

关键词:addClass();

1
$("#div1").addClass("colorSkyblue");

< img width = 50% src = “https://img-blog.csdnimg.cn/20190923095447920.png">

移除类

关键字:removeClass()

1
$("#div1").removeClass("colorSkyblue");

判断存在

关键字:hasClass("类名"),返回布尔值

1
2
console.log($("#div1").hasClass("colorSkyblue"));

切换类

关键字:toggleClass()

1
2
3
$("button").click(function () {
$("#div1").toggleClass("colorRed");
})

< img width = 80% src = “https://img-blog.csdnimg.cn/20190923102739901.gif">

可以看到 toggle 方法是用的 类的交集,来实现切换的?


添加 & 获取属性

添加属性

有两种方法,关键字分别是 attrprop

他们两个的效果都一样,区别是 底层代码实现的方法不同

  • attr 是用的 set attribute 方法添加属性
  • prop 是用的点方法,返回的值可能是 布尔变量
1
2
//用法
$("img").attr("src","../img/beauty.png")

所以对于值是布尔变量的属性的话,最好选用 prop 方法

获取属性

1
e.target.getAttribute()

移除节点

关键词:remove()

  • 原生方法移除节点:
    1
    2
    3
    /*原生删除方法:找到父元素,remove child 就可以了*/
    var box = document.getElementById("box");
    document.body.removeChild(box);
  • JQuery 方法移除节点
    1
    $("#yichu").remove();
    弹幕:超出屏幕的部分建议 remove

克隆 (深复制)

克隆完后是 游离元素,需要指定放在哪儿

引入两个新概念,深复制 和 浅复制

深复制

深复制就是不依赖所复制的内容

1
2
3
4
5
6
//这个例子并不是真正的深复制,而是形似!!!下面的浅复制同理
var a = 1;
var b = a;
b = 20;
console.log("(类似深复制)a:" + a);
//结果为1

浅复制

浅复制相当于指针,复制的是 引导,是指向

1
2
3
4
5
6
7
8
9
/*浅复制:复制的变量,与,被复制的变量,有影响*/
/*因为 arr1 复制的是 arr 的指向,就是那个数组*/
var arr = [1,2,3];
var arr1 = arr;

arr1[0] = 4;
console.log("赋值之后的arr:" + arr);

//赋值之后的arr:4,2,3

Q:我明明操作的是新的变量 arr1 里的数据啊,为什么 arr 还会变呢?
A:因为 var arr1 = arr; 这部操作复制的是 地址,是 指向,(尽量理解),arrarr1 都指向数组 [1,2,3]; 那么 arr1[0] = 4; 这部操作完之后,数组已经变了,所以 arrarr1 指向的内容也都变了,变成了 [4,2,3];


节点创建

创建一个游离对象 $("< p>nihao&lt;/p>") ,然后插入

所谓的 游离对象 是:你已经创建好了,但是它不知道该去哪里,是个孤儿,在浏览器渲染的外面,你需要清楚的给他指定位置,告诉他该去哪里,这时候就可以用到指定位置的插入!


插入

==注意:图片中的顺序和代码中的顺序是不一样的,注意区别,再去理解!!!==

Append()

1
2
3
4
5
6
7
8
9
10
< body>
< div id="box">
这是box
< div>这是box的第一个孩子&lt;/div>
&lt;/div>
&lt;/body>
< script>
/*append 是在 box 里面的最后一位插入*/
$("#box").append("< div>append方法&lt;/div>");
&lt;/script>

层级效果如下:
< img width = 50% src = “https://img-blog.csdnimg.cn/20190921090304445.png">

Append to()

前面的东西插入到后面,并且插入到后面元素下的最后面

1
$("< p>append to 方法&lt;/p>").appendTo("#box");

< img width = 50% src = “https://img-blog.csdnimg.cn/20190921090637107.png">

Prepend()

把后面的东西插入到前面,并且成为前面标签内的 首个孩子元素

1
$("# box").prepend("< div>prepend方法&lt;/div>");

< img width = 50% src = “https://img-blog.csdnimg.cn/20190921091344769.png">

Prepend to()

1
$("< p>prependTo方法&lt;/p>").prependTo("#box");

< img width = 50% src = “https://img-blog.csdnimg.cn/20190921091532339.png">

Before()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< body>
< div>这是box外的一个元素&lt;/div>
< div id="box">
这是box
< div>这是box的第一个孩子&lt;/div>
&lt;/div>
&lt;/body>
< script>

/*before是在前面元素,相邻的,上方加一个元素*/
$("#box").before("< div>before方法&lt;/div>");

/*prependTo方法*/
/*$("< p>prependTo方法&lt;/p>").prependTo("#box");*/
&lt;/script>

< img width = 50% src = “https://img-blog.csdnimg.cn/20190921092045170.png">

After()

这是插在跟选定元素同级之后的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< body>
< div>这是box外,上面的临近兄弟&lt;/div>
< div id="box">
这是box
< div>这是box的第一个孩子&lt;/div>
&lt;/div>
< div>这是box外,下面的临近兄弟&lt;/div>
&lt;/body>
< script>

/*after 这是插在跟box同级,之后的*/
$("#box").after("< div>after方法&lt;/div>");

/*prependTo方法*/
/*$("< p>prependTo方法&lt;/p>").prependTo("#box");*/
&lt;/script>

< img width = 50% src = “https://img-blog.csdnimg.cn/20190921092750971.png">


盒子模型的四个取值

一个元素的盒子模型所有值都能通过运算来获取

1
2
3
4
5
console.log($(window).width());/*获取可视的宽度*/
console.log($(window).innerWidth());/*border里面的,padding + content*/
console.log($(window).outerWidth());/*border里面的,padding + content + border*/
console.log($(window).outerWidth(true));/*border里面的,padding + content + border + margin*/
/*默认是false*/

JQ 动画

首先动画有几个重要的参数,分别是

  • 动画执行速度 speed:有三个初始的,分别是 fastnormalslow ,时常分别是 200400600 毫秒,默认是 normal

  • 过度效果 easing:一种是 swing,这个是有加速度的变化,先加速,在减速
    另一种是 linear,就是线性变化,匀速变化

  • 成功回调函数 callback:当动画执行 完毕 之后才执行这个函数
    多的知识点:还有一种函数叫做 handler 处理函数,这个只要发生了,就开始执行,比方说点击事件

    callback:
    < img width = 80% src = “https://img-blog.csdnimg.cn/20190923121250360.gif">

隐藏

1
2
3
$("#div1").hide(5000,"linear",function () {
console.log(1);
});

演示如下
< img width = 50% src = “https://img-blog.csdnimg.cn/20190923115720956.gif">
可以看到 hide 的变换是 宽和高都在变小,最后!!自动给他个 display:none;
如果hide里边没有参数,那么就是直接给他个 display:none;

显示

1
$("#div1").show();

动画总结

效果 方法
隐藏 hide()
显示 show()
滑入 slideUp()
滑出 slideDown()

示例:select中的选项

引入一个属性选择器,这样的话select中的值改变的话就会输出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
<select name="" id="" class="sel">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
</body>
<script>
$('.sel').on("change",function () {
console.log($(".sel :selected").text());
//console.log($("[class = sel] :selected").text()); 也可以写成这样
})
</script>