网页基础学习 day03

最新推荐文章于 2024-11-16 14:11:26 发布

Anoxia_Tian

最新推荐文章于 2024-11-16 14:11:26 发布

阅读量610

点赞数

分类专栏：培训文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/qq_38214552/article/details/121937688

版权

培训专栏收录该内容

16 篇文章 0 订阅

订阅专栏

网页基础学习-jQuery

jQuery的定义和作用和优点：
定义：Query是对JavaScript的封装，它是免费、开源的JavaScript函数库，jQuery 极大地简化了 JavaScript 编程。
作用：jQuery和JavaScript它们的作用一样，都是负责网页行为操作，增加网页和用户的交互效果的，只不过jQuery简化了JavaScript编程，jQuery实现交互效果更简单。
优点： jQuery兼容了现在主流的浏览器，增加了程序员的开发效率，jQuery简化了 JavaScript 编程，代码编写更加简单。
jQuery的入口函数
我们知道使用js获取标签元素，需要页面加载完成以后再获取，我们通过给onload事件属性设置了一个函数来获取标签元素，而jquery提供了ready函数来解决这个问题，保证获取标签元素没有问题，它的速度比原生的 window.onload 更快。

    <script>
        //原生js的写法
        window.onload=function(){
            var oDiv=document.getElementById('div1');
            alert("原生获取div的方法"+oDiv);
        }
        //使用jquery方法
        $(document).ready(function(){
            var $div=$('#div1');
            alert("使用iquery实现div的形式"+$div);
        });
    </script>

jquery入口函数：

 // 完整写法
  $(document).ready(function(){
       ...
  });

  // 简化写法
  $(function(){
       ...
  });

jQuery选择器的介绍

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

注意事项： jquery的选择器的使用得方法个css使用的方法一致

    <script>
        $(function(){
        var $p=$('p');
        //获取的是元素的对象。
        alert($p);
        alert($p.length);
        //使用jquery进行控制样式
        $p.css({'color':'red'})
        //类选择器的使用
        var $div=$('.div');
        alert($div.length);
        //id选择器的使用
        var $div1=$('#box1');
        alert($div1.length);
        //层级选择器的使用
        var $div2=$('div h1');
        alert($div2.length);
        //属性选择器的使用,先根据标签选择html标签，然后再根据属性进过滤标签
        var $input=$("input[type=text]");
        alert($input.length);
    });
    </script>
</head>
<body>
    <p>hello</p>
    <p>world</p>
    <div class="div">哈哈</div>
    <div id='box1'>嘻嘻</div>
    <div>
        <h1>使用的是一个父类的子标签的使用</h1>
    </div>
    <input type="text">
    <input type="button">
</body>

选择集过滤
使用has的关键字实现特定的模块的样式的变换

<script>
        window.onload=$(function(){
            //  has方法的使用
            var $div = $("div").has("#mytext");
            //  设置样式
            $div.css({"background":"red"});
        });
    </script>
</head>
<body>
    <div>
    这是第一个div
    <input type="text" id="mytext">
    </div>

    <div>
        这是第二个div
        <input type="text">
        <input type="button">
    </div>