jQuery笔记

jQuery版本下载

　　https://www.jq22.com/jquery-info122

一. jQuery简单介绍

　　1. js的一个第三方库,它简化代码使用量

　　2. 开发时下载非压缩版,开发好后放在服务器上用压缩版

二. 基础核心使用

　　1. html中引入jquery　　2. jQuery获取网页元素的方法　　3. jquery与js相互转换

 1 <body>
 2     <div id="app">小马哥</div>
 3     <script src="jquery-3.5.1.js"></script>
 4     <script>
 5         //dom获取div元素的方法
 6         var appDiv = document.getElementById('app');
 7         console.log(appDiv);
 8         //jquery获取div元素的方法
 9         console.log(jQuery('#app')[0]);  //不加下标[0]得到的是jquery独特的数据,类似数组
10         console.log($('#app')[0]);
11         //js对象=>jquery对象
12         console.log($(appDiv));
13         //jquery对象=>js对象
14         console.log($('#app')[0]);
15         console.log($('#app').get(0));
16     </script>
17 </body>
引入jquery,获取元素,与js互相转换

三. 入口函数

　　$:  该符号是jQuery的缩写形式,等同于jQuery.　　console.log(jQuery===$); //true

　　$(function(){});  //执行一个匿名函数

　　$('#box');  //执行ID元素选择

　　$('#box').css('color', 'red');  //设置标签的css属性

　　jQuery入口函数,js中入口函数onload

　　区别:

　　1. jQuery入口函数,只需等待网页中的DOM结构加载完毕就能执行,且可以执行多次,不会覆盖上一次.代码可以简写.$(function(){});

　　2. js中onload函数,必须等待网页全部下载完毕(包括图片等),才能执行,且只能执行一次,只会执行最后一个onload.不可以简写.

 1     <script src="jquery-3.5.1.js"></script>
 2     <script>
 3         //jquery入口函数
 4         $(document).ready(function () {
 5             alert(2);
 6         })
 7         //jquery入口函数简写
 8         $(function () {
 9             alert(1);
10         })
11         //js中入口函数onload
12         window.onload = function () {
13             alert(3)
14         }
15     </script>
jquery入口函数,js中入口函数onload

 

四. 如何处理多个库$冲突的问题

　　html代码是自上而下执行的,如果前面引入了一个包含$非jQuery的js,就会被后面的引入的jQuery代码覆盖,之前的$不起作用.jQuery提供了解决的方案.

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4 </head>
 5 <body>
 6     <div id="box">小马哥</div>
 7     <script src="index.js"></script>  //该js文件中有个$变量 var $ = 4; 这就和下面引入的jQuery发生了冲突
 8     <script src="jquery-3.5.1.js"></script>
 9     <script>
10         //后面引入的js把前面的覆盖了,下面应当是执行jQuery代码
11         console.log($);  //输出jQuery
12         $(function () {  //此处执行jQuery
13             $('box').css('color', 'red');
14         })
15         
16         //解决冲突
17         //如何能让上面的index.js中的$变量起作用呢?
18         jQuery.noConflict();  //名词解释:不覆盖.  在所有的<script>代码的最前面使用该方法.
19         console.log($); //输出4
20         (function ($) {  //此处使用自执行函数(闭包函数),执行jQuery代码,内部的$是jQuery的.
21             $(function () {
22                 $('box').css('color', 'red');
23             })
24         })(jQuery);
25     </script>
26 </body>
解决js与jQuery冲突

 

五. 基础和层级选择器

　　jQuery的选择器作用:选中当前的元素(返回一个jQuery对象).　　与css的选择器类似

 1 <body>
 2     <div id="box">
 3         <div class="item">张三</div>
 4         <div class="item">李四</div>
 5         <div class="item">王五</div>
 6         <ul>
 7             <li id="l1">赵六</li>
 8             <li id="l2">陈七</li>
 9             <li id="l3">刘九</li>
10         </ul>
11     </div>
12     <script src="jquery-3.5.1.js"></script>
13     <script>
14         //jQuery的选择器作用:选中当前元素(返回一个jQuery对象)
15         console.log($('#box'));  //根据id属性获取标签元素对象
16         console.log($('.item'));  //根据class属性获取标签元素对象
17         console.log($('ul'));  //根据标签名获取对象
18         console.log($('#box li')); //层次选择,#box后代中的所有li对象
19         console.log($('#box>ul'));  //层次选择,子代
20         console.log($('#l2+'));  //同级标签中,近邻着#l2的下一个,输出#l3
21         console.log($('#l1~'));  //同级标签中,#l1的后面所有标签,输出#l2#l3
22         console.log($('#l2~'));  //同级标签中,#l2的后面所有标签,输出#l3
23         console.log($('#l3~'));  //同级标签中,#l3的后面所有标签,输出空
24         console.log($('li, .item'));  //既选择li标签,也选择.item属性的标签,共6个
25     </script>
26 </body>
View Code

六. 过滤选择器和属性选择器

　　过滤选择器　　内容过滤选择器　　属性过滤选择器　　子元素过滤选择器　　表单过滤选取　　选择器的结果为空怎么办?

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style type="text/css">
 5         #box .item#xm1{
 6             display: none;
 7         }
 8     </style>
 9 </head>
