爱站程序员基地一、jQuery操作类相关的方法
-
addClass()方法
添加类，如果添加多个类则用空格隔开
-
removeClass()方法
删除类，如果删除多个类则用空格隔开
-
toggleClass()方法
切换类
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>类操作</title><style>.class1{width: 100px;height: 100px;background-color: aqua;}.class2{border: 10px solid red;}</style><script src=\"../../JS/jquery-1.12.4.js\"></script><script>$(function(){// 获取到button元素var btn = document.getElementsByTagName(\'button\')// addClassbtn[0].onclick = function(){$(\'div\').addClass(\'class1 class2\')}// removeClassbtn[2].onclick = function(){$(\'div\').removeClass(\'class1 class2\')}// toggleClassbtn[1].onclick = function(){$(\'div\').toggleClass(\'class1 class2\')}})</script></head><body><button>添加类</button><button>切换类</button><button>删除类</button><div></div></body></html>
二、jQuery文本值相关的方法
- html()跟原生JS的innerHTML()方法作用一样
- 获取设置HTML
- 跟原生JS的innerText()方法作用一样
- 获取设置值
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title><style>div{width: 100px;height: 100px;border: 1px solid red;}</style><script src=\"../../JS/jquery-1.12.4.js\"></script><script>$(function () {// alert(1)// 设置htmlvar btns = document.getElementsByTagName(\"button\")btns[0].onclick = function () {// 设置文本$(\'div\').html(\'<p>我是段落<span>我是span</span></p>\')}// 获取htmlbtns[1].onclick = function () {console.log($(\'div\').html());}// 设置textbtns[2].onclick = function () {$(\'div\').text(\'<p>我是段落<span>我是span</span></p>\')}// 获取textbtns[3].onclick = function () {console.log($(\'div\').text());}// 设置valuebtns[4].onclick = function () {$(\'input\').val(\'你说谁？\')}// 获取valuebtns[5].onclick = function () {console.log($(\'input\').val());}})</script></head><body><button>设置HTML</button><button>获取HTML</button><button>设置text</button><button>获取text</button><button>设置value</button><button>获取value</button><div></div><input></input></body></html>
