美文网首页
前端学习笔记—JavaScript和jQuery

前端学习笔记—JavaScript和jQuery

作者: 木溪bo | 来源:发表于2024-03-12 10:17 被阅读0次

一、JavaScript使用

  • JavaScript核心对象之一是Function,Function是一个内置类(或构造函数)。每定义一个函数就是实例化创建了一个Function函数对象,函数名就是这个对象的实例名引用。当我们用 function 关键字定义一个函数时,它实际上是创建了一个函数对象,而不是通过构造函数实例化得到的。
    在函数体内部可以用arguments对象关键字获取到当前整个函数的实参数组。函数在 JavaScript 中是第一类公民(first-class citizen),它们可以被赋值给变量、作为参数传递给其他函数,甚至可以在他函数中作为返回值返回。每个通过Function构造函数创建的函数对象都有一个prototype属性,且具有call、apply、bind等方法。
作为函数变量赋值
say_Hello=say_Bye//变量赋值
say_Hello()//输出 "bye"
function say_Hello(){
    console.log("Hello");
}
function say_Bye(){
    console.log("bye");
}
function Person(name) {
  this.name = name;
}
var personInstance = new Person("Alice");

在这个例子中,Person 是一个函数,而 personInstance 是由 Person 函数实例化出来的对象实例。
所以严格来说,不是每一个函数都是实例化对象,但每一个函数都可以用来实例化对象。

JavaScript分为函数对象和普通对象 ,每个对象都有proto属性,但是只有函数对象才有prototype属性,prototype属性就是函数的原型对象。
比如说 构造函数通过new 实例化一个实例对象,实例对象的proto 指向原型对象 ,同时构造函数prototype也指向原型对象。
注意:所有对象都有一个内部[[Prototype]]链接,但proto属性是一个非标准的、在某些环境中可用的方式来访问这个链接。并不是所有的环境都支持proto作为一个可访问的属性,因此最好使用Object.getPrototypeOf()和Object.setPrototypeOf()方法来获取和设置原型链接。

image.png
$(function () {
            //----普通对象示例----
            var greet1 = new test();
            // 普通对象不是 Function 类型的实例
            console.log(typeof greet1); // 输出 "object"
            console.log(greet1 instanceof Function); // 输出 false

            //----函数对象示例---
            var greet2 = function () {
                console.log("Hello, my name is zz");
            };
            // greet2 是一个函数对象,所以它是 Function 类型的实例
            console.log(typeof greet2); // 输出 "function"
            console.log(greet2 instanceof Function); // 输出 true

            //----函数对象有原型属性 prototype,普通对象没有----
            console.log(greet1.prototype); // 输出 undefined,因为普通对象没有原型属性
            console.log(greet2.prototype); // 输出函数的原型对象
        });
        function test() {
            console.log('test1');
        }
}
image.png
  • doucument是window对象的一个属性,window.document.getxxxx()函数,可以省略window书写document.getxxxx();也有其他属性window.sceen.width获取屏幕宽度等。原生JavaScript需要控制CSS样式显示需要通过.style属性设置,如document.getElementById("endid").style.backgroundColor='#66ffff'

  • 在JavaScrip中可以使用viewObj.innerHTML=“新内容”新增或者替换内容,也可以使用函数添加
    尾部新增子内容 viewObj.appendChild()
    头部新增插入子内容 viewObj.insertBefore(newObj,oldObj)
    新内容替换就内容 viewObj.replaceChild(newObj,oldObj)。一次性插入一大段内容使用innerHTML节省资源,细节元素比较多的内容采用appendChild()等DOM操作好控制。

  • 事件类型
    事件是一个U型传递的,注册事件使用 viewObj1.addEventListener("click",function(){})

 <script>
        var viewObj1 = document.getElementById('clickkk')
//点击事件,方式1
        viewObj1.addEventListener("click", function () {
            alert('点击事件发生了')
        })
//点击事件,方式2
        viewObj1.onclick = function () {
            alert('点击事件发生了')
        }
    </script>
1 image.png

二、jQuery使用

1、简介:

  • jQuery是一个javaScript封装框架是一个函数库,能够简化原生JavaScript的使用。jQuery是围绕DOM树设计的,它是一个集JavaScript、CSS、DOM、AJAX于一体的强大框架,能够处理 HTML/JSP/XML、CSS、DOM、事件、实现动画效果,也能提供异步 AJAX。同样还有其他同类型优秀的框架,如Vue和React等。jQuery与其他框架思想结构有所不同,但是现在更加流行的是Vue和React。

  • DOM(Doucument Object Model)即文档对象模型。在浏览器中,DOM的HTML分析器将一个页面转换成一个对象模型的集合,通常称为DOM树。浏览器通过对这个DOM对象模型操作来线上HTML页面。通过DOM对象的接口,js可以在任何时候访问HTML文档中的任何数据,利用DOM的接口可以无限制的控制HTML页面,可以动态的创建文档,遍历文档结构,对页面结构上的元素进行增、删、改等操作,改变文档的显示方式等

  • bootcdn远程cdn资源

    微信截图_20240308104921.png
    image.png

