jquery-

原生js 兼容性差,不安全性。因为前端代码在客户端可见的,不安全。

加载

    <script src="http://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript">    </script>
    <script>

		js代码
    </script>

ready


jquery选择器

和css的class选择器和id选择器相同的。



    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
     
            //id选择器
            var $idselect = $('#d1');
            alert($idselect.length); //不为0就选择成功

            //class选择器
            var $cla = $('.box1');
            alert($cla.length);   //选择了4// 标签选择器
            var $lis = $('ul');
            alert('标签'+$lis.length);  //选择所有ul标签

            // 选择id的后代
            var $hd = $('#d2 ul li');
            alert('后代'+$hd.length);

            //属性选择器
            var $sx =  $('input[name=32]');
            alert('属性'+$sx.length);

        })

    </script>

    <link rel="stylesheet" href="css/a.css" type="text/css">


</head>
<body>
    <div id="d1">
        <ul >
            <li class="box1">A</li>
            <li class="box1">B</li>
            <li class="box1">C</li>
            <li class="box1">D</li>
            <input type="text" name="32" value="aaaaaaa">
        </ul>
    </div>
    <div id="d2">
        <ul >
            <li class="box2">A2</li>
            <li class="box2">B2</li>
            <li class="box2">C2</li>
            <li class="box2">D2</li>
            <input type="text" name="32">
        </ul>
    </div>
</body>
<script>
        $(function(){
     
            //have 选择集   某个标签要包含某个标签
            // var $a = $('div').has('p');
            // alert($a.length);

            //not 选择集   
            var $b = $('div').not('.box1');
            // alert($b.length);

            //filter 选择器,某个标签属性要符合
            var $c = $('div').filter('.box1');
            // alert($c.length);

            //选择第3个div
            var $d = $('div').eq(2);
            // alert($d.length);


            
        })


    </script>

    <link rel="stylesheet" href="css/a.css" type="text/css">


</head>
<body>

    <div id="d1" name='a' class="box1">
        <p>你好!</p>
    </div>

    <div id="d1" >
            <p>你好!</p>
    </div>

    <div id="d2" class="box1" name='a'>世界
        <ul >
            <li class="box2">A2</li>
            <li class="box2">B2</li>
            <li class="box2">C2</li>
            <li class="box2">D2</li>
            <input type="text" name="32">
        </ul>
    </div>

操作css

            var $h = $('#pass').css('height');
            // alert('hei'+$h);
            var $w = $('.list1').css('width');
            // alert('width'+$w);


            //修改css值
            $('#pass').css('height','30px');
            $('#pass').css('width','30px');

标签对象.toggleClass(‘list1’);
每执行1次,就在 当前的class / list1 class 之间切换。

点击事件

点击切换div的css


    <script>
            $(function(){
     
                var bt1 = $('#bt1');
                var d1 = $('#d1');

                //事件
                bt1.click(function(){
     
                    // 修改css属性
                    // d1.css('background-color','red');
                    // d1.css('height','32px');

                    //class
                    d1.toggleClass('list2')     // 每次执行就在 当前css和list2的class之间切换

                })

            })
    </script>

    <style>
    .list1{
     
        height: 400px;
        width: 400px;
        background-color: blueviolet;
    }
    .list2{
     
        height: 200px;
        width: 200px;
        background-color:red;
    }
    </style>

</head>

<body>

    <input type="button" id="bt1" value="点击">
    <div id="d1" class="list1"></div>

index() 获取到li相对于同一层的下标

    <script>
        $(function(){
     
            var $a = $('.list li');
            // alert($a.length);
            var $b = $a.eq(4);
            alert($b.index());
        })
    </script>

  

</head>

<body>

        <ul class="list" id="ac">
                <li>a</li>
                <li>s</li>
                <li>d</li>
                <li>f</li>
                <li>g</li>
                <li>r</li>
                <li>1</li>
                <li>f</li>
            </ul>

json,数据格式

前后台交换数据的格式, 列表 [a,b,c,d] ,字典{“a”:“b”,“c”:[3,4,5]} 的组成

{
     
	"people": [{
     
			"firstName": "Brett",
			"lastName": "McLaughlin"
		},
		{
     
			"firstName": "Jason",
			"lastName": "Hunter"
		}
	]
}

{
           "a":[{
     "b":"c"},{
     "d":"e"}]         }

第一层 字典,第二层列表,第三层字典


你可能感兴趣的:(js,js)