关闭

jquery(一)之获取对象

标签: jquery框架前端
163人阅读 评论(0) 收藏 举报
分类:

背景

        我们都知道,前端设计涉及的框架众多,我们有限的经历是难以学习那么繁琐的东西的,所以我们必须借助一些框架帮助我们来完成一些工作,比如说今天要提到的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结合起来真的是美得很!你懂得!
        最后说一句,爱笨媳妇爱生活!

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:70622次
    • 积分:1726
    • 等级:
    • 排名:千里之外
    • 原创:99篇
    • 转载:8篇
    • 译文:1篇
    • 评论:40条