js概述及基本使用

jq是一个第三方的库文件
    是其他团队 把js一些繁琐的操作封装成了一个个的方法 放到一个单独的js文件里面
    然后把源代码开发出来  我们拿过来直接引入即可使用

jq的特点
    隐式迭代
    链式编程
    jq的入口函数:
    $(function(){

    })功能和window.onload类似

jq的基本使用
    jq是通过$('选择器')选择指定的元素
    返回的是伪数组 
    console.log($('#box'));
    $('ul>li').html('设置内容')//隐式迭代

jq的过滤选择器的使用
    :even  匹配索引值为偶数的元素
    :odd  匹配索引值为奇数的元素
    :first 匹配第一个元素
    :last 匹配最后一个
    :gt(索引值)  找到比当前索引值还大的所有元素
    :lt(索引值)  找到比当前索引值还小的所有元素
    :eq(索引值) 找到指定索引值的元素

jq的筛选选择器
    JQ的筛选选择器:
            相当于原生JS的节点访问关系
    获取父节点:
        原生JS的属性名:  节点对象.parentNode
        JQ的:
               JQ对象.parent()
    获取子节点:
        原生JS的:
                节点对象.children
                节点对象.childNodes
        JQ的
               JQ对象.children([选择器])   []表示当前参数选择器 可传可不传
                    获取所有子节点 或者 按照参数选择器获取子节点
                JQ对象.find(选择器) 选择器必传
                    获取选择器选择的后代元素
     获取兄弟节点:
         原生JS的:
              节点对象.previousElementSibling
              节点对象.nextElementSibling
         JQ的:
              JQ对象.prev() 获取上一个兄弟
              JQ对象.next() 获取下一个兄弟
              JQ对象.prevAll() 前面所有兄弟
              JQ对象.nextAll() 后面所有兄弟
              JQ对象.siblings([选择器]) 获取所有兄弟  参数可选
                      不传表示获取所有兄弟
                      传选择器表示获取指定选择器的兄弟
    获取指定元素
        JQ对象.first()  在选择器关联的一堆元素中找第一个
        JQ对象.last()  在选择器关联的一堆元素中找第最后一个
        JQ对象.eq(索引值)  在选择器关联的一堆元素中找到指定索引值的元素

    jq对象和js对象的相互转换
        JQ对象转换成原生JS对象
            JQ对象.get(索引)
            或者
            JQ对象[索引]
        原生JS对象转换成 JQ对象

            $(原生JS对象)


    jq的css方法
        JQ的CSS方法操作样式
            1. 增加单个样式
                  JQ对象.css("键","值")
            2. 增加多个样式
                  JQ对象.css({
                      css属性名和css属性值的集合
                  })

            3.修改样式 (跟增加样式一样)
            4. 获取样式的值
                JQ对象.css("css属性名")
                    外链,内嵌,行内样式的值都可以获取
            css方法操作的样式都是行内样式

    jq操作class的方法
            增加
                JQ对象.addClass("类名1 类名2 ...")

            删除
                 JQ对象.removeClass("类名1 类名2 ...")


            判断是否拥有指定class
                JQ对象.hasClass("类名")


            切换class
                JQ对象.toggleClass("类名1 类名2 ...")

  • 10
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值