Blogger Information
Blog 43
fans 0
comment 0
visits 26999
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jquery简单操作+2018年9月18日
Lee的博客
Original
792 people have browsed it

$()函数的常用场景:选择元素,创建元素,执行回调等

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jqery操作</title>
</head>
<body>
<script src="../lib/jquery.js"></script>
<script>

    $('<ul class="list"></ul>').appendTo('body');
    $('<li class="ali">阿里AI鉴黄师亮相网络安全宣传周:连呻吟声都能判别</li>').appendTo('.list');
    $('.list').append('<li class="mi">549元!90分即热温控羽绒服上线小米有品众筹:可连接充电宝加热</li>')

    $('li').each(function () {
        $(this).css('color','red');
    });


</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


jQuery常用的选择器操作,重点在层级和表单上

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery操作</title>
</head>
<body>
<ul>
    <li>我是列表01</li>
    <li>
        <ul>
            <li><h3>我是列表1</h3></li>
            <li>我是列表2</li>
        </ul>
    </li>
    <li><h3>我是列表03</h3></li>
</ul>

<form>
    复选框1: <input type="checkbox" checked="checked" value="复选框1"/>
    复选框2: <input type="checkbox" checked="checked" value="复选框2"/>
    复选框3:  <input type="checkbox" value="复选框3"/><br />
    不可用按钮:  <input type="button" value="不可用按钮" disabled><br />
    下拉列表框:
    <select>
        <option value="列表项1">列表项1</option>
        <option value="列表项2">列表项2</option>
        <option value="列表项3">列表项3</option>
    </select>
</form>
<script src="../lib/jquery.js"></script>
<script>
    $('li:eq(1) h3').css('color','red');

    $('li > h3').css('color','red');

    $(':checkbox:checked').css('background-color','skyblue');


</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例



常用的DOM操作有哪些?一定要结合实例完成

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jqueryd的DOM操作</title>
</head>
<body>
<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
    <li>列表5</li>
</ul>


<script src="../lib/jquery.js"></script>
<script>
    $('ul').append('<li>新东西6</li>');

    $('ul').prepend('<li>新东西1</li>')

    $('li:first').after('<li>新东西2</li>');

    $('li:contains("新东西")').replaceWith('<li style="color: #5cb85c">旧东西</li>');

    $('li:eq(3)').remove();



</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例



jQuery与原生javascript相比,有哪些优势,哪些劣势

与JavaScript相比,jQuery的语法更加简单。通过jQuery,可以很容易地浏览文档、选择元素、处理事件以及添加效果等,同时还允许开发者定制插件。

优点:

jQuery消除了JavaScript跨平台兼容问题。

相比其他JavaScript和JavaScript库,jQuery更容易使用。

jQuery有一个庞大的库/函数。

jQuery有良好的文档和帮助手册。

jQuery支持AJAX。

缺点:

由于不是原生JavaScript语言,理解起来可能会受到限制。

项目中需要包含jQuery库文件。如果包含多个版本的jQuery库,可能会发生冲突。



总结:jquery,其实也没什么方便,也是一大堆东西,看不出优势!

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post