登录  /  注册
博主信息
博文 34
粉丝 0
评论 0
访问量 31149
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
$()函数的常用场景+jQuery常用的选择器+常用的DOM操作+jQuery的优缺点
Belifforz的博客
原创
937人浏览过
  1. $()函数的常用场景

实例

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <title>$()函数的常用场景</title>
</head>
<body>
<p class="name">张三,李四</p>
<script src="../jquery.js"></script>
<script>

    //选择元素  $开头
    $('p')[0].innerHTML='你好呀';
    // $('.name')[0].style.color='red';

    //get() 将获取到的jquery对象集合中的dom元素取出来,jquery转为dom
    $('.name').get(0).style.color='red';


    //创建元素
    $('<ul class="list"></ul>').appendTo('body');
    $('.list').append($('<li>不知道该说什么了啊?</li>'));
    $('.list').append($('<li id="whatever">随便你说呀</li>'));

    $('.list').append($('<li>',{
        class:'name',
        text:'我就不说',
        click:function () {
            alert('打***你');
        }
        }));

    //执行回调
    //each() 遍历jquery对象集合 css()就是设置标签中的style属性
    $('li').each(
        function(){
            // this.style.backgroundColor = 'grey';
            $(this).css('background-color','yellow');//jquery写法
        }
    );

    $('li')[1].setAttribute('style','color:red');

    //index()返回当前元素所在的位置
    console.log($('p.name').index());
</script>
</body>
</html>

运行实例 »

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


2.jQuery常用的选择器

实例

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <title>jQuery常用的选择器</title>
    <script src="../jquery.js"></script>
    <style>
        .highlight{
            background-color: red;
        }
        #title{
            color:gold;
        }
    </style>
</head>
<body>
<ul>
    <li>
        <h3 id="title">jQuery</h3>
    </li>
    <ul>
        <li>css</li>
        <li>
            <h3>javascript</h3>
            <ul>
                <li>php</li>
                <li>C++</li>
            </ul>
        </li>
        <li>jquery</li>
    </ul>
</ul>

邮箱: <input type="text"><br>
密码: <input type="password" name=""><br>
<input type="radio" name="grnder" value="male">男
<input type="radio" name="grnder" value="female">女<br>

<input type="checkbox" name="hobby[]" value="dance" checked>跳舞
<input type="checkbox" name="hobby[]" value="sing" checked>唱歌<br>

你的学历:
<select name="" id="">
    <option value="">幼儿园</option>
    <option value="小学" selected>小学</option>
    <option value="">初中</option>
    <option value="">其它</option>
</select>
<br>
<button type="submit">提交</button>
<button type="reset" disabled>重置</button>
</body>
<script>
    //通用选择器
    // $('*').addClass('highlight');
    //标签选择器
    $('li').addClass('highlight');
    //类选择器
    $('.highlight').css('color','blue');
    //id选择器
    $('#title').addClass('course');

    //层级选择器
    $('li:first h3').addClass('highlight');//选择li属于其父级元素的第一个的li下的 h3
    $('li:first>h3').addClass('highlight');//选择li属于其父级元素的第一个的li下的直接子元素h3

    //+ 选择相邻兄弟   ~ 选择相邻所有兄弟元素

    $("li:contains('css'):last").addClass('highlight');
    $("li:contains('css'):last  + li").addClass('highlight');//只选1个
    $("li:contains('css'):last  ~ li").addClass('highlight');

    // 选择文本框
    $('input[type="text"]').addClass('highlight');  // 属性选择器
    $(':input').not(':submit').not(':disabled').addClass('highlight');

    console.log($(':checkbox:checked').val());  // 当前选中的值
    console.log($(':checkbox').not(':checked').val());  //未被选中的值
    console.log($(':checkbox').val());  //默认返回被选中的值

    console.log($(':input :selected').val());   // 注意过滤器之间必须要加空格,类:input并不针对select

</script>
</html>

运行实例 »

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


3.常用的DOM操作

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery中的DOM操作</title>
</head>
<body>
<ul>
    <li>列表项01</li>
    <li>列表项02</li>
    <li>列表项03</li>
    <li>列表项04</li>
    <li>列表项05</li>
</ul>

<script src="../jquery.js"></script>
<script>
    //插入与替换:


    //      [1]append()和appendTo(): 将当前元素添加到父元素内部的尾部
    //1.$(父元素).append(当前元素);
    $('ul').append('<li>新元素1</li>');

    //2.$(当前元素).appendTo(父元素);
    $('<li>新元素2</li>').appendTo('ul');


    //      [2].prepend()和prependTo(): 将节点添加到父元素内部的头部
    //1.$(父元素).prepend(当前元素);
    $('ul').prepend('<li>新元素3</li>');

    //2.$(当前元素).prependTo(父元素);
    $('<li>新元素4</li>').prependTo('ul');


    //      [3].after()和insertAfter():将元素插入到当前节点的后面
    //1.$(前).after(后);
    $('li:eq(2)').after('<li>新元素5</li>');

    //2.$(后).insertAfter(前)
    $('<li>新元素6</li>').insertAfter('li:eq(4)');


    //      [4].before()和insertBefore():将元素插入到当前节点的前面
    //1.$(后).before(前);
    $('<li>新元素7</li>').insertBefore('li:eq(4)');

    //2.$(前).insertBefore(后)
    $('li:eq(4)').after('<li>新元素8</li>');


    //[5].replaceWith()和replaceAll():替换掉匹配的html内容
    //1. $(原).replaceWith(新);
    $('li:contains("新元素")').replaceWith('<li style="color:red">新元素</li>');

    //2. $(新).replaceAll(原);
     $('<li style="color:lightgreen">新元素</li>').replaceAll('li:contains("新元素")');
    // (2).empty():删除匹配到的元素集合中所有的子节点
    // (3).remove(可用selector):删除匹配的元素

    //替换:将li文本包含有: "新元素"内部的元素全部替换成指定元素



    //删除
    // $('li').remove();    // 不传参数是全部删除
    // $('li').remove(':odd'); // 删除奇数(从0开始)
    // $('ul').empty();    // 等价于 $('li').remove();



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

运行实例 »

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

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

优点:jquery语法简单,DOM操作更加的简单

缺点:需要调用jquery库类,兼容性较差

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学