jQuery刚入门级介绍

jQ对象和DOM对象的区别
$(function () {
//1.什么是DOM对象?–》用js方法获取的元素就是DOM对象(js对象)
var li = document.getElementById(“li”);
li.style.color = “red”;

        //2.什么是jq对象? ---》使用jq的方法获取的元素就是jq对象
        var $li = $("#li");
        $li.text("hehe");

        //3.js对象是js对象的一个集合,里面存放了大量的js对象,是伪数组(juyoulength属性本质是对象)

        //4.jQ对象和js对象的区别
        //js对象不能调用jQ的方法
        //jQ不能用js方法

        //5.互相转化
        //jQ对象转js对象
        var $li = $("#li");
        $li[0].style.color = "pink"

        //js对象转化jQ对象
        var li = document.getElementById("li");
        $(li).text("hh");//给钱就行


    })
  • js和jq的关系: jq是js的一个库
    *
    • 为什么要学习jQuery? -->简单粗暴. 没有兼容性问题
    • 版本 区别
    • 入口函数 $(function(){}) 全写: $(document).ready(函数)
    • js与jq对象的区别
      1. 方法不能互相调用
    • 2.可以转化 js–>jq : 给钱就行 jq—>js : jq对象[索引] .get(索引)
    • 基本选择器: 类, id , 标签, 并集, 交集,
    • 层级选择器: 子集, 后代
    • 过滤选择器: :odd 索引为基数 :even 为偶数 :eq() 指定下标
    •           :first   :last  :next   :prev  parent()  children()  find()  siblings()
      
    • index() 获取索引
    • css操作 .css()
    • class操作: addClass() removeClass() hasClass() toggleClass()
    • 属性操作: .attr()

简单案例:
利用jQuery
点击更改类名达到修改样式的目的

  • 国际大牌
  • 国妆名牌
  • 清洁用品
  • 男士精品

猜你喜欢

转载自blog.csdn.net/weixin_44392027/article/details/87638909