jQuery基础学习

最新推荐文章于 2023-12-03 23:03:23 发布
最新推荐文章于 2023-12-03 23:03:23 发布
阅读量407 收藏
点赞数
分类专栏： Web # JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45651336/article/details/105280807
版权

目录

jQuery是一个快速、简洁的JavaScript框架。

1.jQuery的介绍

1.1. jQuery的定义

jQuery是对JavaScript的封装，它是免费、开源的JavaScript函数库，jQuery 极大地简化了 JavaScript 编程。

1.2. jQuery的作用

jQuery和JavaScript它们的作用一样，都是负责网页行为操作，增加网页和用户的交互效果的，只不过jQuery简化了JavaScript编程，jQuery实现交互效果更简单。

1.3. jQuery的优点

  • jQuery兼容了现在主流的浏览器，增加了程序员的开发效率。
  • jQuery简化了 JavaScript 编程，代码编写更加简单。

2.jQuery的用法

2.1 jQuery的下载

下载网址:https://code.jquery.com/
选择对应的版本进行下载:
在这里插入图片描述

说明

建议使用1.x版本这个兼容性会更好一点

建议使用minified(压缩版),体积会更小一点

2.2 jQuery的引入

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

2.3 jQuery 函数常用语法

jQuery 函数常用语法：

$是jquery专用的特殊符号，可以说所有jquery函数的调用都是从 开 始 的 , 可 以 理 解 成 开始的,可以理解成 开始的,可以理解成就是jQuery的别称

语法 1
jQuery(css选择器)

  • 接受一个字符串，其中包含了用于匹配元素集合的 CSS 选择器：
    html代码
<div id = 'div01'>点我啊!</div>

jQuery代码

<script>
// 给div设置点击事件
$('#div01').click(function () {
    alert("我被点击了!")
});

javaScript代码

// 得到div控件
var div_01 = document.getElementById("div01")
// 设置div控制的点击事件
div_01.onclick = function(){
    alert("点击了")
}

语法 2
jQuery( 函数 )

  • 在页面所有元素准备完毕之后，载入页面之前执行本方法
    html代码
<div >展示内容</div>

jQuery代码

<script>
// 表示文档结构已经加载完成（不包含图片等非文字媒体文件）
// 这个是jQuery提交一种简洁写法,相当于$(document).ready()
$(function(){
    alert("文档结构加载完了");
});

// $(documetn)得到jQuery对象,调用ready方法,在文档结构加载完成后,执行相应函数
$(document).ready(function(){
    alert("文档结构加载完了")
});

</script>

javaScript代码

 // 文档显示完毕
window.onload = function(){
    alert("文档加载完毕了!")
}

说明

我们知道使用js获取标签元素，需要页面加载完成以后再获取，我们通过给onload事件属性设置了一个函数来获取标签元素，而jquery提供了ready函数来解决这个问题，保证获取标签元素没有问题，它的速度比原生的 window.onload 更快。

3.jQuery选择器

3.1. jQuery选择器的介绍

jquery选择器就是快速选择标签元素，获取标签的，选择规则和css样式一样。

3.2. jQuery选择器的种类

  • 标签选择器
  • 类选择器
  • id选择器
  • 层级选择器
  • 属性选择器(扩展)

示例代码:

使用说明

$('#myId') //选择id为myId的标签
$('.myClass') // 选择class为myClass的标签
$('li') //选择所有的li标签
$('#ul1 li span') //选择id为ul1标签下的所有li标签下的span标签
$('input[name=first]') // 选择name属性等于first的input标签复制

html代码

<!--使用标题选择器,设置字体颜色-->
<ul>
    <li>itcast</li>
    <li>黑马</li>
    <li>百度</li>
</ul>

<!--使用类选择器,设置字体颜色-->
<p class="p1">
    内容1
</p>

<!--使用id选择器,设置点击事件-->
<p id="p2">
    内容2
</p>

