最近每天都在熬夜,今天感觉眼睛特别涩,我决定,今天早睡,哈哈哈,上次总结了jquery控制节点,今天总结jquery控制属性,学习完基础知识,看看下面的案例练习一下,掌握的会更好
属性绑定和获取
1、jqipt.attr(" 属性名",“属性值”)
a)获取 jqjpt.attr("属性名");
b)添加类名 jqipt.attr("class","类名字")
c)删除属性 jqipt.removeAtter("属性名")
d)form表单添加 checkbox \selected display 用prpo(“属性名” ,“”)
//绑定到jQuery上,标签上没有 jQbut.click(function(){ jQinp.text="11"; //绑定属性 console.log(jQinp.text) }) //绑定到jQuery上 标签上也可以显示 jQbut.click(function(){ jQinp.attr("title",11); //绑定属性 console.log(jQinp.attr("title")); }); //绑定类名 jQbut.click(function(){ jQinp.attr("class","box") //绑定属性 console.log(jQinp.attr("class")); }); // 删除属性名 jQbut.click(function(){ jQinp.removeAttr("class") }) // form特性属性用 prop 其他情况还是用attr jQbut.click(function(){ jqinp2.prop("checked",true) jqinp2.attr("checked",true)//一次性管用 }) }
2、val()方法
a)获取标签肿的value的属性
b)$("input").varl();获取值
c)$(""input).val(" 赋值内容")
//val() 获取value属性的值 当val(有参数)是赋值 (js中的value) alert($("input").val()); $("input").val("我是刚赋值给input的val")
3、text()方法获取文本值
a) $("div").text()获取内容
//text() 获取双标签的文本值 (不识别标签) 相当于js中的innerText alert($("div").text()); $("div").text("<li我是新的li</li>")
4、html() 获取文本值
//html() 获取双标签的文本值 (识别标签) 相当于js中的innerHTML alert( $("div").html()) $("div").html("<li我是新的li</li>")
案例
全选,反选
$(function(){ //需求1:点击上面的多选按钮,下面的所有多选按钮都和上面的一致 $("#j_cbAll").click(function(){ $("#j_tb input:checkbox").prop("checked",$(this).prop("checked")) }); //需求2、点击下面的多选按钮,判断下面的所有选择按钮都是否全部被选定只有全部 $("#j_tb input:checkbox").click(function(){ // input:checkbox"属性值 //判断,只有所有都背选定,上面的才被选定 //技术点:带有checked属性的标签和checkbox个数一样多的时候 if($("#j_tb input:checkbox").length === $("#j_tb input:checked").length){ //当全不被选定 上面的input checked $("#j_cbAll").prop("checked",true) }else{ $("#j_cbAll").prop("checked",false) } }) })
动态添加案例
<script> jQuery(function () { //需求1:页面加载的时候每隔固定时间,.word中添加一个字符。 fn("中国十九大召开",$(".typed-cursor"),$(".word")) //需求2:点击say按钮,上面的input中的内容,每隔固定时间,.word中添加一个字符,插入的就是input中的内容。 $("#btnSay").click(function(){ fn($("#inValue").val(),$(".typed-cursor"),$(".word")) $("#inValue").val("") }); //封装 function fn(ele1,ele3,ele4){ //1.定义字符串,然后显示插入条光标(把字符串转换成数组) var src=ele1; var arr=src.split(""); var src2=""; var num=0; var time=null; //2.定时器。 time=setInterval(function(){ //4.判断,如果文字的个数和数组的长度一样了,就清除定时器 if(arr[num]===undefined) { clearInterval(time); ele3.hide() }else{ //定义一个字符串用来接收 src2+=arr[num]; //3.每隔一段时间,在.word中插入一个文字。( 就是改变内容,text() ) ele4.text(src2); num++ } },500) } }); </script>
时间: 2024-10-14 03:28:30