jQuery基本语法和选择器

JQuery

一.JQuery基础语法

1.概念

JQuery是javaScript的一个库，Jquery基于javascript开发出来。目的就是为了简化javascript的开发。

宗旨：“Write Less，Do More”，提倡写更少的代码。

核心特性：

链式语法
高校灵活的CSS选择器使用和扩展
丰富的插件

官网：https://jquery.com/

三大版本：

目前jQuery有三个大版本。
1.X:兼容IE678,使用最为广泛，官网只做BUG维护，功能不再新增。因此一般项目来说，使用1.X版本就可以了，最终版本：1.12.4 (2016年5月20日)

2.X不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)

3.X不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）

————————————————

jd:1.6.4

sina:1.7.3

3.选择器和方法

3.1 使用jquery访问三个div元素

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试页面jquery</title><!-- 要导入jquery函数库 --><script src="jquery-1.8.3.min.js"></script><script>// window.onload=function(){
// }//再次强调加载事件：先执行HTML、CSS，最后JS代码。//1.jquery 加载事件//$(document):当前文档对象;//.ready():方法；参数：匿名函数对象,传递进去了；// $(document).ready(function(){//   alert('...');// })//2.再简便一点;建议大家使用这种方式,简单;// $(function(){//  alert('...测试');// });//3.原来的代码;$(function(){var div1=$("div")[0];console.log(div1.innerHTML);var div2=$("#two");console.log(div2.html()); //html():代替了之前的innerHTMLvar div3=$(".three")[0];console.log(div3.innerHTML);})//单个元素的时候，直接是html(),代替了之前的innerHTML。// window.onload=function(){             //  var div=document.getElementsByTagName("div")[0];//   alert(div.innerHTML);//     //获得的是Element元素//   var div2=document.getElementById("two");//   alert(div2.innerHTML);//    //3.根据类样式的名，来获得元素集合//    var div3=document.getElementsByClassName("three")[0];//  alert(div3.innerHTML);// }          </script>
</head>
<body><div>第一个div的内容???</div><div id="two">第二个div</div><div class="three">第三个使用类样式的div</div>
</body>
</html>

如何不使用innerHTML呢？

.first()

.last()

.eq(0)

3.2 基本选择器

1.id选择器 $("#id名")

2.类选择器 $(".类选择器名")来访问相应的使用类样式的元素

3.标签选择器 $(“div”)格式：

     $("标签名"),可以访问对应的标签元素

4.*

5.并集选择器

6.交集选择器

3.3 层次选择器

7.后代选择器 $(“a b”)

8.子代（级）选择器 $(“parent>child”)

9.后继选择器 $(“prev+next”)

10.兄弟|同辈选择器 $(“prev~sliblings”)

3.3 基本方法

之前在js代码有很多属性，比较长，jQuery为了简化这些长的属性，就封装成了一些方法。

html()->innerHTML,会把下面的带有html标签的格式给原封不动的输出。

val()–>value

size()–>length

text()–>只出来当前元素下的文本，不会出来html标签的格式.

css():设置当前元素的样式,语法：元素对象.css(“属性名”,“值”)

addClass():增加元素的样式,addClass(“样式名”)

removeClass():移除元素的样式,removeClass(‘样式名’)

总结：

1.基本选择器，重点前3个；id 类样式标签；其他了解即可。

2.层次选择器，重点子级选择器后继选择器；

3.基本方法，html() size() css() addClass() removeClass()

4.案例

4.1 计算器案例|购物车统计

4.2 表单验证案例

jQuery基本语法和选择器相关推荐

jQuery的简单了解和学习（1） jquery简介+语法+选择器+事件
jQuery jQuery简介 jQuery是一个Javascript函数库,可以让程序员写得少,而实现得多,主要包含以下功能:HTML元素的选取.操作:CSS操作:HTML事件函数:JavaScri ...
1.jQuery基础语法 2.jQuery选择器、操作页面文档元素 3.jqueryDOM操作 4.jqueryCSS操作 5.Jquery事件 6.Jquery动画...
这周的学习让我初步了解到JQuery作为js库的封装的伟大性.Write less Do more 才是我们真正应该做到的! 1.jQuery基础语法 · 链式编程 $("#div1&quo ...
jQuery框架学习第二天：jQuery中万能的选择器
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
从零开始学习jQuery (二) 万能的选择器
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...
前端jQuery基本语法
jQuery基础语法 #不管找什么标签,用什么选择器,都必须要写$(""),引号里面再写选择器,通过jQuery找到的标签对象就是一个jQuery对象,用原生JS找到的标签对象叫做 ...
04.jQuery 基本语法笔记
jQuery是什么 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交互 ...
Jquery（一）选择器
Jquery(一)选择器一.Jquery语法二.Jquery对象 1.优缺点: 2.编码习惯 3.DOM 转 Jquery 对象 4.JQuery 转 Dom 对象三.Jquery选择器 1.基 ...
[乐意黎转载]从零开始学习jQuery (二) 万能的选择器
一.摘要本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显减轻开发人员的工作量. 二.前言编写任何javascript程 ...
CSS语法及其选择器
第一优先级:无条件优先的属性只需要在属性后面使用!important.它会覆盖页面内任何位置定义的元素样式.(ie6支持上有些bug). 第一等:内联样式,如:style="color:re ...

jQuery基本语法和选择器

jQuery基本语法和选择器相关推荐

最新文章

热门文章