Jquery是一个优秀的Javascript框架
js中的属性和事件在Jquery中几乎都变成了方法
顶级对象$。
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
//把dom对象转成jquery对象,然后再调用jquery中的ready方法
$(document).ready(function () {
alert('html onload');
})
$(function () {
alert('页面加载完了');
});
</script>
一、选择器
语法 | 描述 |
---|---|
$(this) | 当前 HTML 元素 |
$("p") | 所有 <p> 元素 |
$("p.intro") | 所有 class="intro" 的 <p> 元素 |
$(".intro") | 所有 class="intro" 的元素 |
$("#intro") | id="intro" 的元素 |
$("ul li:first") | 每个 <ul> 的第一个 <li> 元素 |
$("[href$='.jpg']") | 所有带有以 ".jpg" 结尾的属性值的 href 属性 |
$("div#intro .head") | id="intro" 的 <div> 元素中的所有 class="head" 的元素 |
<pre name="code" class="javascript"><script type="text/javascript">
$(function () {
//在jq中,js里面的属性和事件几乎都变成了方法。
//如果在方法中写内容,那么意味着设置,返回当前对象本身
//如果方法中没写任何的参数,那么意味着获取
alert($('#btn').val());
$('#btn').val('click me');
alert($('#btn').val());
});
</script>
二、遍历
<script type="text/javascript">
var tmp = [1, 2, 3, 4, 5, 6];
var newarr = [];
newarr= $.map(tmp,function (ele,index) {
return ele * 2;
})
alert (newarr);
</script>
map方法 主要是遍历修改数组和返回新数组的
<script type="text/javascript">
var tmp = { "name": "zj", "age": 18 };
var newarr = [];
$.each(tmp, function (k,s) {
alert(k+' is '+s);
});
</script>
each方法主要用来遍历键值对,return false退出遍历
三、事件
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
$('div').css({ "background-color":"yellow"});
});
});
</script>
为id=btn的按钮注册click事件,div标签的css属性改变
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
$('div').css({ "background-color": "yellow" });
$('p').css({ "background-color": "red" }).click(function () {
alert('你真的点我了啊');
});
});
});
</script>
链式编程,内部实现了隐式迭代,方法返回对象本身
<script src="jEasyUI1.3.6_CHS/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#dv').click(function () {
$('#dv').addClass('cls'); //添加cls样式
$('#dv').remove('cls');//移除样式
$('#dv').toggleClass('cls');//替换样式
})
})
</script>
对样式css的操作
<script type="text/javascript">
$(function () {
$('#ui li').mouseover(function () {
$(this).css('backgroundColor', 'red').siblings().css('backgroundColor', '');//siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的
}).click(function () {
//removeAttr()删除样式,.unbind()移除事件
$('#u2').append($(this).removeAttr('style').unbind());
});
})
</script>
this的使用
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
//在层中找所有的具有name属性的所有的input标签
// $('div input[name]').css('backgroundColor', 'red');
//在层中找所有的具有name属性且属性值等于name1的所有的input标签
$('div input[name=name1]').css('backgroundColor', 'red');
})
})
</script>
<script type="text/javascript">
$(function () {
//获取包含x值得div层
//alert($('div:contains(x)').text());
//获取不包含内容的div层
// alert($('div:empty').val());
//获取包含a标签的层
// alert($('div:has(a)').val());
//获取父级元素的层
//alert($('div:parent').val());
})
$(function () {
//所有ul下面的第一个li字节点
//$('ul li:first-child').css('backgroundColor', 'red');
//获得所有ul下的子元素
$('ul').children().css('backgroundColor', 'red');
});
</script>
过滤器的使用
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
//获取href属性
//alert($('a').attr('href'));
//修改a的href属性
//$('a').attr('href', 'http://www.hao123.com');
//添加cls样式
//$('a').attr('class', 'cls ');
//删除属性
//$('a').removeAttr('class');
});
});
</script>
属性添加,修改
<script type="text/javascript">
var data = ({'百度':'http://www.baidu.com','腾讯':'http://www.tent.com'});
$(function () {
$('#btn').click(function () {
//创建一个层
// $('<div style="width:300px;height:300px;background-color:orange;"></div>').appendTo($('body'));
var tb = $('<table border="1"></table>').appendTo($('body'));
var tr = $('<tr></tr>').appendTo(tb);
var td = $('<td>网站</td><td>网址</td>').appendTo(tr);
$.each(data, function (k, s) {
var trs = $('<tr></tr>').appendTo(tb);
$('<td>'+k+'</td><td><a href='+s+'>'+k+'</a></td>').appendTo(trs)
});
});
});
</script>
动态创建元素
<script type="text/javascript">
$(function () {
$('#btn1').click(function () {
$('<tr><td>' + $('#txt').val() + '<td/><td>' + $('#textContent').val() + '</td></tr>').appendTo($('#tb'));
});
});
</script>
</head>
<body>
<table id="tb" border="1">
<tr>
<td>猫猫:</td>
<td>沙发!</td>
</tr>
</table>
昵称:<input type="text" name="name" id="txt" /><br/>
<textarea id="textContent" rows="10" cols="15"></textarea><br/>
<input type="button" name="button" id="btn1" value="评论" />
</body>
无刷新评论
<script src="jquery.min.js"></script>
<style type="text/css">
.cls {
background-color:green;
}
</style>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
// $('div').empty();//清空div子元素
$('div').remove();//清空自己肯定包括子元素
$('div').remove('.cls')//删除这个类样式的div
});
});
</script>
删除元素
<script type="text/javascript">
$(function () {
$('#toRight').click(function () {
$('#se1 option:selected').appendTo($('#se2'));
});
$('#toLeft').click(function () {
$('#se2 option:checked').appendTo($('#se1'));
});
$('#toAllLeft').click(function () {
$('#se1 option').appendTo($('#se2'));
});
$('#toAllRight').click(function () {
$('#se2 option').appendTo($('#se1'));
});
})
</script>
权限选择
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
$('#t3').val(parseInt($('#t1').val()) + parseInt($('#t2').val()));
});
});
</script>
点击等号加法