为了账号安全,请及时绑定邮箱和手机立即绑定
  • visible的意思就是可见,而hidden就是隐藏。show(  $('#div3:visible') )说的是把一个名字是div3的dom元素设置为可见

  • $("input:not(:checked)");简单说,这句代码意思是:查找input中没有被勾选的其他元素

  • 解析:$( "parent > child" ) 子选择器:选择所有指定“parent”元素中指定的"child"的直接子元素。 $("ancestor descendant") 后代选择器:选择给定的祖先元素的所有后代元素, 一个元素的后代可能是该元素的一个孩子,孙子,曾孙等 $("prev + next") 相邻兄弟选择器:选择所有紧接在“prev”元素后的“next”元素 $("prev ~ siblings") 一般兄弟选择器:匹配“prev”元素之后的所有 兄弟元素。具有相同的父元素,并匹配过滤“siblings”选择器 $( "parent > child" ) 子选择器:选择所有指定“parent”元素中指定的"child"的直接子

  • $( ".class" )

    类选择器,相对id选择器来说,效率相对会低一点,但是优势就是可以多选


  • .html与.text的方法操作是一样,只是在具体针对处理对象不同 .html处理的是元素内容,.text处理的是文本内容 .html只能使用在HTML文档中,.text 在XML 和 HTML 文档中都能使用 如果处理的对象只有一个子文本节点,那么html处理的结果与text是一样的 火狐不支持innerText属性,用了类似的textContent属性,.text()方法综合了2个属性的支持,所以可以兼容所有浏览器
  • this,表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性和方法。 $(this),代表的上下文对象是一个jquery的上下文对象,可以调用jQuery的方法和属性值。
  • Attribute就是dom节点自带的属性

    例如:html中常用的id、class、title、align等:

    Property是这个DOM元素作为对象的属性

    例如:tagName, nodeName

    获取Attribute就需要用attr,获取Property就需要用prop


  • 几种方式可以隐藏一个元素:

    1. CSS display的值是none。

    2. type="hidden"的表单元素。

    3. 宽度和高度都显式设置为0。

    4. 一个祖先元素是隐藏的,该元素是不会在页面上显示

    5. CSS visibility的值是hidden

    6. CSS opacity的指是0

    如果元素中占据文档中一定的空间,元素被认为是可见的。
    可见元素的宽度或高度,是大于零。
    元素的visibility: hidden 或 opacity: 0被认为是可见的,因为他们仍然占用空间布局。

    元素隐藏也就课程说的几种方法    透明度:那设置透明后元素本身还是在那里 占用了空间  只是我们看不见而已  给他绑定事件点击也是有反应的  visibility 和 dispaly 属性 两者都可以实现隐藏元素的效果  不同的是第一个隐藏后位置依然被占据着  后面写的东西会跟在该元素的后面  不会占用之前隐藏元素的位置  第二个属性设置后元素就彻底在页面中消失了 不会占据空间   利用position也可以实现元素隐藏和显示  定位有四种  你可以了解下  默认relative 就是正常的文档流  还有课程提到的设置高度和宽度为0来显示隐藏,既然都没有高度和宽度了 肯定不会占用空间  需要注意的是有时候使用float会对正常文档流产生的影响,只要记得用完浮动清一下就好了

  • jQuery的基本筛选选择器

    :not(selector){选中没有selector的元素}

    注意事项:

    1. :eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素,根据之前匹配的元素在进一步筛选,注意jQuery合集都是从0开始索引

    2. gt是一个段落筛选,从指定索引的下一个开始,gt(1) 实际从2开始


  • $("div >  p")//子级选择器 选择直接子元素
    $("div p")//后代选择器 选择所有后代 包含子级选择器的结果
    $("div + p")//相邻兄弟选择器 选择下一个兄弟元素
    $("div ~ p")//一般兄弟选择器 选择之后的所有兄弟元素 包含相邻兄弟选择器的结果


  • jQuery是一个类数组对象,而DOM是一个单独的DOM元素

    var $div = $('div') //jQuery对象
    var div = $div[0] //转化成DOM对象
    div.style.color = 'red' //操作dom对象的属性

    或者是用 var div = $div.get(0)   转化成DOM对象


  • 数组的索引是从0开始的,也就是第一个元素下标是0

  • $(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码

  • 在http后添加s,p2的内容才显示出来



  • <!DOCTYPE html>

    <html>


    <head>

        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

        <title></title>

        <script src="https://code.jquery.com/jquery-1.11.3.js"></script>

        

        <!-- 使用JS原生语法 -->

        <script type="text/javascript">

            window.onload = function(){

                // 通过原生JS语法获取id为imooc1的元素p

    var p = document.getElementById('imooc1');

                // 将元素p在html中内容改变

    p.innerHTML = 'P1:您好!通过慕课网学习jQuery才是最佳的途径';

                // 将元素p的内容颜色改为红色

    p.style.color = 'red';

        }

        </script>

        

        <!-- 使用jQuery语法 -->

        <script type="text/javascript">

            $(document).ready(function() {

                /**

                 * 通过jQuery语法获取id为imooc2的元素获得一个jQuery对象

                 * 调用该对象的html()方法进行更改内容

                 * 调用该对象的css()方法进行更改颜色样式

                 */   

                var $p = $('#imooc2');

                $p.html('P2:您好!通过慕课网学习jQuery才是最佳的途径').css('color','red');

            });

        </script>

        

    </head>


    <body>

        <p id="imooc1"></p>

        <p id="imooc2"></p>

    </body>


    </html>



    //在http后添加s,p2的内容才显示出来

  • <script type="text/javascript">

    function show (ele) {

    if (ele instanceof jQuery) {

    $("#show").html('元素的长度的 = ' + ele.length)

    } else {

    alert(ele +' 不是jQuery对象')

    }

    }

    </script>


    instanceof  判断是不是某个类型   类似与typeof

  • //选取prev后面的第一个的div兄弟节点

    $(".prev + div")

     //选取prev后面的所有的div兄弟节点

    $(".prev ~ div")



  •  <script type="text/javascript">

            //获取页面中所有的元素

            var elements1 = document.getElementsByTagName('*');

        </script>


    原生js方法   

     <script type="text/javascript">

        //通过原生方法处理

        //获取到所有的节点标记名为div的元素

        //给每一个div加上蓝色的边框

        var divs = document.getElementsByTagName('div');

        for (var i = 0; i < divs.length; i++) {

            divs[i].style.border = "3px solid blue";

        }

        </script>


  •     <script type="text/javascript">

            //获取到指定元素的宽度,在回调返回宽度值

            //通过处理这个value,重新设置新的宽度

            $('.sixth').css("width",function(index,value){

                var vb = value.split("px");

                return(Number(vb[0] + 50) + vb[1];

            })

      </script>


    .spllit()处理成数组

  • jQuery.data( element, key, value )   //静态接口,存数据
    jQuery.data( element, key )  //静态接口,取数据   
    .data( key, value ) //实例接口,存数据.data( key ) //实例接口,存数据

     <script type="text/javascript">

        $('.left').click(function() {

            var ele = $(this);

            //通过$.data方式设置数据

            $.data(ele, "a", "data test")

            $.data(ele, "b", {

                name : "慕课网"

            })

            //通过$.data方式取出数据

            var reset = $.data(ele, "a") + "</br>" + $.data(ele, "b").name

            ele.find('span').append(reset)

        })

        </script>

        <script type="text/javascript">

        $('.right').click(function() {

            var ele = $(this);

            //通过.data方式设置数据

            ele.data("a", "data test")

            ele.data("b", {

                name: "慕课网"

            })

            //通过.data方式取出数据

            var reset = ele.data("a") + "</br>" + ele.data("b").name

            ele.find('span').append(reset)

        })

        </script>


  • jQuery是一个类数组对象,而DOM是一个单独的DOM元素

    var $div = $('div') //jQuery对象
    var div = $div[0] //转化成DOM对象
    div.style.color = 'red' //操作dom对象的属性

    或者是用 var div = $div.get(0)   转化成DOM对象

  • $(document).ready 是等到页面加载完毕后执行的代码。用于依赖于页面的某一个元素,需要等到它加载完时使用

  • js和jquery修改网页对象的方式是不同的

    标准js是通过

    var p = document.getElementById('imooc');
    p.innerHTML = '您好!通过慕课网学习jQuery才是最佳的途径';
    p.style.color = 'red';

    而jquery是

    var $p = $('#imooc');
    $p.html('您好!通过慕课网学习jQuery才是最佳的途径').css('color','red');


  • jquery优势就是可以让开发者更注重业务逻辑开发,而不需要我们具体知道哪个DOM节点有哪些方法,也不需要关心浏览器兼容性问题,我们通过jQuery提供的API进行开发,代码也会更加精短.


首页上一页1234567下一页尾页

举报

0/150
提交
取消
课程须知
1、有HTML/CSS基础 2、有JavaScript基础
老师告诉你能学到什么?
1、jQuery的基础语法 2、jQuery当中的选择器 3、jQuery中的属性和样式
意见反馈 邀请有奖 帮助中心 APP下载
官方微信