电子商务网站建设书籍,前端网页设计用什么软件,嘉兴网站优化,windows10php网站建设DOM对象通过jquery获取
所有的代码都是基于引入jquery.js文件
var mydiv $(#div);//直接获取到DOM对象元素id
var mydiv$(.div)#xff1b;//通过class获取DOM对象#xff0c;如果有同名class只会获取第一个
var mysapn$(span);//通过元素的标签名获取DOM对象
var divarr$(…DOM对象通过jquery获取
所有的代码都是基于引入jquery.js文件
var mydiv $(#div);//直接获取到DOM对象元素id
var mydiv$(.div)//通过class获取DOM对象如果有同名class只会获取第一个
var mysapn$(span);//通过元素的标签名获取DOM对象
var divarr$(#id,.class,span);//一次获取多个DOM对象
var all$(*);//通用选择器
var houdai$(#father div);//获取id为father下面所有的div
var zidai$(#fatherdiv)获取id为father下面直接的子级div
var xianglinxia$(.one img)//选择类名为one的下一个img元素
var tongbei$(.one~img)//选择类名为one的之后的img元素 只会向下找不会向上找表单类元素获取方法
DOM操作
1.获取属性 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodydiv classbox1111/divdiv idbox1222/divinput typecheckbox namech checkedchecked idaa abcaaannccinput typecheckbox namech idbb
/body
script src./jquery-3.7.0.js/script
script
//操作元素的属性//获取属性 attr(属性名) prop()//固有属性 标签自己带的属性 返回值是boolean的属性 自定义属性自己定义的属性let ipt1name$(#aa).attr(name)let ipt1names$(#aa).prop(name)let ipt1boolean$(#aa).prop(checked)let ipt1booleans$(#aa).attr(checked)let ipt2boolean$(#bb).prop(checked)//undefinedlet ipt2booleans$(#bb).attr(checked)//falseconsole.log(ipt1name,ipt1names,ipt1boolean,ipt2boolean,ipt2booleans);//设置属性$(#aa).attr(value,1)$(#bb).prop(value,2)
// $(#bb).attr(checked,false)$(#bb).prop(checked,true);//设置boolean类型的有这个方便//移除属性 $(#aa).removeAttr(checked)
/script/html2.操作元素的样式 //操作元素的样式 //自己需要写css样式并且class名为sss$(#box1).attr(class,sss)//设置class名$(#box1).addClass(bbb)//追加calss名$(#box1).css(color,red)//设置单个 $(#box1).css({color:red,font-size:46px})//设置多个 $(#box1).removeClass(sss)3.操作元素内容 //操作元素的内容$(#box1).html()//获取元素的内容非表单元素$(#box1).html()//设置元素的内容非表单元素$(#box1).text()//获取元素的纯文本内容非表单元素不识别html元素$(#box1).text()//设置元素的纯文本内容非表单元素 不识别html元素$(#box1).val()//获取元素的的值 表单元素 $(#box1).val()//设置元素的的值 表单元素 元素的创建与删除 $(p这是一个p标签/p)//创建一个p标签$(#box1).prepend(p小奶狗/p)//在指定元素的内部最前面追加子元素$(p小狼狗/p).prependTo($(#box1))//在指定元素的内部最前面追加子元素$(#box1).append(p小狗/p)//在指定元素的内部最后面面追加子元素$(p小狼狗/p).appendTo($(#box1))//在指定元素的内部最后面追加子元素$(#box1).before(p狗1/p)//在指定元素的前面追加元素$(#box1).after(p狗2/p)//在指定元素的后面追加元素$(#box1).after($(.box))//在指定元素的后面追加元素$(#box3).remove()//删除元素及其子元素标签内容一起删除$(#box4).empty()//只删除内容 很少用
遍历元素
$(#box5).each(function(index,element){//index 下标 element元素console.log(index,element);})绑定事件 //绑定事件 这里改相对应的事件 change mouse$(#box4).bind(click,(){console.log(111)})ajax请求
