jQuery属性操作
属性操作_attr
$(function(){
//1.attr(name):该方法用于获取属性的值(根据属性的名称)
var srcEle = $("img").attr("src");
alert(srcEle);//输出结果为该图片的路径：../../img/1.jpg
//2.attr(key,value):该方法用于设置属性和值
$("img").attr("height","800px");//设置该图片的高度属性，注意观察图片的高度变化
//3.attr(properties)：同时设置多个属性值
//$("img").attr({"width":"1300px","height":"300px"});//注意观察图片发生的变化(宽高都改变)
//4.removeAttr(name)：删除某个属性和值
$("img").removeAttr("width");//清除width属性后，图片变回其自身原有的大小
});
<body>
</body>
属性操作_CSS类
$(function() {
// 1.点击button，使一个div的背景颜色变为黄色
$("#button1").click(function() {
$("#div1").addClass("div1");
});
// 2.点击button，清空之前设置的背景颜色
$("#button2").click(function() {
$("#div1").removeClass("div1");
});
// 3.通过toggleClass(class) 实现点击字体变为紅色，再点击样式还原
$("#button3").click(function() {
$("#div1").toggleClass("divclass");
});
});
属性操作_html代码
$(function(){
//1.点击按钮获取div中 html
$("#btn1").click(function(){
var divEle = $("div").html();
alert(divEle);//<p>YHH</p>
});
//2.点击按钮设置div中html
$("#btn2").click(function(){
$("div").html("<font color='red'>HelloWolrd</font>");//覆盖之前此位置的内容
});
});
<body>
<div><p>YHH</p></div>
<input type="button" value="获取html" id="btn1" />
<input type="button" value="设置html" id="btn2" />
</body>
属性操作_文本text
$(function(){
//1.点击按钮获取div中 text
$("#btn1").click(function(){
var divEle = $("div").text();
alert(divEle);//YHH
});
//2.点击按钮设置div中text
$("#btn2").click(function(){
$("div").text("Java学院");//覆盖之前此位置的内容
});
});
属性操作_值val
$(function(){
//1.点击按钮获得文本框、下拉框、单选框选中的value
$("#btn1").click(function(){
alert($("#username").val());
alert($("#city").val());
alert($("input[type='radio']:checked").val());
});
//2.点击按钮设置用户名的默认值为“老王”
$("#btn2").click(function(){
$("#username").val("老王");
});
});
jQuery文档处理
文档处理_插入操作
//在id=edu的select下增加<option value="大专">大专</option>
/**
内部插入
1.append(content):内部结尾处，将B追加到A里面去
2.appendTo(content):内部结尾处，将A追加到B里面去
3.prepend(content):内部开始处，将B追加到A里面去
4.prependTo(content):内部开始处，将B追加到A里面去
外部插入
1.after(content):外部，将B追加到A后面
2.before(content):外部，将B追加到A前面
3.insertAfter(content):外部，将A追加到B后面
4.insertBefore(content)::外部，将A追加到B前面
*/
$(function() {
// 追加 option 内容大专
// 创建元素
var $newNode = $("<option value='大专'>大专</option>");
//内部插入
//$("#edu").append($newNode); // 内部结尾，将B追加到A里面去
//$("#edu").prepend($newNode); // 内部开始，将B追加到A里面去
//外部插入
//$("option[value='本科']").after($newNode);
$newNode.insertBefore($("option:contains('硕士')"));
});
文档处理_复制操作
/**
1.单击苹果、橘子或者菠萝列表项，复制点击的内容并追加到ul的末尾
2.单击苹果、橘子或者菠萝列表项，复制点击的内容并追加到ul的末尾，要求复制后的内容也具有复制的能力
*/
$(function(){
//点击li列表项，将当选点击的li内容追加到ul末尾
$("ul li").click(function(){
//$(this).clone().appendTo("ul"); // 复制当前点击的节点，并将它追加到<ul>元素
$(this).clone(true).appendTo("ul");//设置参数true后，复制后的内容也具备单击事件
});
});
文档处理_替换操作
$(function(){
//将B的内容替换掉A处的内容
$("p").replaceWith("<strong>你最不喜欢的水果是?</strong>");
// 同样的实现： $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p");
});
文档处理_删除操作
//分别使用detach和remove 删除带有click事件的p标签，删除后再将p 重新加入body 查看事件是否存在
//1.remove()：删除节点后，事件也会删除
//2.detach()：删除节点后，事件会保留 从1.4新API
//3.empty():清空元素中的所有后代节点。(这个案例是要删除而不是清空，需要注意)
$(function() {
$("p").click(function() {
alert($(this).text());
});
// 使用remove方法删除 p元素，连同事件一起删除
//var $p = $("p").remove();
// 使用detach删除，事件会保留
var $p = $("p").detach();
$("div").append($p);
});
删除相关操作的区别
//清空第二个li元素节点的所有后代节点(此处是文本节点橘子)，通过firebug查看html源码验证
//$("ul li:eq(1)").empty();
//删除第一个li元素节点
$("ul li:eq(0)").remove();
jQuery遍历操作
使用对象访问方式遍历
$(function(){
// 全选/ 全不选
$("#checkallbox").click(function(){
var isChecked = this.checked;
//使用对象访问的方式进行遍历，语法：$().each(function(){})
$("input[name='hobby']").each(function(){
this.checked = isChecked;
});
});
});
使用工具类遍历方式
$(function(){
// 全选/ 全不选
$("#checkallbox").click(function(){
var isChecked = this.checked;
//使用工具类遍历方式，语法：$.each(array，function(i,j){}) 其中array代表被遍历的对象，i代表角标，j代表遍历后的内容。
$.each($("input[name='hobby']"), function(i,j) {
j.checked = isChecked;
});
});
});
jQuery的CSS操作
属性操作_CSS类
/**
* CSS操作方法汇总：
* 1.通过attr属性设置 / 获取 style属性
* attr('style', 'color:red'); // 添加style属性
* 2.设置CSS样式属性
* css(name, value) 设置一个CSS样式属性
* css(properties) 传递key - value对象， 设置多个CSS样式属性
* 3.设置class属性
* addClass(class) 添加一个class属性
* removeClass([class]) 移除一个class属性
* toggleClass(class) 如果存在(不存在)就删除(添加) 一个类
*/
$(function() {
// 1.点击button，使一个div的背景颜色变为绿色
//方式一
/*$("#button1").click(function() {
$("#div1").css("background-color","green");
});*/
//方式二：
$("#button1").click(function() {
$("#div1").attr("style","background-color:green");
});
// 2.点击button，使一个div的背景颜色变为绿色，内容字体颜色变成红色
$("#button2").click(function() {
$("#div1").css({"background-color":"green","color":"red"});
});
});
jQuery事件
鼠标滑过显示隐藏
$(function() {
$(".head").mouseover(function() {
$(this).next().show();
}).mouseout(function() {
$(this).next().hide();
})
});
事件移除
$(function() {
$('#btn').bind("click", function() {
$('#test').append("<p>我的绑定函数1</p>");
});
$('#delAll').click(function() {
$('#btn').unbind("click");
});
});
合成事件hover
$(function() {
$(".head").hover(function() {
$(this).next().show();
}, function() {
$(this).next().hide();
})
});
$(function() {
$(".head").toggle(function() {
$(this).next().hide();
}, function() {
$(this).next().show();
})
})
网友评论