jQuery笔记合集 | |
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业 | jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等 |
jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业 | jQuery DOM2-第4次课-从某个元素出发，往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记 |
jQuery事件1-第5次课-JQ的事件跟JS一样的作用，只是写法不一样-附案例、任务 | jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务 |
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务 | jQuery自定义动画-第8次课-animate-stop函数-附案例 |
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业 |
学完这个后，再学习从某个元素出发，去找上下左右的元素，再对其进行增删改，比如插入新的元素、替换、复制等。
一、操作元素的属性
比如有如下元素：
<div id='b123' style="">123</div>jquery大部分方法的特点：赋值和取值于一体。
$('元素').attr()attr是 attribute的改写
a. 取值（1个参数）
//JS
var b=document.getElementsByTagName("div")[0].getAttribute("id");
var b=document.getElementsByTagName("div")[0].id;
//JQ 使用了JQ选择器得到的对象叫JQ对象，就可以使用JQ的方法
var b=$('元素').attr('属性名');//
//比如
$("div").attr('id');//'b123'b.赋值(两个参数)
//JS
document.getElementsByTagName("div")[0].setAttribute("id")='b456';//
document.getElementsByTagName("div")[0].id='b456';
//JQ
$('元素').attr('属性名','属性值');// 写法类似于css()
//比如：
$('div').attr('id','b456');
$('元素').attr('title','新增的title属性');$('元素').removeAttr('属性名')是attr的逆向方法，用来删除特定的属性。$('元素').prop('属性名')prop 全称为 property
prop和attr都是对元素的属性进行增删改。
区别在于前者主要是给表单元素使用，后者主要是给普通元素使用
使用方式一模一样，没有任何区别。$('元素').removeProp('属性名')删除特定的属性。
二、操作元素的内容
$('元素').html()
//相当于是JS的：
元素.innerHTML='要加的内容';
//JQ
$('元素').html()//如果没有参数，则表示获取，保留元素的标签内容
$('元素').html("<p>123</p>");//表示新增或修改元素的内容
$('元素').html("");//清空$('元素').text()
//jS
元素.innerText='要加的内容';//纯文本，会过滤掉标签
//JQ
$('元素').text()//如果没有参数，则表示获取，只包含纯文本
$('元素').text("123");//表示新增或修改元素的文本内容
$('元素').text("");//清空内容$('元素').val()
//该方法是用于表单控件的value属性值
//JS
元素.value="123"
//JQ:
$('控件元素').val()//如果没有参数，则表示获取该控件的value值
$('控件元素').val("123");//表示新增或修改该控件的value值
$('控件元素').val("");//清空该控件的value值三、两个特殊的成员
$.trim()该方法不是DOM的方法，不是去选择元素做什么事情，而是去字符串的首尾空格
比如用在表单验证中
是一个工具方法，
$('控件元素').val();
var a=$.trim(' aga ');//'aga'.length在JQ中几乎都是方法，没有属性，而length是它的属性。主要是统计所选元素的个数的。
$("div").length;//数字，选中了多少个div,数字就是多少资料、作业下载链接： https://www.imqd.cn/jquery-dom.html