js333 > 计算机互联网 > jQuery基础知识点

原标题:jQuery基础知识点

浏览次数:188 时间:2019-11-20

jQuery,jqueryapi

jQuery基础知识点(上),jQuery基础知识

  jQuery是一个优秀的、轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+),而jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。

  1、jQuery入口函数与Js入口函数的区别

【注】js入口函数指的是:window.onload = function(){};

区别一:书写个数不同

  Js入口函数只能出现一次,出现多次会存在事件覆盖的问题。

  jQuery的入口函数,可以出现任意多次,并不会存在事件覆盖问题。

区别二:执行时机不同

  Js入口函数是在所有的文件资源加载完成后,才执行。这些文件资源包括:页面文档、外部的js文件、外部的css文件、图片等。  

  jQuery的入口函数,是在文档加载完成后,就执行。文档加载完成指的是:DOM树加载完成后,就可以操作DOM了,不用等到所有的外部资源都加载完成。

   文档加载的顺序:从上往下,边解析边执行。

  2、jQuery对象和DOM对象的相互转换

①DOM对象此处指的是:使用js操作DOM返回的结果

var btn = document.getElementById(“btnShow”); // btn就是一个DOM对象

②jQuery对象此处指的是:使用jQuery提供的操作DOM的方法返回的结果