<!--使用层级选择器,设置字体颜色-->
<div>
    <h1>一级标题</h1>
    <input type="password" name="content">
</div>

<!--使用属性选择器,设置背景了解-->
<input type="text" name="content">
<input type="password" name="pwd">

jQuery代码

// 文档加载完毕
$(function () {

    /*div设置颜色*/
    $('li').css({"color": "red"});

    /*class为p1的设置颜色*/
    $(".p1").css({"color": "green"});

    /*id为p2的设置点击事件*/
    $("#p2").click(function () {
        alert("内容2被点击了")
    });

    /*设置div内子标签为h1的标题标签设置颜色*/
    $("div h1").css({"color": "blue"});

    /*为属性为name的设置背景*/
    $('input[name=content]').css({"background": "#d0d0d0"});


});

扩展

可以使用length属性来判断标签是否选择成功, 如果length大于0表示选择成功，否则选择失败。

$(function(){
   /*得到选择的元素个数*/
   result = $("div").length;
   alert(result);
});

4.选择集过滤

4.1. 选择集过滤的介绍

选择集过滤就是在选择标签的集合里面过滤自己需要的标签

4.2. 选择集过滤的操作

  • has(选择器名称)方法，表示选取包含指定选择器的标签
  • eq(索引)方法，表示选取指定索引的标签
4.2.1 选择集过滤之has方法

html代码

  <div>
        <!-- 这是第一个div -->
        <!-- 通过选择器has更改h1的样式 -->
        <h1 id='h1_id'>一级标题</h1>
    </div>

    <div>
        <!-- 这是第二个div -->
        <h1>一级标题1</h1>
    </div>

jQuery代码

   <script>
        $(function () {
            //  has方法的使用
            var div = $("div").has("#h1_id");
            //  设置样式
            div.css({
                 "background": "#D0D0D0"
            });
        });
    </script>
4.2.1 选择集过滤之eq方法

html代码

  <!-- 第一个div -->
    <div>
        内容1
    </div>
    <!-- 第二个div -->
    <!-- 第二个div设置背景 -->
    <div>
        内容2
    </div>

jQuery代码

<script>
$(function () {
    //  eq方法的使用,参数填写元素集中的序号,序号以0开始
    var div = $("div").eq(1)
    //  设置样式
    div.css({
        "background": "#D0D0D0"
    });
});
</script>

5.选择集转移

5.1. 选择集转移介绍

选择集转移就是以选择的标签为参照，然后获取转移后的标签,简单的理解就是"反选"

