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"}] }
第一层 字典，第二层列表，第三层字典