10 <body>
11     <div id="box">
12         <div class="item" id="xm1">张三</div>
13         <div class="item" id="xm2">李四</div>
14         <div class="item" id="xm3">王五</div>
15         <div class="item" id="xm4">赵六</div>
16         <div class="item" id="xm5"></div>
17         请输入姓名:<input type="text" id="xm">
18         <input type="radio" id="xb">男
19     </div>
20 
21     <script src="jquery-3.5.1.js"></script>
22     <script>
23         //过滤选择器
24         console.log($('#box .item:first'));  //获取符合条件的第一个标签
25         console.log($('#box .item:last'));  //获取符合条件的最后一个标签
26         console.log($('#box .item:not(#xm2)'));  //获取符合条件中的所有,除了#xm2的其它标签
27         console.log($('#box .item:even'));  //获取符合条件中的偶数下标的
28         console.log($('#box .item:odd'));  //获取符合条件中的奇数下标的
29         console.log($('#box .item:eq(0)'));  //获取符合条件中的下标0的元素
30         console.log($('#box .item:eq(0)').text());  //获取该标签的文本,如果下标超出,则输出空白
31         console.log($('#box .item:gt(0)').text());  //获取下标大于0的所有标签的文本,输出李四王五赵六
32         console.log($('#box .item:lt(2)').text());  //获取下标小于2的所有标签的文本,输出张三李四
33         //(内容)文本过滤选择器
34         console.log($('#box .item:contains(张三)'));  //获取文本中包含张三的所有标签
35         console.log($('#box .item:empty'));  //匹配不包含子元素或者文本的空元素,输出#xm5
36         console.log($('#box .item:hidden'));  //选取不可见的元素,即css的display设置为none的
37         console.log($('#box .item:visible'));  //选取可见的元素
38         console.log($('#box .item:has(h4)').addClass('a'));  //选择包含<h4>子标签的标签.并为该标签增加一个class属性为a
39         //属性过滤选择器
40         console.log($('div[id]'));  //选择所有拥有id属性的div
41         console.log($('div[id=xm1]'));  //选择所有拥有id属性等于xm1的div
42         console.log($('div[id!=xm1]'));  //不等于
43         console.log($('div[id^=xm]'));  //选择id属性值以xm开头的div
44         //子元素过滤选择器
45         //表单过滤选择器
46         console.log($('div input'));  //div下所有input输入框
47         console.log($('div input:text'));  //div下所有input输入框中的单行文本框
48         console.log($('div input:radio'));  //div下所有input输入框中的radio类型(即单选框)
49 
50         //如果选择器选择的结果为空怎么处理(为空不会报错)
51         $('input[type=button]').click(function () {  //没有这个button但是不会报错
52             alert(111);
53         })
54         //处理方法,加入if判断
55         if($('input[type=button]').length>0){  //对结果的长度进行判断
56             //具体事务
57             $('input[type=button]').click(function () {
58                 alert(111);
59             })
60         }else{
61             //其他事务
62             throw new Error('获取元素失败');  // 主动报错
63         }
64     </script>
65 </body>
过滤器

七. DOM操作之插入节点

　　//操作下级元素

　　append()　　向每个匹配的元素内部追加内容　　$(A).append(B)将B追加到A中/如果B已经存在,则是移动到A中

　　appendTo()　　将所有匹配的元素追加到指定元素中　　$(B).append(A)将B追加到A中/如果B已经存在,则是移动到A中

　　prepend()　　向每个匹配的元素内部前置内容　　$(A).prepend(B)将B插入到A前面/如果B已经存在,则是移动到A中

　　prependTo()　　将所有匹配的元素添加到指定元素内部的最前面　　$(B).prependTo(A)将B添加到A内部的最前面/如果B已经存在,则是移动到A中

　　//操作同级元素

　　after()　　在每个匹配的元素之后插入内容　　$(A).after(B)将B插入到A的后面

　　insertAfter()　　将所有匹配的元素插入到指定元素的后面　　$(B).insertAfter(A)将B插入到A后

　　before()　　在每个匹配的元素之前插入内容　　$(A).before(B)将B插入在A的前面

　　inserBefore()　　将所有匹配的元素插入到指定元素的前面　　$(B).insertBefore(A)将B插入在A的前面

 八. DOM操作之删除节点

　　1. remover()从DOM中删除所有匹配的元素

　　$('lu li:eq(1)').remove();  //获取第二个<li>元素节点后,将它从网页中删除

　　2. deach()

　　用法与remover()一样,不同的是,remover()既删除节点,又删除绑在节点上的方法.deach()保留事件方法.

　　3. empty()

　　清空所有后代节点

　　$('.box').html('');  //该方案与empty()功能相同

九. DOM操作之克隆节点(复制节点)

　　clone()方法　

1         //点击类名是zs的节点元素时,复制它到id是#xm的标签内
2         $('.zs').click(function () {
3             $(this).clone().appendTo('#xm');
4         })
5         //让复制出的新元素具备和老元素相同的行为(点击也可以复制自身)
6         $('.zs').click(function () {
7             $(this).clone(true).appendTo('#xm');  //加个true
8         })

十. DOM操作之替换节点和包裹

　　$('.replace p').replacewith('<i>hello</i>');　　将P标签替换为i标签

　　replaceAll(selector)　　用匹配的元素替换掉所有selector匹配到的元素

　　$(.replace p'').wrap('<div class="box"></div>');　　用.box的div标签将p包裹在里面,及在外部增加一个div标签

 

posted @ 2020-11-02 15:05  蓝蓝的白云天！  阅读(129)  评论(0)    收藏  举报