2019-06-13课堂随记

①单体创建对象

        将相关的变量和函数组合成一个整体,就是的对象,对象中变量叫属性,变量中的函数叫做方法,

②工厂模式创建对象

<script type="text/javascript">

function Person(name,age,job){

    var o = new Object();创建一个空的对象

    o.name = name;

    o.age = age;

    o.job = job;

    o.showname = function(){

        alert('我的名字叫'+this.name);   

    };

    o.showage = function(){

        alert('我今年'+this.age+'岁');   

    };

    o.showjob = function(){

        alert('我的工作是'+this.job);   

    };

    return o;

}

var tom = Person('tom',18,'程序员');

tom.showname();

</script>

③构造函数

        new相当于工厂模式的创建对象和返回

④call和apply的区别

        都可以改变this  区别在于call可以直接传参  apply需要把参数放入数组中在进行传参

⑤新增选择器

        document.querySelector('#div1')获取单个

        document.querySelectorall('#div1')获取多个

⑥jquery

        $(document).ready(function(){

              var $div=$(#div);

              alert('jquery:'+$div.html());

              }) jquery应用(获取html id并且打印内容)

        $(function){

            var $div=$(#div);

              alert('jquery:'+$div.html());

          }) 简写

      jquery里的ready和window.onlond的区别就是后者需要等所有的页面和节点都加载并且渲染完才会执行里面的代码,但是ready只要你网页节点加载完就可以执行里面的代码

⑦jquery选择器

        $(document) //选择整个文档对象 整个网页相当于html标签

        $('li') //元素  选择所有的li元素

        $('#myId') //id  选择id为myId的网页元素

        $('.myClass') //类  选择class为myClass的元素

        $('input[name=first]') //属性  选择name属性等于first的input元素

        $('#ul1 li span') //后代  选择id为为ul1元素下的所有li下的span元素


        $('#ul1 li:first') //选择id为ul1元素下的第一个li

        $('#ul1 li:odd') //选择id为ul1元素下的li的奇数行

        $('#ul1 li:eq(2)') //选择id为ul1元素下的第3个li

        $('#ul1 li:gt(2)') // 选择id为ul1元素下的前三个之后的li

        $('#myForm :input') // 选择表单中的input元素

        $('div:visible') //选择可见的div元素

        $('div').has('p'); // 选择包含p元素的div元素

        $('div').not('.myClass'); //选择class不等于myClass的div元素

        $('div').filter('.myClass'); //选择class等于myClass的div元素

        $('div').first(); //选择第1个div元素

        $('div').eq(5); //选择第6个div元素

        $('div').prev('p'); //选择div元素前面的第一个p元素

        $('div').prevAll('p'); //选择div元素前面所有的p元素

        $('div').next('p'); //选择div元素后面的第一个p元素

        $('div').nextAll('p'); //选择div元素后面所有的p元素

        $('div').closest('form'); //选择离div最近的那个form父元素

        $('div').parent(); //选择div的父元素

        $('div').children(); //选择div的所有子元素

        $('div').siblings(); //选择div的同级元素

        $('div').find('.myClass'); //选择div内的class等于myClass的元素

⑧点击事件

        。click() 点击事件

        。toggleCalss

⑨绑定点击事件

        $(this).index() 获取索引值

⑩选项卡

        $(this).addClass('cur')添加行边样式 .siblings().removeClass('cur') 给他的其他兄弟去除行边样式

        $('#contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 面向过程与面向对象编程 1、面向过程:所有的工作都是现写现用。 2、面向对象:是一种编程思想,许多功能事先已经编写...
    々_18C阅读 376评论 0 0
  • 创建对象的方法 1、单体 2、工厂模式 2、构造函数 3、原型模式 copy和apply call和apply的区...
    按时发疯阅读 235评论 0 0
  • jquery选择器 jquery用法思想一 选择某个网页元素,然后对它进行某种操作 jquery选择器 jquer...
    您的名称已被使用阅读 137评论 0 0
  • 面向对象 面向过程与面向对象编程 1、面向过程:所有的工作都是现写现用。 2、面向对象:是一种编程思想,许多功能事...
    关若飞阅读 310评论 0 1
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,772评论 1 45