2--初始jquery、jquery选择器

初始jquery、jquery选择器

jquery官网

https://jquery.com

jquery是什么？

write less, do more  写的更好，做的更多！

jQuery是一个简洁而快速的JavaScript库，可用于简化事件处理，HTML文档遍历，Ajax交互和动画，以便快速开发网站。

使用jquery

下载

jquery-3.5.1下载，放置到你当前的项目中

在页面上如何引入jquery？

<script src="js/jquery-3.5.1.min.js"></script>

jQuery中的$是什么意思?及 $. 和 $().的区别?

$就是jQuery的别称,$就是jquery对象，$()就是jQuery()，在里面可以传参数，作用就是获取元素。

$() 选择器

jquery在哪里？

//简写

$(function() {

    console.log('小王')

})

或者

$(document).ready(function() {

    console.log('小王你好')

});

jquery选择器的原理

jquery原型里面有一个init初始化的方法，将传入的值进行解析，比如传入的id还是class还是标签名。

然后通过相应的方法返回数组型对象。既可以通过对象直接调用方法，也可以使用数组的length。

<div class="one">1</div> 

<div class="two">2</div> 

<script> 

  var result = $("div"); 

  console.log(result); 

  alert($('div').size()); 

</script>

(function(){ 

  //暴露外部的引用 

  var jQuery = window.jQuery = window.$ = function(selector){ 

    return new jQuery.fn.init(selector); 

  } 

  //添加原型事件 

  jQuery.fn = jQuery.prototype = { 

    // 

    init:function(selector){ 

      var element = document.getElementsByTagName(selector); 

      Array.prototype.push.apply(this,element); 

      return this; 

    }, 

    myjQuery:"the test one", 

    length:0, 

    size:function(){ 

      return this.length; 

    } 

  } 

  //将init的原型引用成jQuery的原型 

  jQuery.fn.init.prototype = jQuery.fn; 

})();

--------------------------------------------------

jquery中的选择器

基本选择器

// 1.$("#tit1")  id选择器 

// html() 取得匹配元素的html内容

var tit1 = $("#tit1").html();

console.log(tit1);

// html() 设置匹配元素的html内容

$("#tit1").html('可爱的倪超群');

var tit2 = $("#tit1").html();

console.log(tit2);

// 2. $("ul")  元素选择器   $("ul li") 抓取的是一个集合

// console.log($("ul"));

console.log($("ul li"));

$("ul li").css({

    'color': 'red',

    'background-color': 'blue'

});

// css() 访问匹配元素的样式属性

// 注意：样式属性

// 当前这个元素身上 有 两个样式属性 color: orange; font-size:20px;

// 3. $('.msg') 类选择器

var r1 = $('.msg').css('color');

console.log(r1);

var r2 = $('.msg').css('font-size');

console.log(r2);

// 4. $("#tit1, .msg, ul") 群组选择器 

// 注意：群组选择器 的特点 对象和对象之间 用 ,逗号 间隔

$("#tit1, .msg, ul").css({

    'font-size': '100px'

})