attr()方法:获取/设置元素属性" class="reference-link">1.attr()方法:获取/设置元素属性

需先引入JQuery

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
html

<form action="index.php" method="POST">
    <input type="text" name="username" />
    <input type="password" name="password" />
</form>

attr(name):getter 获取元素属性" class="reference-link">1.1 attr(name):getter 获取元素属性

例如获取表单属性

const form=$("form");
console.log(form.attr("action"));//index.php

attr(name,value):setter 设置元素属性" class="reference-link">1.2 attr(name,value):setter 设置元素属性

例如设置表单属性

const form=$("form");
form.attr("action","admin/index.php");
console.log(form.attr("action"));//admin/index.php

第二个参数可以使用回调函数

form.attr("action",()=>{
    let method=form.attr("method").toUpperCase();
    return method==="GET"?"index.php?username=Jy":"admin/index.php";
});
console.log(form.attr("action"));//如果为get则返回index.php?username=Jy；post则返回admin/index.php

css()：获取/设置元素的行内样式" class="reference-link">2.css()：获取/设置元素的行内样式

需先引入JQuery

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
css

<style>
form{
    width: 100px;
}
input{
    width: 95%;
}
</style>

html

<form action="index.php" method="POST">
   帐号： <input type="text" name="username" />
    密码：<input type="password" name="password" />
</form>

css(name):getter 获取元素行内样式" class="reference-link">2.1 css(name):getter 获取元素行内样式

例如获取表单宽度

const form=$("form");
console.log(form.css("width"));//100px

使用原生style只能获取style上的行内样式

console.log(document.querySelector("form").style.width);//无法获取

css样式表里的样式必须使用计算样式才可以获取

console.log(window.getComputedStyle(document.querySelector("form"),null).getPropertyValue("width"));//100px

css(name,value):setter 设置元素行内样式" class="reference-link">2.2 css(name,value):setter 设置元素行内样式

例如设置表单边框；多个参数用{}包裹，并用，隔开即可

const form=$("form");
form.css("border","2px solid red");//边框变为红色;

第二个参数可以使用回调函数

form.css("color",()=>{
    const colors=["red","blue","yellow"];
    let i=Math.floor(Math.random() * colors.length);//Math.floor:向下取整；Math.random：0-1之间随机取值
    return colors[i];
});
//字体颜色将随机更换

val():设置/获取表单控件的value属性" class="reference-link">3. val():设置/获取表单控件的value属性

需先引入JQuery

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
html

<form action="index.php" method="get">
    帐号：<input type="text" name="username" value="Jy" />
    密码：<input type="password" name="password" value="123456" />
    性别:
    <label for="man">男</label>
    <input type="radio" name="sex" id="man" value="1"  />
    <label for="woman">女</label>
    <input type="radio" name="sex" id="woman" value="0" checked/>
</form>

<script>
console.log($("input[name='username']").val());//Jy
    console.log($("input:password").val());//123456
    console.log($("input:radio:checked").val());//0
    $("input[name='username']").val("Jy2");//账号的值变为Jy2
</script>

html()等同与innerHTML、text()等同于innerText/textContent" class="reference-link">4. html()等同与innerHTML、text()等同于innerText/textContent

更多相关文章

1. MVC控制器类的访问、参数解析、api接口数据获取并渲染
2. Python再学习之列表介绍
3. Spark2.x精通：ShuffleReader过程源码深度剖析
4. linux系统中普通用户获取root权限
5. python获取文件md5
6. mvc控制器的访问与参数解析和API接口获取数据
7. Jquery基础知识
8. jqueryDom操作与ajax请求
9. JavaScript初学习/之classList：动态设置元素类、dataset: 读写自

随机推荐

1. 调整ChartJS中的X轴步骤
2. React组件的属性PropTypes
3. 用户打开一个DropDown关闭其他DropDowns
4. 无法从按钮onclick事件ASP.NET 4调用Java
5. 从动态生成的音频标签中收听audio.ended
6. 获取当前时间getDate()注意点
7. 使用Angularjs根据值选择复选框
8. 通过IE中的DOM访问帧
9. 一张图轻松搞懂javascript event对象的cl
10. 使用jackson json将属性添加到json字符串