var $btn = $(“#btnShow”); // $btn就是一个jQuery对象

③DOM对象转换成jQuery对象

var $btn1 = $(btn); // 此时就把DOM对象btn转换成了jQuery对象$btn1
// $(document).ready(function(){}); // 调用入口函数
// 此处是将document这个js的DOM对象,转换成了jQuery对象,然后才能调用jQuery提供的方法:ready

④jQuery对象转换成DOM对象

// 第一种方式
var btn1 = $btn[0]; // 此时就把jQuery对象$btn转换成了DOM对象btn1 (推荐使用此方式)
// 第二种方式
var btn2 = $btn.get(0);// 此时就把jQuery对象$btn转换成了DOM对象btn2

  3、jQuery选择器

符号(名称)

说明

用法

基本选择器(重点)

#

ID选择器

$(“#btnShow”).css(“color”, “red”);

选择id为btnShow的一个元素(返回值为jQuery对象,下同)

.

类选择器

$(“.liItem”).css(“color”, “red”);

选择含有类liItem的所有元素

element

标签选择器

$(“li”).css(“color”, “red”);

选择标签名为li的所有元素

层级选择器

空格

后代选择器

$(“#j_wrap li”).css(“color”, “red”);

选择id为j_wrap的元素的所有后代元素li

>

子代选择器

$(“#j_wrap > ul > li”).css(“color”, “red”);

选择id为j_wrap的元素的所有子元素ul的所有子元素li

基本过滤选择器

:eq(index)

选择匹配到的元素中索引号为index的一个元素,index从0开始

$(“li:eq(2)”).css(“color”, ”red”);

选择li元素中索引号为2的一个元素

:odd

选择匹配到的元素中索引号为奇数的所有元素,index从0开始

$(“li:odd”).css(“color”, “red”);

选择li元素中索引号为奇数的所有元素

:even

选择匹配到的元素中索引号为偶数的所有元素,index从0开始

$(“li:odd”).css(“color”, “red”);

选择li元素中索引号为偶数的所有元素

筛选选择器(方法)     (重点)

find(selector)

查找指定元素的所有后代元素(子子孙孙)

$(“#j_wrap”).find(“li”).css(“color”, “red”);

选择id为j_wrap的所有后代元素li

children()

查找指定元素的直接子元素(亲儿子元素)

$(“#j_wrap”).children(“ul”).css(“color”,“red”);

选择id为j_wrap的所有子代元素ul

siblings()

查找所有兄弟元素(不包括自己)

$(“#j_liItem”).siblings().css(“color”, “red”);

选择id为j_liItem的所有兄弟元素

parent()

查找父元素(亲的)

$(“#j_liItem”).parent(“ul”).css(“color”,“red”);

选择id为j_liItem的父元素

eq(index)

查找指定元素的第index个元素,index是索引号,从0开始

$(“li”).eq(2).css(“color”, “red”);

选择所有li元素中的第二个

jQuery是一个优秀的、轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Opera 9...

1、jQuery的基本概念

1.1、什么是jQuery

js的方法库,封装了很多js的方法,需要的时候可以直接调用

注意事项:方法调用的时候都要带();

1.2、使用jQuery的三个步骤

//1、 引入jQuery包
<script src="jquery-1.11.1.js"></script>

//2、 入口函数
$(document).ready(function(){});

//3、 书写函数体
$("#btnShowDiv").click(function () {
    $("div").show(1000);
});
1.2.1、js与jQuery入口函数执行的差别

js:当页面所有元素包括图片,样式文件,等所有资源都加载完才开始执行;

jQuery:当页面的文档树加载完成后就会执行,并不会等所有的文件都加载完成再执行

1.3、jQuery的版本

1.X 支持IE6/7/8

2.X 不支持IE6/7/8

3.0 不支持IE6/7/8

1.4、$符号的本质

$符其实就是一个函数,参数不同,功能不同(常用的几种功能如下代码)

注意事项:括号中的参数为字符串类型的时候不要忘记引号

  $(function() {});//参数是function,说明是入口函数

  $("#btnSetConent");//参数是字符串,并且以#开头,是一个标签选择,查找id=“btnSetContent”的元素

  $("div");//查找所有的div元素

1.5、jQuery对象与DOM对象

1.5.1、使用js方法获取的页面元素返回的就是dom对象
var btn = document.getElementById("btnShowDiv");

var divs = document.getElementsByTagName("div");

dom对象只可以使用dom对象的方法和属性

domObject.innerHTML = "dom对象设置文本";

domObject.style.display= "block";//dom对象显示对象

domObject.onclick = function() {}//dom对象绑定事件
1.5.2、使用jQuery方法获取页面元素返回的就是jQuery对象
注意事项:jQuery对象调用方法的时候,方法记得加().

$("div");//标签选择器返回的jquery对象。

$("#btnShowDiv");//id选择器返回的jquery对象。

jquery对象只能使用jquery对象的方法

var $obj = $("div");

$obj.html("jquery对象设置文本的方法");

$obj.show();//jquery对象显示文本

$obj.click(function() {});//jquery对象绑定事件
1.5.3、jQuery对象与DOM对象之间的转换
1、jquery对象转DOM对象的方法
var $li = $("li");
//第一种方法(推荐使用)

$li[0]
//第二种方法

$li.get(0)
//其实jQuery对象转DOM对象的实质就是取出jQuery对象中封装的DOM对象。
2、DOM对象转jQuery对象的方法
var $obj = $(domObj);

// $(document).ready(function(){});就是典型的DOM对象转jQuery对象

2、jQuery选择器

2.1、基本选择器

  • ID选择器
    • 用法:$("#ID")
    • 说明:获取指定的ID,不要忘记引号
  • 类选择器
    • 用法:$(".类名")
    • 说明:获取同一类元素
  • 标签选择器
    • 用法:$("selecor")
    • 说明:获取同一类标签的所有元素
  • 并集选择器
    • 用法:$("div,p,li")
    • 说明:用逗号分隔,满足条件的所有的所有的元素都会被选中
  • 交集选择器
    • 用法:$("div.redClass")
    • 说明:两个元素之间没有空格,同时满足条件的元素才会被选中

2.2、层级选择器

  • 子代选择器
    • 用法:$("ul>li")
    • 说明:用>连接,只会选择到他儿子级的元素,不会选择到孙子级的元素
  • 后代选择器
    • 用法:$("ul li")
    • 说明:用空格分隔开来,会选择到父级元素下所有的子级元素,包含孙子辈等

2.3、过滤选择器

  • :eq(index)
    • 用法:$("li:eq(2)").css("color", "red")
    • 说明:会选择到li下面索引值为2的li标签,注意:元素的索引值是从0开始
  • :odd
    • 用法:$("li:odd").css("color", "red")
    • 说明:会选中索引值为奇数的元素,索引值是从0开始的,所以在实际现实中表示的是偶数行
  • :even
    • 用法:$("li:even").css("color", "red")
    • 说明:会选中索引值为偶数的元素,索引值是从0开始的,所以在实际现实中表示的是奇数行

2.3、过滤选择器(是方法)

  • children(selector)
    • 用法:$("ul").children("li")
    • 说明:获取$("ul")下的所有的儿子级的li,获取到的是一个集合,相当于$("ul>li"),子类选择器
  • find(selector)
    • 用法:$("ul").find("li")
    • 说明:获取的是$("ul")下的所有的li元素包括孙子级,相当于$("ul li")后代选择器
  • siblings(selector)
    • 用法:$("#first").siblings("li")
    • 说明:获取的是所有的兄弟节点,并且不包括自身
  • parent()
    • 用法:$("#first").parent()
    • 说明:查找父级节点
  • eq(index)
    • 用法:$("li").eq(2);
    • 金沙js333娱乐场,说明:相当于$("li:eq(2)"),index从0开始

3、jQuery操作样式

3.1 设置样式

3.2 操作样式

3.3、总结

1. 如果操作到的样式非常少,可以考虑css方法

2. 如果操作到的样式非常多,那么可以通过class方法来操作,将样式写到一个class类里面。

3. 如果考虑到后期维护方便,将css从js中分离出来,那么推荐使用class的方式来操作。

1、jQuery的基本概念 1.1、什么是jQuery js的方法库,封装了很多js的方法,需要的时候可以直接调用 注意事项:方法调用的时候...

本文由js333发布于计算机互联网,转载请注明出处:jQuery基础知识点

关键词:

上一篇:Ruby简明教程之判断语句介绍,Terry七月Ruby读书笔

下一篇:没有了