HTML5 混合APP开发学习笔记（九）——jQuery 编程基础

最新推荐文章于 2024-04-02 12:57:03 发布

123，机器人

最新推荐文章于 2024-04-02 12:57:03 发布

阅读量226

点赞数

分类专栏： HTML5混合APP 文章标签： jQuery

本文链接：https://blog.youkuaiyun.com/weixin_43569314/article/details/90412508

版权

HTML5混合APP 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了jQuery编程基础，包括使用each方法遍历HTML元素对象、数组对象和JSON对象属性。还阐述了jQuery DOM交互，如获取和设置内容、属性，添加和删除元素，以及获取并设置CSS类等操作，同时提及了相关方法及回调函数的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery 编程基础

jQuery遍历方法

可以使用 each 方法进行遍历，能够处理选择器、对象、数组

遍历HTML元素对象

//格式：
$(selector).each(function([index]){
     //代码，this关键字指向当前的对象，index代  表当前序号，可选参数
  });
//例：
$(“.mydiv”).each(function(index){
      if(index!=1){
          alert(this.innerHTML);
    }
   });

遍历数组对象

与遍历HTML元素对象类似

//格式：
$.each(array,function([index]){
   //处理代码，this关键字指向当前的数组元素，     index代表当前序号，可选参数
   });
//例：
var myArray=["abc","def","ghi"];
$.each(myArray, function(index) {
	alert("第"+index+"项的值为："+this);
});

遍历JSON对象属性

//格式：
 $.each(object,function(key){
       //处理代码，key代表属性
    });
//例：
var data={"name":"黄波","age":40,“course":"HTML5应用开发"};
$.each(data, function(key) {
	alert(key+"="+data[key]);
});

jQuery DOM交互

jQuery - 获取内容和属性¹

text() - 设置或返回所选元素的文本内容：$("#test").text();
html() - 设置或返回所选元素的内容（包括 HTML 标记）：$("#test").html();
val() - 设置或返回表单字段的值：$("#test").val();
attr() - 设置或返回所选元素的属性值：$("#runoob").attr(“href”)

jQuery - 设置内容和属性

text() - 设置或返回所选元素的文本内容：$("#test").text(“Hello world!”);
html() - 设置或返回所选元素的内容（包括 HTML 标记）：$("#test").html("<b>Hello world!</b>");
val() - 设置或返回表单字段的值：$("#test").val(“RUNOOB”);
attr() - 设置或返回所选元素的属性值：$("#runoob").attr(“href”,“http://www.runoob.com/jquery”)
同时设置多个属性：

 $("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery 教程"
    });

回调函数

text()、html() 以及 val()，拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。

//text()回调函数：
$("#test1").text(function(i,origText){
    return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
});
//html()回调函数：
$("#test2").html(function(i,origText){
    return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
});
//attr()回调函数：
 $("#runoob").attr("href", function(i,origValue){
    return origValue + "/jquery"; 
  });

jQuery - 添加元素

append() 方法在被选元素的结尾插入内容（仍然该元素的内部）。$(“p”).append(“追加文本”);
prepend() 方法在被选元素的开头插入内容。$(“p”).prepend(“在开头追加文本”);
after() 方法在被选元素之后插入内容。$(“img”).after(“在后面添加文本”);
before() 方法在被选元素之前插入内容。$(“img”).before(“在前面添加文本”);
一次性添加若干元素时：

function appendText()
{
    var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本
    var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM
    $("body").append(txt1,txt2,txt3);        // 追加新元素
}