1.使用jQuery核心函数:$/jQuery
2.使用jQuery核心对象:执行$()返回的对象


核心.png
本质.png
美元符号.png

DOM 对象加载完毕后,马上执行的函数。$(document).ready()与$()、jQuery()、window,jQuery()是等价的,所以$(document).ready()可以写成 $(function() { alert(“Hello jQuery”)}),还可以使用箭头函数再次简化。

// 在文档加载完成后执行函数内代码
//方式一,javaScript:
onload = function () {
//dom加载完成
};
// jQuery方式一:
$(function() {
//dom加载完成
//过滤选择器
    $(".nav_list .clear_fix li a:first").css("color", "#E1221A");//获取第一个
    $(".nav_list .clear_fix li a:gt(1):lt(2)").css("color", "#ffffff").css("background", "#cc221A");//获取大于1起2个
})
// jQuery方式二:
$(()=> {
    $(".nav_list .clear_fix li a:first").css("color", "#E1221A");//获取第一个
    $(".nav_list .clear_fix li a:gt(1):lt(2)").css("color", "#ffffff").css("background", "#cc221A");//获取大于1起2个
})
// jQuery方式三:
$(document).ready(function() {
    $(".nav_list .clear_fix li a:first").css("color", "#E1221A");//获取第一个
    $(".nav_list .clear_fix li a:gt(1):lt(2)").css("color", "#ffffff").css("background", "#cc221A");//获取大于1起2个
})

api文档说明.png 一般使用.png
image.png

2、jQuery选择器

选择器:就是定位条件;通知jquery函数定位满足条件的DOM对象


image.png
  • jQuery 基本选择器
    $("#pop") 选取id名为pop的元素。
    $(".pop") 选取class名为pop的元素。
    $("p") 选取 <p> 元素。
    $(".pop1,.pop2,#pop3",span) 组合选择器选取class=pop1和class=pop2,以及id=pop3和标签<span>的元素,可以任意混搭。


    image.png
<body>
    <div class="login-container">
        <h2>H5用户登录</h2>
        <form action="#">
            <input id="name" type="text" placeholder="请输入用户名" value="整数">
            <input type="password" placeholder="请输入密码" required>
            <button type="submit">登录</button>
        </form>
    </div>
    <script>
        document.querySelector('form').addEventListener('submit', function (e) {
            // javascript写法
            //获取的是一个dom对象,使用dom对象的属性value
            var domObj1 = document.getElementById('name');
            console.log(domObj1.value);

            //jQuery写法一
            //获取value属性的值,val()是jQuery对象的函数,用于读取value属性值
            console.log($('#name').val());

            //jQuery写法二
            //jQuery获取的是一个dom对象数组,可以使用dom的属性或者函数
            var domObj2= $('#name')[0];//获取第一个dom对象
            console.log(domObj2.value);

             //jQuery写法三,jQuery对象=$(dom对象)
            //创建一个jQuery对象,调用jQuery函数.val()获取值
            var jQ_Obj3= $(domObj1);
            console.log(jQ_Obj3.val());
            //或者
            var jQ_Obj4= $(domObj2);
            console.log(jQ_Obj4.val());
        });
    </script>
</body>
  • 层次选择器
    层次选择器通过 DOM 元素间的层次关系获取元素,其主要的层次关系包含后代、父子、相邻、兄弟关系,通过其中某类关系可方便快捷地定位元素。
    需要注意的是 ancestor descendant与 parent>child 选择的元素集合是不同的,前者的层次关系是且先与后代,而后者是父子关系;另外prev+next可以使用.next0)函数代替,prev~siblings可以使nextAll()函数代替。


    层次选择器.png
  • 属性选择器
    jQuery 使用 XPath 表达式来选择带有给定属性的元素。
    $("[href]") 选取所有带有 href 属性的元素。
    $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
    $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
    $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。


    image.png
  • 过滤选择器(用的场景较多)


    image.png

对已经定位到数组中的DOM对象再进行过滤筛选,再次定位选择。$("选择器dom对象:过滤器")

$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
简单过滤选择器根据某类过滤规则进行元素的匹配,书写时都以冒号(:)开头


简单过滤选择器1.png
简单过滤选择器2.png
过滤选择器示例1.png
过滤选择器示例2.png
简单过滤选择器3.png

