jQuery知识整理

最新推荐文章于 2022-08-25 23:22:41 发布

黑马程序员xlj

最新推荐文章于 2022-08-25 23:22:41 发布

阅读量216

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_42236548/article/details/113770910

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jQuery知识整理

1.原生js和jQuery的区别

1.原生js和jQuery的加载模式不同，原生js会等到DOM元素完毕，并且图片也加载完毕才会执行

jQuery会等到DOM元素加载完毕，但不会等到图片加载完毕就会执行

2.原生JS如果编写了多个入口函数，后面编写的会覆盖前面编写的；jQuery中编写的多个入口函数，后面的不会覆盖前面的

2.jQuery入口函数

$(function(){
    console.log("入口函数");
})

jQuery的冲突解决方案

1.释放$的使用权

jQuery.noConflict(); 把$改成jQuery

注意点：释放操作必须在编写其他jQuery代码之前编写，释放之后就不能再使用$，改为使用jQuery

2.自定义一个访问符号

var nj = jQuery.noConflict();

3.jQuery的核心函数

$()就代表调用jQuery的核心函数，

1.接受一个函数（入口函数）

$(function (){ alert(123444); })

2.接受一个字符串

2.1 接受一个字符串选择器

返回一个jQuery对象，对象中保存了找到的DOM元素

var $box1 = $(".box1");

2.2接受一个代码片段

返回一个jQuery对象，对象中保存了创建的DOM元素

var $p = $(“

我是一个段落

”);

3.接受一个DOM元素

会包装成一个jQuery对象返回给我们

var span = document.getElementsTagName(‘span’); var $span = $(span)

4.jQuery对象

1.什么是jQuery对象？

jQuery是一个伪数组

2.什么是伪数组？

伪数组有0到length-1属性，并且有length属性

5.jQuery静态方法

//1.定义一个类
function AClass(){
}
//2.
AClass.staticMethod = function (){
    
}
AClass.staticMethod();
AClass.prototype.instanceMethod = function (){
    alert("instanceMethod")
}
var a = new AClass();
a.instanceMethod();

5.1jQuery的静态方法

1.foreach() /  each()
(1)  foreach():
第一个参数：遍历到的元素
第二个参数：当前遍历到的索引
注意点：元素的foreach方法只能遍历数组，不能遍历伪数组
       /* 第一个参数: 遍历到的元素
        第二个参数: 当前遍历到的索引
        注意点:
        原生的forEach方法只能遍历数组, 不能遍历伪数组
        */
         arr.forEach(function (value, index) {
       console.log(index, value);
       });

（2）each()
第一个参数：遍历到的索引
第二个参数：遍历到的元素
注意点：
jQuery的each方法是可以遍历伪数组的
$.each(obj, function(index, value) {
       console.log(index, value);
});

6.js中map和jQuery的map的区别

（1）js中的map

第一个参数：遍历到的元素

第二个参数：遍历到的索引

第三个参数：当前被遍历的数组

注意点：和原生的foreach一样，不能遍历的伪数组
arr.map(function (value, index, array) {    
    console.log(index, value, array);    
});
（2）jQuery中的map

第一个参数: 要遍历的数组

第二个参数: 每遍历一个元素之后执行的回调函数

回调函数的参数:

第一个参数: 遍历到的元素

第二个参数: 遍历到的索引
$.map(arr, function (value, index) { console.log(index, value); });
jQuery中的each和map的区别：

1.each遍历谁就返回谁；map静态方法的返回值是一个空数组

2.each静态方法不支持回调函数中对遍历数组的处理；map静态方法可以在回调函数中通过return对遍历数组进行处理

		holdReady()
        // 暂停ready执行
        $.holdReady(true)
        $(document).ready(function() {
            alert('ready')
        })
        //开始执行
		$.holdReady(false);

属性和属性节点

1.什么是属性？

对象身上保存的变量就是属性

2.怎么操作属性？

对象.属性名称 = 值；对象.属性名称；对象[“属性名称”]=值；对象[“属性名称”]

3.什么是属性节点？

在编写HTML代码是没在HTML添加的属性就是属性节点

在浏览器中找到的span这个元素后，展开后的都是属性，展开attributes里的就是属性节点

4。如何操作属性节点？

