2021-01-13

如何使用jQuery?
1、引入jQuery文件
2、写一个入口函数
3、找到要操作的元素(jQuery选择器),去操作它(属性、样式、文本)

$(document).ready(function(){
$('div').width(100).height(100).css('border','1px solid red').text('haha');
})

如何下载jQuery?
官网下载
版本区别 1.x 支持老浏览器--IE6、7、8 停止更新
2.x 不支持老浏览器 停止更新
3.x 不支持老浏览器 持续更新
右击链接另存为 2种---min 产品 ;不带 开发

jQuery入口函数
方法一

$(document).ready(function(){
...
})

方法二

$(function(){...})

入口函数的执行时机不同:

jQuery的入口函数快于window.onload----因为jQuery等待页面上的dom树加载完成,window.onload等待所有的资源都加载完后执行

jQuery的文件结构?

(function(){
  window.jQuery = window.$ = jQuery;
}());

jQuery文件是一个自执行函数,执行这个jQuery文件中的代码,其实就是执行这个自执行函数;
这个自执行文件就是给window对象添加一个jQuery属性和$属性;

$和jQuery是等价的,是一个函数

$是一个函数,参数传递不同,效果就不同

1、匿名函数--------入口函数
$(function(){});
2、字符串-----------选择器
$('#one') $('div')
3、DOM元素--------把DOM对象转为jQuery
$(DOM元素)

DOM对象---原生js选择器获取到的对象
dom对象只能调用dom的属性方法,不能调用jQuery的属性方法

jQuery对象---利用jQuery选择器获取到的对象
jquery对象是一个伪数组,其实就是dom对象的一个包装集
jQuery对象只能调用jQuery的属性方法,不能调用dom的属性方法
$('#one').css('background','green');

var div1 =('#one');

案例

<script>
// DOM
  var btns = document.getelementByTagName('button');
btns[1].onclick = function () {
  $('body').css('backgroundColor','black');
}
// jquery
$(btns[0]).click(function(){
  $('body')[0].style.backgroundColor = 'white';
})
</script>
// 获取文本
 $('#getBtn').click(function(){
    // 获取到所有文本,包括后代文本
    $('#div1').text();
    // 设置内容
    $('#div1').text('你好');

    
})


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 作者:桃子df 本文以一个页面例子说明运行自动化脚本需要哪些步骤及实现过程中的报错汇总 具体实现功能: 登录操作进...
    落地逃阅读 1,631评论 0 0
  • 1. Jar 包启动 (窗口启动: jar -jar: 命令行启动,窗口停留)下面介绍后台启动方式 1.1 Li...
    DevFL阅读 1,527评论 0 0
  • let、const、var的使用区别 1.var定义变量,没有块的概念,可以跨块访问,不能跨函数访问,不初始化出现...
    rub1cky阅读 1,898评论 0 0
  • client,page和screen的区别? clientX,clientY是触摸点相对于viewport视口x,...
    change_22fa阅读 5,663评论 1 1
  • 渐变的面目拼图要我怎么拼? 我是疲乏了还是投降了? 不是不允许自己坠落, 我没有滴水不进的保护膜。 就是害怕变得面...
    闷热当乘凉阅读 9,786评论 0 13