jquery操作

Posted 2021-01-30 msj513

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方法