jQuery 第一天
jQuery使用，jQuery选择器
jQuery整体框架设计
回顾js课程
jQuery 解决问题
1.window.onload 事件有事件覆盖的问题，只能写一个
2.代码容错性差
3.浏览器兼容性差
4.书写繁琐,代码量大
5.代码很乱，各个页面导出都是
6.动画效果，我们很难实现
jQuery的基本使用
开发中用-未压缩的版本，上线用压缩过的
版本问题 1.11.3 or 2.1.4
1.xxx 版本
2.xxx 版本
不支持ie 678
第一步:引包
用jQuery之前，先引入jQuery,再去写我们的jquery代码
浏览器遇到js 把所有其它事情都停了 ，先去加载文件，然后解析js js文件
第二步:入口函数
1.$(document).ready(function(){});
2.$(function(){});
第三步:事件处理程序
1.事件源
a) jQuery: JS:Document.getElementById('id');
b) $("#id")
2.事件
a) JS:Document.getElementById('id').onclick;
b) jQuery: $("#id").click
3.事件处理程序
a) JS:Document.getElementById('id').onclick = function(){ //语句}
b) jQuery: $("#id").click(function(){ //语句 });
jQuery的详细介绍
1.$
a) Js命名归纳:下划线,字母,$,数字
b)但是不能以数字作为开头
jQuery的两个变量:$ 和 jQuery
jQuery 占用了我们两个变量 $ 和 jQuery
专业名词叫污染
jQuery入口函数的实现
var iQuery = function () { var obj = { ready : function (func) { func(); } }; return obj; }; iQuery().ready(function () { console.log("我是ready") });
jS如何函数和jQuery如何函数的区别
js的window.onload 事件 是等到所有的内容以及我们的外部图图片之类的文件 加载完之后才会去执行---早
jQuery的入口函数 是在 html所有标签都加载之后,就会去执行---晚
js中 对象和json的区别
js对象:var obj = { ready: function(){ }};
json:{"":""} 一定要加双引号
js创建对象
面试题:三种方式
var obj = { ready:function () { } };
var obj1 = new Object(); obj1.ready = function () { };
var obj2 = Object.create();
1跟2的区别
推荐第一种方式,第二种方式存在效率的问题 因为要new对象，会涉及到原型查找的问题
jquery选择器
CSS选择器回顾
#id
Id选择器
#id{ color:red; }
.class
类选择器
.class{ //}
Element
标签选择器
P { //}
*
通配符选择器
配合其他选择器来使用
,
并集选择器
div,p{}
空格
后代选择器
选择div下面所有后代的span
>
子代选择器
div > span{}
+
紧邻选择器
div+p 选择div紧挨着的下一个p元素
ul>li{兄弟很多$}*8
{表示内容} $表示序号
jQuery特点隐式迭代
内部循环
jquery选择器
jquery基本选择器
$(“#demo”)
选择id为demo的第一个元素
$(“#demo”).css(“background”,”red”)
$(“.liItem”)
选择所有类名（样式名）为liItem的元素
$(“.liItem”). css(“background”,”red”);
$(“div”)
选择所有标签名字为div的元素
$(“div”). css(“background”,”red”);
$(“*”)
选择所有元素 少用或配合其他选择器来使用
$(“*”). css(“background”,”red”)
$(“.liItem,div”)
选择多个指定的元素，这个地方是选择出了 .liItem元素和div元素
$(“.liItem,div”). css(“background”,”red”)
交集选择器
规律:$(selector).css("background","red");
jquery层级选择器
空格
后代选择器 选择所有的后代元素
$(“div span”). css(“background”,”red”);
>
子代选择器 选择所有的子代元素
$(“div > span”). css(“background”,”red”)
+
紧邻选择器 选择紧挨着的下一个元素
$(“div + p”). css(“background”,”red”)
~
兄弟选择器 选择后面的所有的兄弟元素
$(“div ~ p”). css(“background”,”red”)
jquery 基本过滤选择器
:eq(index)
index是从0开始的一个数字，选择序号为index的元素。 选择第一个匹配的元素。
$(“li:eq(1)”). css(“background”,”red”)
:gt(index)
Index 是从0开始的一个数字，选择序号大于index的元素
$(“li:gt(2)”). css(“background”,”red”)
:lt(index)
Index是从0开始的一个数字，选择小于index 的元素
$(“li:lt(2)”). css(“background”,”red”)
:odd
Index是从0开始的一个数字，选择小于index 的元素
$(“li:odd”). css(“background”,”red”)
:even
选择所有序号为偶数的元素
$(“li:even”). css(“background”,”red”)
:first
选择匹配第一个元素
$(“li:first”). css(“background”,”red”)
:last
选择匹配的最后一个元素
$(“li:last”). css(“background”,”red”)
其它
谷歌浏览器最小字体大小12px
设置多个样式
$(document).ready(function () { // 设置单个样式 // $("li").css("background-color","red"); // 设置多个样式 $("li").css({ "background-color":"red", "font-size":"20px" }); });
根据自己的意愿来设置样式
$(document).ready(function(){ $("li").css("font-size",function (index,value) { // index: 指定当前元素的索引号 // value: 表示当前元素要设置的样式,此处指:background-color // console.log(index); // console.log(value); return (index + 1)*10 + "px"; }); });
常见库: Prototype,YUI,Dojo,ExtJS,jQuery