jquery快速入门

Posted 2021-02-13 hermit-gyqy

捕获内容和属性

1.DOM 操作

　　获得内容 - text()、html() 以及 val()

　　　　text() - 设置或返回所选元素的文本内容，如果不带值则是返回值，如果带值则是修改值，如：$(‘p‘).text(‘我要修改原来的文本‘);

　　　　html() - 设置或返回所选元素的内容（包括 HTML 标记）,如果不带值则是返回值，如果带值则是修改值，如：$(‘p‘).html("<b>Hello world!</b>");

　　　　val() - 设置或返回表单字段的值,如果不带值则是返回值，如果带值则是修改值，如：$(‘input‘).val("修改input框的默认value值");

　　获取属性 - attr() 或 prop()　　　

　　　　对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法，如果带有属性值则是修改属性值，如果不带属性值则是返回属性值：如 $(‘a‘).attr(‘href‘ : ‘www.guiqingyuang.com‘);

 

　　　　对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。

　　例：<a href="https://www.runoob.com" target="_self" class="btn">少时诵诗书</a>

　　　　例子里 <a> 元素的 DOM 属性有: href、target 和 class，这些属性就是 <a> 元素本身就带有的属性，或者说在 IDE 里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用 prop 方法。

　　　　1.如果有相应的属性，返回指定属性值。

　　　　2.如果没有相应的属性，返回值是空字符串。

 

　　例：<a href="#" id="link1" action="delete" rel="nofollow">删除</a>

　　　　例子里 <a> 元素的 DOM 属性有: href、id 和 action，很明显，前两个是固有属性，而后面一个 action 属性是我们自己自定义上去的，<a> 元素本身是没有这个属性的。处理这些属性时，建议使用 attr 方法。

　　　　attr 方法还支持同时修改多个属性，如：<a href="http://www.runoob.com" id="runoob">教程坎坎坷坷</a>

　　　　　　$(document).ready(function(){

　　　　　　　　$("button").click(function(){

　　　　　　　　　　$("#runoob").attr({

　　　　　　　　　　　　"href" : "http://www.runoob.com/jquery",

　　　　　　　　　　　　"title" : "jQuery 教程"

　　　　　　　　　　});

　　　　　　　　　　// 通过修改的 title 值来修改链接名称

　　　　　　　　　　title = $("#runoob").attr(‘title‘);

　　　　　　　　　　$("#runoob").html(title);

　　　　　　　　 });

　　　　　　});

 

　　　　1.如果有相应的属性，返回指定属性值。

　　　　2.如果没有相应的属性，返回值是 undefined。

　text()、html() 以及 val() 的回调函数

　　　　回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

　　例：$(document).ready(function(){

　　　　　　$("#btn1").click(function(){
　　　　　　　　$("#test1").text(function(i,origText){ //这里function传两个参数，第一个是下标，第二个参数是原来的值 
　　　　　　　　　　return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
　　　　　　　　});
　　　　　　});

　　例：$("#btn2").click(function(){

　　　　　　$("#test2").html(function(i,origText){ //这里function传两个参数，第一个是下标，第二个参数是原来的值 
　　　　　　　　return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";
　　　　　　});
　　　　});

 

　attr()，也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

　　例：$(document).ready(function(){

　　　　　　$("button").click(function(){

　　　　　　　　$("#runoob").attr("href", function(i, origValue){  //这里function传两个参数，第一个是下标，第二个参数是原来的值 

　　　　　　　　　　return origValue + "/jquery";
　　　　　　　　});
　　　　　　});
　　　　});