jacker

好的技能大家一起分享!so,骚年,一起嗨!

jquery(一)之获取对象

背景

        我们都知道,前端设计涉及的框架众多,我们有限的经历是难以学习那么繁琐的东西的,所以我们必须借助一些框架帮助我们来完成一些工作,比如说今天要提到的jquery。

目标

        今天的博客和以往的有些区别,简单的来说,这只是一次简单的知识总结。那么,我们要总结的是什么呢?是的,我们当然要从获取一个jquery对象学起,因为只有获取了一个对象我们才能对其作出操作。

获取jquery对象的方法

                // 1 test jquery
                 $("div").html("您好!通过慕课网学习jQuery才是最佳的途径。");
                // 2 通过id获取jquery对象
                 var $p = $('#imocc');
                 $p.html('您好').css('color','red');
                // 3 通过jquery对象获取dom对象
                 3.1 获取div对象数组
                 var $div =$('div');
                // 3.2 获取第一个div对象
                var div = $div.get(0);
                // 3.3 设置div的属性
                div.style.color='red';
                //4 将dom对象转化为jquery对象
                 var div = document.getElementsByTagName('div'); //dom对象
                 var $div = $(div); //jQuery对象
                 var $first = $div.first(); //找到第一个div元素
                $first.css('color', 'green'); //给第一个元素设置颜色 
                // 5 通过id获取对应元素
                 ${'#id'}
                // 6通过class获取对应元素
                 $(.class)
                // 7通过元素得到jquery对象
                 $("p")
                // 8 获取所有元素
                 $('*')
                //9 基本筛选选择器
                 $(".div:first")
                //10 内容筛选选择器
                 $(".div:contains(':contains')")
                // 11   属性筛选选择器
                 $('div[name^=imooc]')
                // 12表单筛选选择器
                 $('input:text')
                //13表单对象属性筛选选择器
                 $('input:enabled')
                // 14 this选择器
                    $('p').click(function(){
                    //把p元素转化成jQuery的对象
                    var $this= $(this) 
                    $this.css('color','red')
                })

        我们可以发现,获取一个jquery对象的方式真的是太多了,所以前端的知识真的有好多都需要我们去记忆啊,但是这没有关系的啦!多看看文档自然手到擒来!


总结

        
怎么说呢,在学习jquery获取对象的时候我主要都是靠着文档啃过来的,收获还算不少,这里推荐大家去bootstrap的官网上看,如下链接:
bootstrap官网
        前面我们也有说过bootstrap的简单使用,jquery和bootstrap结合起来真的是美得很!你懂得!
        最后说一句,爱笨媳妇爱生活!

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。爱笨媳妇,爱生活!我是阿福! https://blog.csdn.net/wangmeng951011/article/details/52374311
上一篇photoshop学习(一)-切图篇
下一篇spring核心模块分析
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