博客列表 >JQuery操作之一(0917)

JQuery操作之一(0917)

Ray的博客
Ray的博客原创
2018年09月20日 23:20:04758浏览

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的导入与jQuery对象</title>
</head>
<body>
<ul>
    <li>列表项01</li>
    <li>列表项02</li>
    <li>列表项03</li>
    <li>列表项04</li>
    <li>列表项05</li>
</ul>


<!--导入jQuery函数库-->
<script src="lib/jquery.js"></script>
<script>

    $(document).ready(function(){

        //将第二个li转为dom对象
        let li = $('li')[1];
        //转为原生dom对象后,就可以使用原生的js语法来处理dom元素,例如,更新内容:
        li.innerHTML = '<span style="color:red">我是新内容</span>';

        //同样,还可以将转换后的li再转回jquery对象,这时又可以使用jquery中的方法来操作dom元素了
        $('li').eq(2).html('<span style="color:lightgreen">我又回来了</span>');
    });

    //简写:直接传递一个匿名函数给$()
    $(function(){
        //暂时还没学习jquery方法,我们先用原生dom方法来操作元素
        let li = $('li').get(3);  // 从jquey对象中获取到第四个dom元素
        li.innerHTML = '<span style="color:blue">来一波新内容</span>';
    });

    // 注意: $()可以执行多次,所以 $(function())也可以调用多次
</script>
</body>
</html>

运行实例 »

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

运行效果图:

hm01.png

2)编程: jQuery常用的选择器操作,重点在层级和表单上

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery中常用的选择器</title>
    <style>
        .highlight {
            background-color: lightgreen;
        }
        #title {
            color: blue;
        }

    </style>
</head>
<body>
<ul>
    <li>
        <h3 id="title">前端课程</h3>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>
                <h3>JavaScrip</h3>
                <ul>
                    <li>jQuery</li>
                    <li>Bootstrap</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

邮箱:<input type="text"> <br>
密码:<input type="password"> <br>
<!--input:radio-->
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女
<br>
<!--input:checkbox-->
<input type="checkbox" name="hobby[]" value="dance"checked>跳舞
<input type="checkbox" name="hobby[]" value="sing">唱歌
<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>



<script src="lib/jquery.js"></script>
<script>

    //通用选择器
    $('*').addClass('highlight');   //选择了页面中所有元素
    $('li').addClass('highlight');  // 选择所有的 <li>标签
    $('.highlight').css('color','red'); // 选择有class="highlight"的元素
    $('#title').addClass('highlight');  // id选择器

    //层级选择器
    $('li:first  h3').addClass('highlight');   // 选择第一个<li>下全部<h3>
    $('li:first > h3').addClass('highlight');   // 仅选择子级元素,更深的级别忽略

    //li:contains('HTML'):last  定位到第一个内容是html列表项上
   $("li:contains('HTML'):last").addClass('highlight');     //验证定位效果
    $("li:contains('HTML'):last + li").addClass('highlight'); //相依兄弟
    $("li:contains('HTML'):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>
</body>
</html>

运行实例 »

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

运行效果图:

hm02-1.png

hm02-2.png

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="lib/jquery.js"></script>
<script>
    //元素内部添加
    $('ul').append('<li>新元素1</li>');        // 添加到尾部
    $('<li>新元素2</li>').appendTo('ul');      // 添加到尾部
    $('ul').prepend('<li>新元素3</li>');       // 添加到头部
    $('<li>新元素4</li>').prependTo('ul');     // 添加到头部

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

    //替换:将li文本包含有: "新元素"内部的元素全部替换成指定元素
    $('li:contains("新元素4")').replaceWith('<li style="color:red">新元素N</li>');
    $('<li style="color:lightgreen">新元素N+1</li>').replaceAll('li:contains("新元素2")');

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

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

运行实例 »

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

运行效果图:

hm03.png

4) 问答: jQuery与原生javascript相比,有哪些优势,哪些劣势。

答:使用jQuery最大的好处是少写多做。

优点:

扩展能力好,抽象层次高,开发效率高,不需要太多经验也可以上手 

代码兼容性较好,消除了JavaScript跨平台兼容问题。 

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

jQuery支持AJAX。


缺点:

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

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

业务简单时框架里的大部分代码是无用的,框架掩盖了一些问题的本质,对新手积累经验无益。

总结:jQuery的使用比较简单,边看边做就好了。


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议