5.2. 选择集转移操作

  • $(’#box’).prev(); 表示选择id是box元素的上一个的同级元素
  • $(’#box’).prevAll(); 表示选择id是box元素的上面所有的同级元素
  • $(’#box’).next(); 表示选择id是box元素的下一个的同级元素
  • $(’#box’).nextAll(); 表示选择id是box元素的下面所有的同级元素
  • $(’#box’).parent(); 表示选择id是box元素的父元素
  • $(’#box’).children(); 表示选择id是box元素的所有子元素
  • $(’#box’).siblings(); 表示选择id是box元素的其它同级元素
  • $(’#box’).find(’.myClass’); 表示选择id是box元素的class等于myClass的元素
    选择集转移的示例代码:

html代码

  <div>
        <div class="bd">百度</div>
        <div>google</div>
        <div id="hm">黑马
            <div>孩子1</div>
            <div class="div02">孩子2</div>
        </div>
        <div>传智</div>
        <div>python</div>
    </div>

需求

/*选择div中id为'hm'的上面的一个元素*/

/*选择div中id为'hm'的上面所有的元素*/

/*选择div中id为'hm'的下面的一个元素*/

/*选择div中id为'hm'的下面的所有元素*/

/*选择div中id为'hm'的父元素*/

/*选择div中id为'hm'的兄弟元素*/

/*选择div中id为'hm'的子元素*/

/*选择div中id为'hm'的子元素中找到类名为.div02的子元素*/

jQuery代码

<script>
        /*文档结构加载完以后执行*/
       $(function () {
            /*选择div中id为'hm'的上面的一个元素*/
            $("#hm").prev().css({
                "color": "red"
            })
            /*选择div中id为'hm'的上面所有的元素*/
            $("#hm").prevAll().css({
                "color": "red"
            })

            /*选择div中id为'hm'的下面的一个元素*/
            $("#hm").next().css({
                "color": "red"
            })

            /*选择div中id为'hm'的下面的所有元素*/
            $("#hm").nextAll().css({
                "color": "red"
            })

            /*选择div中id为'hm'的父元素*/
            $("#hm").parent().css({
                "color": "red"
            })

            /*选择div中id为'hm'的兄弟元素*/
            $("#hm").siblings().css({
                "color": "green"
            })

            /*选择div中id为'hm'的子元素*/
            $("#hm").children().css({
                "color": "red"
            })

            /*选择div中id为'hm'的子元素中找到类名为.div02的子元素*/
            $("#hm").find(".div02").css({
                "color": "red"
            })

        });
</script>

6.获取和设置元素内容

jquery中的html方法可以获取和设置标签的html内容

示例代码:

html代码

<!-- 展示的内容 -->
<div id="div1">
    <p>hello</p>
</div>

jQuery代码

<script>
    $(function(){

        var $div = $("#div1");
        //  获取标签的html内容
        var result = $div.html();
        // 打印信息
        alert(result);
        //  设置标签的html内容，之前的内容会清除
        $div.html("<span style='color:red'>你好</span>");
        //  追加html内容
        $div.append("<span style='color:red'>python</span>");

    });
</script>

说明

给指定标签追加html内容使用append方法

7.获取和设置元素属性

  1. prop方法的使用
    之前使用css方法可以给标签设置样式属性，那么设置标签的其它属性可以使用prop方法了。

示例代码:

html代码

<!--超链接-->
<a href="http://www.baidu.com">百度</a>

jQuery代码

<script>
    // 文档加载完毕
    $(function () {
        /*超链接*/
        a_href =  $('a').prop("href")

        /*打印得到的值*/
        alert(a_href)

        /*修改值*/
        $('a').prop({"href":"http://www.itcast.cn"})

    });
</script>

扩展: 获取value属性和设置value属性还可以通过val方法来完成。

value属性操作
示例代码

html代码


123

jQuery代码

<script>
/*文档结构加载完*/
$(function () {
    /*通过val()方法得到id为input01的对象值*/
    var input_value = $('#input01').val();
    /*打印信息*/
    alert("得到的值:"+input_value)

    /*修改原先的值*/
    $("#input01").val("新值456")
})
</script>

8.jQuery事件

  • click() 鼠标单击
  • blur() 元素失去焦点
  • focus() 元素获得焦点
  • mouseover() 鼠标进入（进入子元素也触发）
  • mouseout() 鼠标离开（离开子元素也触发）
  • ready() DOM加载完成
    示例代码:

html

<!--输入框-->
<input type="text" id="text1">
<!--按钮-->
<input type="button" id="button1" value="点击">

<!--超链接-->
<a href="http://www.itcast.cn" id="a1">itcast</a>

需求

 /*文档结构加载完以后执行事件*/

 /*给按钮添加一个点击事件*/

/*给input添加一个获取焦点事件*/

/*给input添加一个失去焦点事件*/

/*给超链接添加一个鼠标移动的事件*/

 /*给超链接添加一个鼠标移动的事件*/

jQuery代码


<script>
/*文档结构加载完以后执行*/
$(function () {
    /*得到三个控件的jQuery对象*/
    var $text1 = $('#text1');
    var $button1 = $('#button1');
    var $button1 = $('#button1');
    var $a1 = $('#a1');

    /*给按钮添加一个点击事件*/
    $button1.click(function () {
        alert("我被点了!")
    });

    /*给input添加一个获取焦点事件*/
    $text1.focus(function () {
        console.log("获取焦点")
    });

    /*给input添加一个失去焦点事件*/
    $text1.blur(function () {
        console.log("失去焦点")
    });

    /*给超链接添加一个鼠标移动的事件*/
    $a1.mouseover(function () {
        console.log("鼠标移入")
    });

    /*给超链接添加一个鼠标移动的事件*/
    $a1.mouseout(function () {
        console.log("鼠标移出")
    });

});
</script>

说明

  • this指的是当前发生事件的对象，但是它是一个原生js对象

  • $(this) 指的是当前发生事件的jquery对象

this扩展使用
示例代码

html代码

<!--输入框-->
<input type="text" id="text1">

jQuery代码

<script>
    /*文档结构加载完以后执行*/
    $(function () {
        /*得到控件*/
        var $text1 = $("#text1");

        /*设置获取焦点事件*/
        $text1.focus(function () {
            /*使用js原生也可以*/
            /*得到js对象进行背景设置*/
            var text1 = document.getElementById("text1");
            text1.style.background = "green";

            /*使用this简化写法,this代表当前点击的对象*/
            this.style.background = "green";



        });

        /*设置失去焦点事件*/
        $text1.blur(function () {
            /*把当前的输入框更改一下背景*/
            $text1.css({"background":"green"});

            /*别一种jQuery写法*/
            $(this).css({"background":"green"});

        });


    });
</script>

9.事件代理

9.1. 事件代理介绍

事件代理就是利用事件冒泡的原理(事件冒泡就是事件会向它的父级一级一级传递),把事件加到父级上，通过判断事件来源，执行相应的子元素的操作，事件代理首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

事件冒泡代码:

html代码

<div id="div1" style="width:200px; height:200px; background: red;">
    <div id="div2" style="width:100px; height:100px;background: yellow;">
        哈哈
    </div>
</div>

jQuery代码


 <script>
    $(function(){
        // 得到两个div控件
        var $div1 = $('#div1');
        var $div2 = $('#div2');

        // 外层div设置点击事件
        $div1.click(function(){
            alert($div1.html());
        }); 

        // 内层div设置点击事件
        $div2.click(function(){
            alert($div2.html());
        }); 
    });
</script>

说明:

当点击子元素div，它的点击事件会向它父元素传递，也会触发了父元素的点击事件，这就是事件冒泡。

9.2. 事件代理的使用

一般绑定事件的写法:

需求:给每个li绑定点击事件

html代码

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

jQuery代码

$(function(){
    $ali = $('#list li');
    $ali.click(function() {
       /*this得到当前被点击的对象*/
       /*打印当前被点击条目的内容*/
       console.log($(this).html());
    });
})

事件代理的写法

html代码

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

jQuery代码

$(function(){
    $list = $('#list');
    // 父元素ul 来代理 子元素li的点击事件
    $list.delegate('li', 'click', function() {
        // $(this)表示当前点击的子元素对象
        console.log($(this).html())
    });
})

delegate方法参数说明

delegate(childSelector,event,function)

  • childSelector: 子元素的选择器
  • event: 事件名称，比如: ‘click’
  • function: 当事件触发执行的函数

10.JavaScript对象

10.1. JavaScript对象的介绍

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数等都可以认为是对象，此外，JavaScript 允许自定义对象，对象可以拥有属性和方法。

10.2. JavaScript创建对象操作

创建自定义javascript对象有两种方式:

  • 通过顶级Object类型来实例化一个对象
  • 通过对象字面量创建一个对象
    Object类创建对象的示例代码:
<script>
    var person = new Object();

    // 添加属性：
    person.name = 'tom';
    person.age = '25';

    // 添加方法：
    person.sayName = function(){
        alert(this.name);
    }

    // 调用属性和方法：
    alert(person.age);
    person.sayName();
</script>

对象字面量创建对象的示例代码:

<script>
    var person2 = {
        name:'Rose',
        age: 18,
        sayName:function(){
            alert('My name is' + this.name);
        }
    }

    // 调用属性和方法：
    alert(person2.age);
    person2.sayName();
</script>

说明:

调用属性和方法的操作都是通过点语法的方式来完成，对象的创建推荐使用字面量方式，因为更加简单。

11.json

11.1. json的介绍

json是 JavaScript Object Notation 的首字母缩写，翻译过来就是javascript对象表示法，这里说的json就是类似于javascript对象的字符串，它同时是一种数据格式，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。

11.2. json的格式

json有两种格式：

  • 对象格式
  • 数组格式

对象格式:

对象格式的json数据，使用一对大括号({})，大括号里面放入key:value形式的键值对，多个键值对使用逗号分隔。

对象格式的json数据:

{
    "name":"tom",
    "age":18
}

格式说明:

json中的(key)属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。

数组格式:

数组格式的json数据，使用一对中括号([])，中括号里面的数据使用逗号分隔。

数组格式的json数据:

["tom",18,"programmer"]

实际开发的json格式比较复杂,例如:

{
    "name":"jack",
    "age":29,
    "hobby":["reading","travel","photography"]
    "school":{
        "name":"Merrimack College",
        "location":"North Andover, MA"
    }
}

11.3. json数据转换成JavaScript对象

json本质上是字符串，如果在js中操作json数据，可以将json字符串转化为JavaScript对象。

示例代码:

var sJson = '{"name":"tom","age":18}';
var oPerson = JSON.parse(sJson);

// 操作属性
alert(oPerson.name);
alert(oPerson.age);

12.ajax

12.1. ajax的介绍

ajax 是 Asynchronous JavaScript and XML的简写，ajax一个前后台配合的技术，它可以让 javascript 发送异步的 http 请求，与后台通信进行数据的获取，ajax 最大的优点是实现局部刷新，ajax可以发送http请求，当获取到后台数据的时候更新页面显示数据实现局部刷新，在这里大家只需要记住，当前端页面想和后台服务器进行数据交互就可以使用ajax了。

这里提示一下大家, 在html页面使用ajax需要在web服务器环境下运行, 一般向自己的web服务器发送ajax请求。

12.2. ajax的使用

jquery将它封装成了一个方法$.ajax()，我们可以直接用这个方法来执行ajax请求。

示例代码:

<script>
    $.ajax({
    // 1.url 请求地址
    url:'http://t.weather.sojson.com/api/weather/city/101010100',
    // 2.type 请求方式，默认是'GET'，常用的还有'POST'
    type:'GET',
    // 3.dataType 设置返回的数据格式，常用的是'json'格式
    dataType:'JSON',
    // 4.data 设置发送给服务器的数据, 没有参数不需要设置
​
    // 5.success 设置请求成功后的回调函数
    success:function (response) {
        console.log(response);    
    },
    // 6.error 设置请求失败后的回调函数
    error:function () {
        alert("请求失败,请稍后再试!");
    },
    // 7.async 设置是否异步，默认值是'true'，表示异步，一般不用写
    async:true
});
</script>

ajax方法的参数说明:

  1. url 请求地址

  2. type 请求方式，默认是’GET’，常用的还有’POST’

  3. dataType 设置返回的数据格式，常用的是’json’格式

  4. data 设置发送给服务器的数据，没有参数不需要设置

  5. success 设置请求成功后的回调函数

  6. error 设置请求失败后的回调函数

  7. async 设置是否异步，默认值是’true’，表示异步，一般不用写

  8. 同步和异步说明

    • 同步是一个ajax请求完成另外一个才可以请求，需要等待上一个ajax请求完成，好比线程同步。
    • 异步是多个ajax同时请求，不需要等待其它ajax请求完成， 好比线程异步。

ajax的简写方式:

. a j a x 按 照 请 求 方 式 可 以 简 写 成 .ajax按照请求方式可以简写成 .ajax按照请求方式可以简写成.get或者$.post方式

ajax简写方式的示例代码:

 <script>
    $(function(){
        /*
         1. url 请求地址
         2. data 设置发送给服务器的数据, 没有参数不需要设置
         3. success 设置请求成功后的回调函数
         4. dataType 设置返回的数据格式，常用的是'json'格式, 默认智能判断数据格式
        */ 
        $.get("http://t.weather.sojson.com/api/weather/city/101010100", function(data,status){
            console.log(data);
            console.log(status);
            alert(data);
        }).error(function(){
            alert("网络异常");
        });

        /*
         1. url 请求地址
         2. data 设置发送给服务器的数据, 没有参数不需要设置
         3. success 设置请求成功后的回调函数
         4. dataType 设置返回的数据格式，常用的是'json'格式, 默认智能判断数据格式
        */ 
        $.post("test.php", {"func": "getNameAndTime"}, function(data){
            alert(data.name); 
            console.log(data.time); 
        }, "json").error(function(){
            alert("网络异常");
        }); 
    });


</script>

. g e t 和 .get和 .get和.post方法的参数说明:

  • $.get(url,data,success(data, status, xhr),dataType).error(func)
  • $.post(url,data,success(data, status, xhr),dataType).error(func)
  • 1 url 请求地址
  • 2 data 设置发送给服务器的数据，没有参数不需要设置
  • 3 success 设置请求成功后的回调函数
    • data 请求的结果数据
    • status 请求的状态信息, 比如: “success”
    • xhr 底层发送http请求XMLHttpRequest对象
  • 4 dataType 设置返回的数据格式
    • “xml”
    • “html”
    • “text”
    • “json”
  • 5 error 表示错误异常处理
    • func 错误异常回调函数

12.3. 获取个人中心数据

  1. 根据用户请求返回个人中心空模板文件数据
@route("/center.html")
def center():
    # 响应状态
    status = "200 OK"
    # 响应头
    response_header = [("Server", "PWS2.0")]

    # 打开模板文件，读取数据
    with open("template/center.html", "r") as file:
        file_data = file.read()

    # 替换模板文件中的模板遍历
    result = file_data.replace("{%content%}", "")

    return status, response_header, result
  1. 在个人中心模板文件添加ajax请求获取个人中心数据
// 发送ajax请求获取个人中心页面数据
// 路径写成 center_data.html，发送ajax的时候路径其实是http://ip地址:端口号/center.data.html
$.get("center_data.html", function (data) {
        alert(data);
    }
}, "json");
  1. 将个人中心数据在页面完成展示

// 发送ajax请求获取个人中心页面数据
$.get("center_data.html", function (data) {

    var data_array = data;

    // 获取table标签对象
    var $table = $(".table")
    for(var i = 0; i < data_array.length; i++){
        // 获取每一条对象
        var center_obj = data_array[i];
        var row_html = '<tr>' +
            '<td>'+ center_obj.code +'</td>' +
            '<td>'+ center_obj.short +'</td>' +
            '<td>'+ center_obj.chg +'</td>' +
            '<td>'+ center_obj.turnover +'</td>' +
            '<td>'+ center_obj.price +'</td>' +
            '<td>'+ center_obj.highs +'</td>' +
            '<td>'+ center_obj.note_info +'</td>' +
            '<td><a type="button" class="btn btn-default btn-xs" href="/update/000007.html"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> 修改 </a></td><td><input type="button" value="删除" id="toDel" name="toDel" systemidvaule="000007"></td></tr>';
        // 为table标签添加每一行组装的html数据
        $table.append(row_html);
    }

}, "json");

12.4. 小结

  • ajax 是发送http请求获取后台服务器数据的技术
  • ajax的简写方式可以使用 . g e t 和 .get和 .get和.post方法来完成
鞋子不会飞
关注
专栏目录
JQuery入门学习笔记
若闲小阁
06-08 480
个人博客原文链接 JQuery是一个JavaScript的框架，是对JavaScript的一种封装。 ### 一. 基础知识点 1. 使用jquery前需导入jquery.min.js 2. 文档加载 为了防止在完全加载之前就运行了JQuery代码,有以下两种方式 $(function(){ }); 或 $(document).ready(function(){ }); ...
jQuery基础学习技巧总结第1/4页
10-30
### jQuery基础学习技巧总结 #### 一、简介与特点 ##### 1.1 概述 随着互联网技术的发展，特别是WEB2.0和Ajax技术的兴起，越来越多的JavaScript框架应运而生，如Prototype、YUI、jQuery、MooTools、Bindows以及...
2021面试题——jQuery面试题总结
yizhangzzzz的博客
04-22 4726
jQuery面试题 1.jQuery库中的$是什么 $ ()函数是jQuery（）函数的别称。$ ()函数用于将任何对象包裹成jquery对象，接着你就被允许调用定义在jQuery对象上的多个不同方法。你可以将一个选择器字符串传入$函数，他会返回一个包含所有匹配的dom元素数组的jQuery对象 2.如何找到所有HTML select标签的选中项？ $(’[name=selectname]:selected’) 3.$（this）和this关键字在jquery中有何不同？ $(this)返一个jQuery对
15个基础的jQuery面试问题
xinyuan的专栏
10-31 1386
15个基础的jQuery面试问题
jquery基础整理（面试必备）
weixin_34187862的博客
03-03 128
（1）Ajax的关键步骤和注意事项 （2）你知道哪些针对jQuery的优化方法 （3）请解释.end()的用途 （4）请说出你可以传递给jQuery方法的四种不同值 （5）请指出.get()，[]，eq()的区别。 （6）请指出$和$.fn的区别，或者说出$.fn的用途。 （7）请写出一个函数实现N!的计算。 （8）jQuery 是一个 JavaScript 库。jQuery 极...
JQuery基础
04-03 207
今日内容 1. JQuery基础： 1. 概念 2. 快速入门 3. JQuery对象和JS对象区别与转换 4. 选择器 5. DOM操作 6. 案例 JQuery基础： 1. 概念： 一个JavaScript框架。简化JS开发 * jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库 （或JavaScript框架...
Jquery 基础学习笔记之文档处理
12-11
主要包括以下几部分：（1）内部插入（2）外部... HTML 代码: <p>I would like to say: </p> jQuery 代码: $(“p”).append(“<b>Hello”); 结果: [ <p>I would like to say: <b>Hello</b></p> ] （2）appendTo(content)
jquery基础学习实例集.rar
07-10
jquery基础学习实例集，jquery初学者实例大全，里面一共包括了三季内容，有些是作者自创的实例，有些是从网络上下载然后修改的，对jquery初学者来说，非常实用且基础的实例，比如一些弹出信息框、伪装链接、无刷新...
jquery基础学习代码
06-29
**jQuery基础学习代码详解** jQuery是一款广泛应用于前端开发的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。对于初学者来说，掌握jQuery的基础知识是提升网页开发效率的关键。本资源...
JQuery面试题2
weixin_30407613的博客
07-27 675
1. 在公司是怎么用jquery的？ 基本选择器：1 基本选择器。 #id：id选择器。 .class：类选择器. 标签选择器：根据指定的元素名匹配元素。 群主选择器:将每一个匹配的元素合并并返回,以分号隔开。 *：通配符选择器，匹配所有的元素。 2 层次选择器 空格：选取指定元素的后代元素。 >：选取指定下的所有子元素。 +：选取紧接着的兄...
jQuery相关面试题
weixin_30675967的博客
08-22 1437
1你在公司是怎么用jquery的？ 答：在项目中是怎么用的是看看你有没有项目经验(根据自己的实际情况来回答)你用过的选择器啊，复选框啊，表单啊，ajax啊，事件等 配置Jquery环境下载jquery类库在jsp页面引用jquery类库即可 <scripttype="text/javascript"src="jquery/jquery-1.7.2.min.js"/...
前端基础面试题
最新发布
前端程序员、项目经理、人工智能博主
12-03 1万+
只要区别是他们的实现方式不同LESS是基于javaScript运行,所以LESS是在客户端处理，Sass是基于Ruby的，在服务端处理的，很多开发者不选择LESS是因为LESS输出修改过的CSS浏览器需要依赖JavaScript引擎，而JavaScript引擎需要额外的时间处理代码。答：该函数会按照注册（绑定）的顺序一次执行，是事件模块中最重要的一个函数，可以极大的提高Web应用程序的响应速度，jQuery就是用(document).ready()方法来代替传统的JS的window.onload方法的。
jquery级试题_常见jquery面试题
weixin_39767322的博客
12-19 577
jQuery 面试问题和答案JavaScript 是客户端脚本的标准语言，而 jQuery 使得编写 JavaScript 更加简单。你可以只用写几行的jQuery 代码就能实现更多的东西. 它是最长被用到的 JavaScript 库之一，并且现在已经很少有不用jQuery 而使用原生 JavaScript 的新项目了。这对于作为一个 Java web 开发者的你而言意味着你会在一场Java we...
HTML,Css,JavaScript,JQuery,Vue基础面试题(持续更新)
今朝有幸遇相识 无缘白头也无憾
11-10 681
1.表单中GET和POST两种提交方式的不同? Get:速度快,安全性低 通过浏览器地址栏传值,不支持中文 最多支持2000个字符,浏览器地址栏格式为key=value&keyN=valueN,只能传字符串 post:速度慢,安全性高,不通过浏览器地址栏传值,通过消息体传值,不支持中文,不限制大小,支持Json和字符串 2.表单元素 input="text" 单行文本输入框 input="password" 单行密码输入框 input="checkbox" 多选 input="radio" 单
JQuery 基础笔记
qq_43645678的博客
08-28 1万+
JQuery笔记及面试题
web开发之URL
汪云辉的博客
10-26 2173
web开发之URL1. URL的概念2. URL的组成 1. URL的概念 URL的英文全拼是(Uniform Resoure Locator),表达的意思是统一资源定位符，通俗理解就是网络资源地址，也就是我们常说的网址。 2. URL的组成 URL的样子: https://news.163.com/18/1122/10/E178J2O4000189FH.html URL的组成部分: 协议部分: https://、http://、ftp:// 域名部分: news.163.com 资源路径部分: /18/
web开发之HTTP响应报文
汪云辉的博客
10-26 1183
web开发之HTTP响应报文1. HTTP响应报文分析2. HTTP 状态码介绍 1. HTTP响应报文分析 HTTP 响应报文效果图: 响应报文说明: --- 响应行/状态行 --- HTTP/1.1 200 OK # HTTP协议版本 状态码 状态描述 --- 响应头 --- Server: Tengine # 服务器名称 Content-Type: text/html; charset=UTF-8 # 内容类型 Transfer-Encoding: chunked # 发送给客户端内容不确定内容
分布式ID
汪云辉的博客
04-12 1111
目录1 方案选择2 黑马头条 1 方案选择 UUID UUID是通用唯一识别码（Universally Unique Identifier)的缩写，开放软件基金会(OSF)规范定义了包括网卡MAC地址、时间戳、名字空间（Namespace）、随机或伪随机数、时序等元素。利用这些元素来生成UUID。 UUID是由128位二进制组成，一般转换成十六进制，然后用String表示。 550e840...
JavaScript基础学习
汪云辉的博客
04-02 997
目录1.JavaScript的介绍2.JavaScript的使用方式3.变量和数据类型4.函数定义和调用5.变量作用域6.条件语句7.获取标签元素8.操作标签元素属性9.数组及操作方法10.循环语句11.字符串拼接12.定时器 JavaScript是运行在浏览器端的脚步语言, 是由浏览器解释执行的, 简称js, 它能够让网页和用户有交互功能, 增加良好的用户体验效果。 前端开发三大块 1、HTM...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值