1>html属性修改
attr
设置属性值或者 返回被选元素的属性值
removeAttr从每一个匹配的元素中删除一个属性
propprop()获取在匹配的元素集中的第一个元素的属性值.它是对当前匹配到的dom对象设置属性。
removeProp用来删除由.prop()方法设置的属性集
addClass(添加多个类名)为每个匹配的元素添加指定的类名。
removeClass从所有匹配的元素中删除全部或者指定的类。
toggleClass如果存在(不存在)就删除(添加)一个类。
html获取值:
html() 是获取选中标签元素中所有的内容
设置值:设置该元素的所有内容 会替换掉 标签中原来的内容
text获取值:
text() 获取匹配元素包含的文本内容
设置值:设置该所有的文本内容
注意:值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中
val获取值:
val()用于表单控件中获取值,比如input textarea select等等
<script src="./jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function(){ $('button').click(function(){ //jquery的属性操作 html属性操作 attr() //attr()如果有一个参数,表示获取值 console.log($('#box').attr('id')); $('#box p').text() }); //attr()如果设置两个值 表示设置属性 $('#box').attr('class','foo'); //设置多个值 使用对象存储,如果设置多个类名 不能使用attr() $('#box').attr({'class':'foo2',name:'huang'}); //删除一个属性 $('#box').removeAttr('name'); $('#box').removeAttr('class'); //删除多个属性 $('#box').removeAttr('name class'); //DOM属性操作 //若获取结果有多个元素,则返回第一个元素的属性值 console.log($('li').prop('class')); //设置值 $('li').first().prop({'name':'app','name2':'app2'}); console.log($('li').first()); console.log($('li').prop('name')); //删除dom对象的name属性 $('li').first().removeProp('name','name2'); console.log($('li').prop('name')); //3.addClass() removeClass() 添加类 和删除类,对class属性操作 $('span').addClass('span2 span3'); $('span').removeClass('span2'); //增加外部样式,实现动态效果 var isBig = true; $('span').click(function(){ if(isBig){ $(this).addClass('active'); isBig = false; }else{ $(this).removeClass('active'); isBig = true; } }); //4.值属性的操作 text() html() val() //仅仅是获取文本 console.log($('#box2').text()); //获取的所有 console.log($('#box2').html()); //设置值 // 标签当普通文本 $('#box2').text("<a>baidu</a>"); //解析成标签 $('#box2').html("<a href='#'>baidu</a>"); //获取值 console.log($('input').val()); $('input').val('写入的值');
$('#btn').click(function(){ var val = $('input').val(); $("#box2").text(val); }); //表单控件使用的一个方法 //实时获取输入框的内容 $('input').change(function(){ console.log($(this).val()); }) })
2>input属性操作
<script src="./jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function(){ console.log($(':radio')); console.log($(':checkbox')); /* input *:button * :submit * :file * :text * :disabled * * */ //1.获取单选框中的value值 console.log($('input[type=radio]:checked').val()); //2.复选框中value值 仅仅获取第一个值 console.log($('input[type=checkbox]:checked').val()); //3.下拉列表被选中的值 var obj = $('#timespan option:selected'); console.log(obj.val()); //设置单选的值 // 单选默认设置为value=113的选项 $('input[type=radio]').val(['11']); // 多选默认设置为value=b和value=c的选项 $('input[type=checkbox]').val(['a','c']); //设置下拉列表选中的值 这里面必须要用select // 设置下拉框的默认值,默认为一个参数,因为下拉框只展示一个,传多个则最后一个生效 $('select').val(['3','2']); //文本框 设置值 和获取值 $('input[type=text]').val(['455555555555555','6666666666']); console.log($('input[type=text]').val()) })
3>DOM属性修改
3.1>插入操作
1.父元素.append(子元素) 父元素中添加新的元素
2.子元素.appendTo(父元素) 追加到某元素 子元素添加到父元素
3.prepend() 前置添加, 添加到父元素的第一个位置
4.prependTo() 后置添加,第一个元素添加到父元素中
5.父.after(子) 在匹配的元素之后插入内容 与 子.insertAfter(父)
6.父.before(子) 在匹配的元素之前插入内容 与 子.insertBefor(父)
3.2>复制操作1.clone() 克隆匹配的DOM元素并且选中这些克隆的副本
2.clone(true):元素以及其所有的事件处理并且选中这些克隆的副本(简言之,副本具有与真身一样的事件处理能力)
3.3>替换操作1.replaceWith():将所有匹配的元素替换成指定的HTML或DOM元素。
2.replaceAll():用匹配的元素替换掉所有 selector匹配到的元素
3.4>删除操作1.remove() 删除节点后,事件也会删除(简言之,删除了整个标签)
2.detach() 删除节点后,事件会保留
3.empty(): 清空元素中的所有后代节点
<script src="./jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function(){ var oLi = document.createElement('li'); oLi.innerHTML = 'dom创建的li'; //追加元素 $('ul').append('<li><a href="#">百度</a></li>'); $('ul').append(oLi); //如果追加的内容是当前页面中已存在的元素,那么这些元素将从原位置上消失 $('ul').append($('span')); //appendTo() $('<a href="#">hao123</a>').appendTo($('ul')); //prepend 插入到被选中的元素的第一个位置 $('ul').prepend('<li>我是第一个元素</li>'); $('<li>我是第0个元素</li>').prependTo($('ul')); //after before $('ul').after('<h3>标题1,在ul后</h3>'); //insertAfter $('<a href="#">在ul标签后2</a>').insertAfter($('ul')); $('ul').before('<h2>在ul标签前面1</h2>'); //insertBefore $('<a href="#">在ul标签前面2</a>').insertBefore($('ul')); //复制操作 clone() $('button').click(function(){ //注意带参数和不带参数的区别 //默认不带参数,只克隆dom元素,带参数true,克隆元素的事件 //副本具有与真身一样的事件处理能力-----完全克隆 $(this).clone(true).text('我是克隆的').insertAfter($(this)); });
//替换 $('h3').replaceWith('<button>h3换成按钮</button>'); $('<a href="#">所有按钮换成超链接</a>').replaceAll('button'); //删除 //empty() 清空了被选的元素的所有子元素(不含本身) $('ul').empty(); //remove() 被选元素及所有子元素都很删除(包括自己) $('ul').remove(); //detach() 移除匹配的节点元素并返回值 var $btn = $('button').detach(); console.log($btn[0]); // 用变量接收返回值(dom元素),可以再添加到其他地方, $('ul').append($btn[0]); })