内容过滤选择器


内容过滤选择器.png
属性过滤选择器
属性过滤选择器1.png
属性过滤选择器2.png
子元素过滤选择器
子元素过滤选择器.png
表单对象属性过滤选择器
表单对象属性过滤选择器.png
  • 表单选择器


    image.png
 //$(":type属性名") type必须是下表中的值
 $(":checkbox").css("background-color","#B2E0FF");
//结合表单对象属性过滤选择器
 $(":checkbox:selected").css("background-color","#B2E0FF");
image.png

3、jQuery事件

事件1 事件2
事件3.png

4、属性函数

常见使用函数.png
示例1:
 <div>第1个内容~</div>
 <div>第2个内容~</div>

 console.log($("div").text());

最后输出字符串拼接值:第1个内容~第2个内容~

示例2:
 <input id="name" type="text" placeholder="请输入用户名" value="名字">
 console.log($("#name").attr('placeholder'));

获取指定属性placeholder的值,最后输出值:请输入用户名

使用.attr(属性名,属性值)设置更改任意属性值,value和text属性值推荐可以通过函数$(选择器).val(值)和$(选择器).text(值)设置


函数1.png

$(选择器).append("<div>我动态添加的 div</div>")

函数2.png
函数3.png
函数4

4、网络请求

原生js网络请求.png
//原生JavaScript  ajax网络请求
  var usernameStr = '超人来了';
        var xhrSend = new XMLHttpRequest();
        xhrSend.open('POST', 'http://localhost:8000/muxiInfo', true);
        xhrSend.setRequestHeader('Content-Type', 'application/json');
        xhrSend.send(JSON.stringify({ UserName: usernameStr }));
    //----------同步写法---onload
        xhrSend.onload = function () {
            if (xhrSend.status == 200) {
                console.log('--sendTest-接收:' + xhrSend.responseText);
                var data = JSON.parse(xhrSend.responseText);
                httpShow.innerHTML = data.message;
            } else {
                httpShow.innerHTML = '异常了呢';
            }
        };
   //-----------异步写法----onreadystatechange
  xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                isSending = false;
                if (xhr.status == 200) {
                   console.log('--sendTest-接收:' + xhrSend.responseText);
                    httpShow.innerHTML = xhr.response;
                } else {
                    httpShow.innerHTML = '请求成功,但是返回异常了呢';
                }
            } else {
                //其他状态,时刻监听
            }
        }
image.png ajax1.png
//jQuery框架  ajax网络请求
 $.ajax({
            url: 'http://localhost:8000/muxiInfo',
            //请求参数
            data: { UserName: '李牛Ajax' },
            //请求类型POST/GET,不区分大小写
            type: 'POST',
            //发送server的参数类型
            contentType: 'application/json',
            //期望server响应返回的结果类型
            dataType: 'json',
            //是否异步请求,默认true
            async:true,
           //超时时间
            timeout: 2000,
            //成功回调
            success: function (data) {
                console.log(data);
                httpShow.innerHTML = data.message;
            },
            //失败回调
            error: function (e) {
                httpShow.innerHTML = e
            }
        })

相关文章

  • 前端

    前端部分 主要学习搭建软件界面,包含了HTML、CSS、JavaScript、jQuery。 HTML(hyper...

  • JQuery零基础语法速学

    JQuery学习笔记 1.认识JQuery 简介 JQuery是一个JavaScript库,语法简洁,有跨平台的兼...

  • jQuery EasyUI泛读

    最近在看jQuery的EasyUI,当前公司也是用这个前端框架的。EasyUI的学习节奏和JavaScript等不...

  • 前端面试1

    前端面试问题集锦 JavaScript 部分 1、JQuery $(document).ready() 和 win...

  • 锋利的jQuery笔记1

    标签: 我的笔记 认识jQuery jQuery对象和DOM对象 DOM对象可以通过javascript获取。 j...

  • java

    前端:bootstrap JavaScript jQuery后端:ORM技术,MVC模式,开源框架,spring

  • [稀土掘金日报] 2015 前端干货内容回顾

    今天的干货内容涵盖了最佳的 JavaScript 前端框架、库和工具。以及 jQuery,Angular,Reac...

  • web前端入门基础

    web前端基础笔记 学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了...

  • 学习:简谈前端后端

    一、概览 前端知识:HTML,CSS,JavaScript,jQuery,Bootstrap 后端知识:HTTP服...

  • NODE01-Node.js基础使用

      前端技术的发展主要还是Javascript推动,当HTML+CSS+Javascript的发展到jQuery的...

网友评论

      本文标题:前端学习笔记—JavaScript和jQuery

      本文链接:https://www.haomeiwen.com/subject/zzwkzdtx.html