JQuery学习笔记

Posted 2021-07-24 唥小雨

JQuery学习笔记

JQuery笔记

一、什么是JQuery？

jq是js的代码库，jq让我们写的更少、做的工作更多

二、jq使用方法:

​

<script src="jquery-3.4.1.min.js"></script>

三、什么是CDN

cdn是内容分发网络，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

百度CDN:

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">

​

Google CDN:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

​

四、jq选择器的使用

1．标签选择器: var p = $(“p”); ----> 此时已经获得p标签

2．class选择器: var div = $(“.top”); ----> 此时已经获得class为top的标签

3．id选择器: var div = $(“#left”); ----> 此时已经获得id为left的标签

4．jq选择器功能异常强大，css拥有的选择器，jq都能用

例: 层次选择器、结构为类选择器、属性选择器

$(“li:nth-child(2)”).text(); ---->获取页面中第二个li标签内容

五、jq获取DOM元素

1．获取标签内容:

（1）获取纯文本: $(“p”).text(); -->只能获取p标签的文本内容

（2）获取纯文本和html标记: $(“p”).html(); -->获取p标签内容和p标签的子级标签

例:

我是段落

我是span

$(“p”).text();---->我是段落 我是span

$(“p”).html();---->我是段落 我是span

2．获取表单内容: $(“input”).val();

3．获取标签属性: $(“a”).attr(“href”); ---->获取到了a标签href的值

例: $(“div”).attr(“class”); ---->获取到了div的class的值

4．获取标签样式: $(“div”).css(“width”); ---->获取到了div的宽度值

5．向标签内添加内容:

（1）添加纯文本内容: $(“p”).text(“我是新增”);

（2）添加文本和HTML标记: $(“p”).html(“我是新增”);

6．向表单中添加内容

$(".username").val(“我是默认值”);//会向input表单中添加内容: 我是默认值

7．给标签添加属性:$(“img”).attr(“title”,“哈哈”);//给img标签赋值属性title=“哈哈”

8．给标签添加css样式:

（1）添加一个css样式: $(“p”).css(“color”,“red”);//给p标签添加一个css样式

（2）添加多个css样式:

$(“p”).css({“background-color”:“green”,“font-size”:“50px”});//添加多个css样式

六、jq事件:

1．点击事件用法:

点我弹出123

<script>

​ $(“button”).click(function(){

​ alert(123);

​ });

​

2．其他事件

（1）

3．事件传递this:

​

• 1

• ​

• 2

• ​

  <script>
  

  ​ $(“li”).click(function(){//给所有li绑定点击事件

  ​ var content = $(this).text(); //this的含义是，当前点击的li标签

  ​ alert(content);

  ​ });

  ​

  七、jq操作DOM元素

  1．jq添加、删除、切换class

  我是段落

  点我给p标签添加class=bcg

  点我给p标签删除class=bcg

  点我切换class=bcg

  $(".one").click(function(){

  ​ $(“p”).addClass(“bcg”);

  });

  $(".two").click(function(){

  ​ $(“p”).removeClass(“bcg”);

  });

  $(".three").click(function(){

  ​ $(“p”).toggleClass(“bcg”);

  });

  （1）添加: $(“p”).addClass(“bcg”);

  （2）删除:$(“p”).removeClass(“bcg”);

  （3）切换:$(“p”).toggleClass(“bcg”);

  2．元素隐藏与显示

  （1）元素显示:$(“p”).show();

  （2）元素隐藏:$(“p”).hide();

  （3）切换元素显示和隐藏状态: $(“p”).toggle();

  （4）上述三个方法其实有两个默认参数: speed,callback

  speed: 方法执行的速度

  callback: 方法经过speed毫秒后，要执行的方法名(只写方法名不写括号)

  $(“p”).hide(5000,say);

  function say(){

  ​ console.log(“我被调用了”);

  }

  3．元素的淡入和淡出 : 操作的是css中 opacity属性，取值范围是0~1之间

  （1）元素的淡入: $(“p”).fadeIn(); ---->让元素透明度从0–>1

  （2）元素的淡出:$(“p”).fadeOut(); ---->让元素透明度从1–>0

  （3）元素切换淡入淡出状态:$(“p”).fadeToggle(); ---->切换元素透明度

  （4）元素从初始状态渐变为自定义的透明度

  $(“p”).fadeTo(3000,0.5); ---->让元素从 当前元素的透明度值---->0.5

  （5）上述四个方法其实还有两个默认参数:speed,callback，用法同隐藏与显示

  4．元素的滑动:

  （1）元素向上滑动:$(“p”).slideUp();

  （2）元素向下滑动:$(“p”).slideDown();

  （3）元素切换上下滑动:$(“p”).slideToggle();

  （4）上述四个方法其实还有两个默认参数:speed,callback，用法同隐藏与显示

  5．元素动画:

  （1）开始动画: $(“p”).animate({“width”:”10px”,”height”:”10px”},speed,callback);

  （2）停止动画:$(“p”).stop(stopAll,goToEnd);

  stopAll:是否清除动画队列，默认false

  goToEnd:是否立即完成，false为默认

  6．添加元素:

  （1）创建节点: var p = $(“

  我是创建的p标签

  ”);

  （2）$(A).append(B);//将B插入到A中

  （3）$(A).appendTo(B);//将A插入到B中

  （4）$(A).prepend(B);//将B插入到A中并且在最前面，B是A的子元素

  （5）$(A).prependTo(B);//将A插入到B中并且在最前面，A是B的子元素

  （6）$(A).before(B);//将B插入到A前面，AB同级

  （7）$(A).after(B);//将B插入到A后面，AB同级

  例:

  ​

  我是页面原有标题

  ​

  ​ 向div添加p1

  ​ 向div添加p2

  ​ 在div前面添加h1

  ​ 在div后面添加h2

  ​ 向div添加p3

  ​ 向div添加p4

  <script>
  

  ​ $(".app").click(function(){

  ​ var p1 = $(“

  我是p1,在原有标签后面

  ”);

  ​ $(“div”).append(p1);

  ​ });

  ​ $(".appTo").click(function(){

  ​ var p1 = $(“

  我是p2,在原有标签后面

  ”);

  ​ p1.appendTo($(“div”));

  ​ });

  ​ $(".bef").click(function(){

  ​ var h1 = $(“

  我是p2

  ”);

  ​ $(“div”).before(h1);

  ​ });

  ​ $(".aft").click(function(){

  ​ var h2 = $(“

  我是p2

  ”);

  ​ $(“div”).after(h2);

  ​ });

  ​ $(".preb").click(function(){

  ​ var p1 = $(“

  我是p3,在原有标签前面

  ”);

  ​ $(“div”).prepend(p1);

  ​ });

  ​ $(".pretob").click(function(){

  ​ var p1 = $(“

  我是p4,在原有标签前面

  ”);

  ​ p1.prependTo($(“div”));

  ​ });

  ​

  7．删除元素:

  （1）删除包括自己的所有元素: $(“div”).remove();

  （2）只删除子级元素: $(“div”).empty();

  八、遍历jq元素

  1．父级:

  （1）获取所有父级: $(“li”).parents();

  （2）获取直接父级:$(“li”).parent();

  （3）获取所有父级中带有特征的元素:$(“li”).parents(“选择器”);

  2．子级

  （1）获取直接子级: $(“div”).children();

  （2）获取所有子级: $(“div”).find(“*”);

  （3）获取直接子级中带有特征的元素: $(“div”).children(“选择器”);

  （4）获取所有子级中带有特征的元素: $(“div”).find(“选择器”);

  3．兄弟

  （1）获取所有兄弟: $(“li”).siblings();

  （2）获取带有特征的所有兄弟: $(“li”).siblings(“选择器”);

  （3）获取下一个兄弟: $(“li”).next();

  （4）获取下面所有兄弟: $(“li”).nextAll();

  （5）获取下面所有带有特征的兄弟:$(“li”).nextAll(“选择器”);

  4．eq:按索引获取元素: $(“li”).eq(index); index从0开始