jQuery 操作元素

01、操作元素的属性

$(function(){$("#but").click(function(){//获得元素的对象var  inp=$("#zh");//JQ获得属性   inp.attr("value")：获得的默认的值console.log(inp.attr("type")+"----"+inp.attr("name")+"----"+inp.attr("value"));/* console.log(inp[0].type);//js方式获得对象var inp2=document.getElementById("but");//获得对象实时输入的值console.log(inp.val());//操作元素对象属性inp.attr("type","button");inp.attr("value","点击");//综合的方式 {key1:value1,key2:value2 }--json数据格式inp.attr({"type":"button","value":"点击"});//checkedalert($("#man").attr("checked"));//true  一般作用到checked、disabled、selectedalert($("#man").prop("checked")); })})

02、操作元素的css样式

                 //获得div元素对象var div =$("#div1");//获得元素对象的样式console.log(div.css("width")+"---"+div.css("height"));//操作元素的样式//[1]直接加样式div.css("width","300px");div.css("height","300px");div.css("backgroundColor","red");//综合的方式div.css({"width":"400px","height":"300px","backgroundColor":"red"});//[2]通过增加class属性的方式添加css样式 div.attr("class","div2");//只可以增加class属性div.addClass("div2");//移除指定的class div.removeClass("div2")

03、操作元素的内容

             //获得div对象var div =$("#div1");//js==  innerHTML  --可以包含html内容var  ht = div.html();//js== innerText ---只是包含纯文本var  te= div.text();console.log(ht);console.log(te);//可以实现累加div.html(div.html()+"<b>是一家很好的公司</b>"); //不会识别html内容div.text("<b>是一家很好的公司</b>");

04、操作元素的节点

             //创建节点：var p =$("<p>List Item5</p>");//  内部--现有元素之后//   $("#div1").html($("#div1").html()+"<p>List Item5</p>")$("#div1").append(p);-----√           // 内部---现有元素之前$("#div1").prepend(p);//外部 ---现有元素之前$("#div1").before(p); //外部---现有元素之后$("#div1").after(p);var  div2=$("#div2"); var  div1=$("#div1");$("#div1").append(div2);// 把指定的元素追加到对应元素内容中----现有元素之后$("#div2").appendTo(div1);$("#div1").prepend(div2);//把指定的元素追加到对应元素内容中----现有元素之前$("#div2").prependTo(div1);//移除整个div对象    $("#div1").remove();     //内容清空$("#div1").empty();

jQuery 操作元素相关推荐

从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...
jQuery框架学习第四天：使用jQuery操作元素的属性与样式
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
[转帖]jQuery框架学习第四天：使用jQuery操作元素的属性与样式
一.摘要本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言通过前面几章我们已经能够完全控制jQuery包装集了, 无论是通 ...
【jQuery学习】—jQuery操作元素位置
[jQuery学习]-jQuery操作元素位置一.position方法作用:返回相对某个元素的偏移量格式:元素.position() 返回值包含top属性和left属性的对象如果祖先元素中没有 ...
[乐意黎转载]从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
一.摘要本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言通过前面几章我们已经能够完全控制jQuery包装集了, 无论是通 ...
jQuery操作元素和DOM
一.操作元素 Ⅰ.操作文本内容 ①语法text() ②替换文本内容 ③以纯文本方式实现, 不能是标签 <!DOCTYPE html> <html lang="en" ...
jQuery操作元素属性、jQuery循环
jQuery操作元素属性.jQuery循环 1.prop() 取出或设置某个属性的值 2.html() 取出或设置html内容 3. 手风琴效果实现: 4.jQuery的循环: 1.prop() 取出 ...
前端基础--jquery操作元素
1.事件 1.1事件的绑定: jquery的事件绑定方式1: jquery对象.事件(function){} 例子: <!DOCTYPE html> <html lang=" ...
用JQuery操作元素的style属性
可以直接利用css()方法获取元素的样式属性,JQuery代码如下: 1 $("p").css("color"); //获取p元素的样式颜色无论color属 ...

jQuery 操作元素

01、操作元素的属性

02、操作元素的css样式

03、操作元素的内容

04、操作元素的节点

jQuery 操作元素相关推荐

最新文章

热门文章