jquery操作
与JavaScript操作的可以是效果是相同，但是更为简单高效，将常用的操作封装成为函数。
选择器
eg: $(‘.box‘) 得到的是一个存放原生js对象的数组, 就是jq对象, 页面中有多少个.box, 该jq对象就承载者多少个对象,. 可以作为一个整体来使用
<div class="sup"> ???<div class="sub">哈哈</div> ???<div class="sub"></div> ???<div class="sub"></div></div>
var $sup = $(‘.sub‘) ???console.log($sup)
// ???jQuery.fn.init(3) [div.sub, div.sub, div.sub, prevObject: jQuery.fn.init(1)]
js对象与Jq对象相互转换
// js对象: box ?jq对象: $box// 将js对象转换为jq对象: $(box)// 将jq对象转换为js对象: $box[index]
//对象转换 ???var $box = $(".box");// ???可以使用jquery方法 ???console.log($box.text());// ???却不能使用js的属性和方法 ???console.log($box.innerText);// ???jquery对象转换成js对象 ???$box[1].innerText = "lala";// ???将js对象装换成jq对象 ???var $box2 = $($box[1]); ???console.log($box2.html());文本操作
// 获取原有文本
$box.text() | $box.html()
// 设置新文本
$box.text(‘newData‘) | $box.html(‘<b>newData</b>‘)
// ???操作文本text()|html() ???console.log($sub.text())//哈哈 ???$sub.html(‘<i>呵呵</i>‘)// ???设置文本内容
事件绑定
// $box为jq对象$box.click(function(ev) { ???})// 注: jq对象如果包含多个页面元素对象, 可以一次性对所有对象绑定该事件// ev事件为jq事件, 兼容js事件// this为js对象, $(this)就转换为jq对象// 内部可以通过$(this).index()获取自身在当前结构下的索引(从0开始) ???$(‘.box‘).click(function (ev) { ???????console.log(ev); ???????console.log(ev.clientX); ???})类名操作
$box.addClass("newClass") // 添加一个新类名$box.removeClass("oldClass") // 删除一个已有的类名// 多类名时,jq操作类名将每个类名最为单一考虑对象,不会影响其他类名样式操作
$box.css(‘background-color‘) ?// 获取背景颜色$box.css(‘background-color‘, ‘red‘) ?// 设置背景颜色$box.css(‘background-color‘, function() {return ‘yellow‘}) ?// 通过函数返回值设置背景颜色文档结构关系
// 父$sup.parent()// 父,父的父...$sup.parents()// 子们$sup.children() *****// 上兄弟$sup.prev() ?***// 上兄弟们$sup.prevAll()// 下兄弟$sup.next() ?***// 下兄弟们$sup.nextAll()// 同级别的兄弟们$sup.siblings() ?***// 在sup下查找类名为inner的子级$sup.children(‘.inner‘)// 获得的结果都是jq对象, 还可以接着使用jq方法
jquery操作
原文地址：https://www.cnblogs.com/msj513/p/10181919.html