DOM元素.setAttribute("属性节点“，”值“)；

DOM元素.getAttribute("属性节点“，”值“)；

5.属性和属性节点有什么区别？

任何对象都有属性，但是只有DOM对象才有属性节点

7.函数介绍

7.1.attr(name|pro|key,val|fn)

作用：获取或者设置属性节点的值

可以传递一个参数，也可以传递两个参数

如果传递一个参数，代表获取属性节点的值

如果传递两个参数，代表设置属性节点的值

注意点:

如果是获取:无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值

如果是设置:找到多少个元素就会设置多少个元素

如果是设置: 如果设置的属性节点不存在, 那么系统会自动新增

7.2removeAttr(name)

删除属性节点

注意点：会删除所有找到元素指定的属性节点

1.prop方法：

特点和arrt方法一致

2.removeProp方法：

特点和removeAttr一致

注意点：prop方法不仅能够操作属性，还能操作属性节点

*官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()*

8.jQuery操作类的相关方法

addClass(class|fn)方法:

作用：添加一个类

html（）

和原生的innerHTML一样

1.什么是事件冒泡

父子元素都添加事件时，触发子元素的事件同时会触发父元素的事件

2.如何阻止事件冒泡

（1）在****子元素****的回调函数中添加

return false;

（2）event.stopPropagation();

在****子元素****的回调函数传递一个event参数

3.什么是默认行为

4.如何阻止默认行为

在****元素****的回调函数中添加

（1）return false;

（2）event.preventDefault();

自动触发事件：

$(".father").trigger("click"); 
//如果利用trigger自动触发子元素事件，会引起事件冒泡 
//如果利用trigger自动触发事件，会引起默认行为 
//想利用trigger又有触发事件又有默认行为，要把a包装一下，a里面的内容存在span中 
$(".father").triggerHandler("click"); 
//如果利用triggerhandler自动触发子元素事件，不会引起事件冒泡
//如果利用triggerhandler自动触发事件，会引起默认行为 
$("input[type='submit']").click(function (){   alert(123) })

自定义事件：

想要自定义事件，必须要满足两个条件

1.事件必须是通过on绑定的

2.事件必须通过trigger来触发

$(".son").on("myClick",function (){  
    alert("son"); 
}) 
$(".son").trigger("myClick");

事件的命名空间：

想要事件命名空间有效，必须要满足两个条件

1.必须是通过on来绑定事件的

2.通过trigger或triggerHandler触发事件

$(".son").on("click.zs",function (){   alert("son1"); }) 
$(".son").on("click.ls",function (){   alert("son2"); }) 
$(".son").trigger("click.zs")

面试题

利用trigger触发子元素带命名空间的事件, 那么父元素带相同命名空间的事件也会被触发. 而父元素没有命名空间的事件不会被触发利用trigger触发子元素不带命名空间的事件,那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发

事件委托：

$("ul>li").click(function (){   alert($(this).html()) })
//新增的li能有响应事件 //将li的事件委托给ul 
$("ul").delegate("li","click",function (){   
    $("ul>li").click(function (){     alert($(this).html())     }) 
}) 
//新增的li能有响应事件 /

9.slideDown()展开

10.slideUp()收起

11.slideToggle()切换

12.jQuery添加节点相关方法

内部插入：

append(content|fn):将元素添加到指定元素的后面

var $li = $("<li>新增的li</li>"); // 2.添加节点 $("ul").append($li);

appendTo(content)：将元素添加到指定元素的后面

 var $li = $("<li>新增的li</li>"); $li.appendTo("ul");

prepend(content|fn)：将元素添加到指定元素的前面

var $li = $("<li>新增的li</li>"); $("ul").prepend($li);

prependTo(content)：将元素添加到指定元素的前面

 var $li = $("<li>新增的li</li>"); $li.prependTo("ul");

外部插入：

after(content|fn):将元素添加到指定元素外部的后面

 $("ul").after($li);

before(content|fn):将元素添加到指定元素外部的前面

$("ul").before($li);

删除节点的相关方法：

删除：

remove([expr])：删除指定元素

empty()：删除指定元素内容和子元素，指定元素自身不hi被删除

detach([expr])

$("button").click(function () {   
    // $("div").remove();   
    // $("div").empty();   
    // $("li").remove(".item");    
    // 利用remove删除之后再重新添加,原有的事件无法响应   
    // var $div = $("div").remove();   
    // 利用detach删除之后再重新添加,原有事件可以响应   
    var $div = $("div").detach();   
    // console.log($div);   
    $("body").append($div); 
});

替换节点的相关方法：

替换：

replaceWith([content|fn])

replaceAll(selector):替换所有匹配的元素为指定的元素

$(“button”).click(function () { // 1.新建一个元素 var $h6 = $(“

我是标题6

”); // 2.替换元素 //

(" h 1 ") . r e p l a c e W i t h (

h6); $h6.replaceAll(“h1”); });

复制节点的相关方法：

clone([Even[,deepEvem]])

如果传入的false就是浅复制，如果传入的值是true就是深复制，

浅复制只会复制元素，不会复制元素的事件

深复制会复制元素，而且还会复制元素的事件

13.php

定义变量名:
$变量名 = 值；
打印内容：
echo $变量名注意：后端编写的代码不能直接运行，只能放到服务器对应十五文件夹下，通过服务器运行
如何让通过服务器运行：通过IP第hi找到服务器对应的文件夹，然后再找到相对应的文件运行
定义集合
1.字典（对象） $arr = array(1, 3, 5); print_r($ arr);echo $arr[1];
2.对象： $对象名 = array("name"=>"waq","age"=>"18") print_r($ 变量名); echo $变量名[“name”];
3.分支循环：
```
// if/switch/三目/for/while
//$age = 16;
//if($age >= 18){
//    echo "成年人";
//}else{
//    echo "未成年人";
//}

//$res = ($age >= 18) ? "成年人" : "未成年人";
//echo $res;

//switch ($age){
//    case -1:
//        echo "非人类";
//        break;
//    case 18:
//        echo "成年人";
//        break;
//    default:
//        echo "未成年人";
//        break;
//}

$arr = array(1, 3, 5);
//for($i = 0; $i < count($arr); $i++){
//    echo $arr[$i];
//    echo "<br>";
//}
$index = 0;
while ($index < count($arr)){
    echo $arr[$index];
    echo "<br>";
    $index++;
}
?>
```
- 1.可以通过form标签的method属性指定发送请求的类型
- 2.如果是get请求会将提交的数据拼接到URL后面
  ?userName=lnj&userPwd=123456
- 3.如果是post请求会将提交的数据放到请求头中
- 4.GET请求和POST请求的异同
  
  4.1相同点:
  都是将数据提交到远程服务器
  4.2不同点:
  4.2.1提交数据存储的位置不同
  GET请求会将数据放到URL后面
  POST请求会将数据放到请求头中
  4.2.2提交数据大小限制不同
  GET请求对数据有大小限制
  POST请求对数据没有大小限制
- 5.GET/POST请求应用场景
  
  GET请求用于提交非敏感数据和小数据
  POST请求用于提交敏感数据和大数据

//注意：
1.上传文件一般使用POST提交
2.上传文件必须设置enctype=“multipart/form-data”
3.上传的文件在PHP中可以通过$_FILES获取
4.PHP中文件默认会上传到一个临时目录。接受完毕后会自动删除

14.AJAX

// 1.创建异步对象
var xmlhttp = new XMLHttpRequest();
//2.设置请求方式和请求地址
method :请求类型： GET POST 
url :文件在服务器上的位置
async: true (异步) false (同步)
xmlhttp.open("GET","test.xml",true)
// 3.发送请求
xmlhttp.send()
// 4.监听状态变化
xmlhttp.onreadystatechange = function(e){
    if（xmlhttp.readyState === 4）{
        //判断请求是否成功
        /**
          0:请求未初始化
          1.服务器连接已建立
          2.请求已接受
          3.请求处理中
          4.请求已完成，且响应已就绪
        */
        if(xmlhttp.status >=200 && xmlhttp.status < 300 ||
            xmlhttp.status === 304){
              console.log("成功");
    }else{
    console.log("失败")；
        }
    }

15.封装ajax函数

参数：url地址 success请求成功 error请求失败

在ulr中不可以出现中文，如果出现中文需要转码
URL中值可以出现字母/数字/下划线/ASCII码

判断外界是否传入了超时时间

if(timeout){
        timer = setInterval(function () {
            console.log("中断请求");
            xmlhttp.abort();  //中断请求
            clearInterval(timer);
        }, timeout);
    }

设置请求方式

if(option.type.toLowerCase() === "get"){
        xmlhttp.open(option.type, option.url+"?"+str, true);
        // 3.发送请求
        xmlhttp.send();
    }else{
        xmlhttp.open(option.type, option.url,true);
        // 注意点: 以下代码必须放到open和send之间
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send(str);
    }

16.jQuery的Ajax方法

$.ajax({
    type:"GET/POST",
    url:""
    data:
})

黑马程序员xlj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery知识整理

jQuery知识整理1.原生js和jQuery的区别1.原生js和jQuery的加载模式不同，原生js会等到DOM元素完毕，并且图片也加载完毕才会执行jQuery会等到DOM元素加载完毕，但不会等到图片加载完毕就会执行2.原生JS如果编写了多个入口函数，后面编写的会覆盖前面编写的；jQuery中编写的多个入口函数，后面的不会覆盖前面的2.jQuery入口函数$(function(){ console.log("入口函数");})jQuery的冲突解决方案1.释放$的使用权
复制链接

扫一扫