jquery介绍：
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
jquery版本:
官网可以下载所有的jquery文件
jQuery版本有很多，分为1.x 2.x 3.x
1.x版本：能够兼容IE678 opera老版本的浏览器 已经不更新了
2.x版本：不兼容IE678浏览器 已经不更新了
1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。正在更新
3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）
国内多数网站还在使用1.x的版本
每个jquery都有压缩版和未压缩版
压缩版适用于生产环境 实际开发过程
未压缩的 适用于 开发商测试
jQuery 的使用
使用 jQuery 的基本步骤(导包的代码一定要放在js代码的最上面。)
（1）引包
（2）入口函数
（3）功能实现代码（事件处理）
jQuery的入口函数：
//第一种写法的入口函数
$(document).ready(function () {
console.log("我是第一种写法的入口函数")
})
//第二种写法的入口函数
$(function () {
console.log("我是第二种写法的入口函数")
})
jQuery的入口函数与原生的入口函数的区别
原生的缺点:
1.不能写多个入口函数写了多个 就会覆 盖前面的
2.原生的获取元素的名字太长不好记
3.容错率低 如果前面的代码出现问题那么后面代码全都不会执行
jQuery的入口函数可以写多个
b.执行时机
原生js的入口函数是需要等到页面上所有的资源(dom树外部的js文件 外部的css文件 图片… )都加载完毕之后
jquery的入口函数只需要页面的dom树力戴完毕就可以执行
举两个例子来看看两者的区别：
//js给div加边框
window.onload = function () {
var btn = document.getElementById("btn");
var divlist = document.querySelectorAll("div")
btn.onclick = function () {
for(var i = 0; i < divlist.length;i++){
divlist[i].style.border = "1px red solid"
}
}
}
//jquery给div加边框:
$(document ).ready(function () {
$("#btn").click(function () {
$("div"). css("border", "1px red solid");
});
});
关于$的介绍：
$就是jQuery的别称
而jQuery就是jQuery库提供的一个函数.(好像也不仅仅只是函数， 因为还有 $.ajax(options) 这样的使用，等同 jQuery.ajax(options))
这个函数的作用是根据 () 里的参数进行查找和选择html文档中的元素， 函数作用之一就是GetElementByID的代替，但()内不仅可以是ID，还可以是各类选择器
比如：
(document)就是选取整个文档对象那是不是只可以用(document)就是 选取整个文档对象
那是不是只可以用(document)就是选取整个文档对象那是不是只可以用来代替，不是。为了防止命名冲突，jQuery库提供了另外的机制来给jQuery函数起另外的别名。
jQuery 的两大特点
链式编程：比如.show()和.html()可以连写成.show().html()。
隐式迭代：隐式 对应的是 显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。
js中的DOM对象 和 jQuery对象 比较（重点，难点）
1.使用DOM元素(原生js的方法)给div添加背景颜色
原生js选择器获取到的是dom对象document . getElementsByClas sName
原生的DOM元素 只能调用dom的属性或者方法不能调用jquery的方法
var one = document.getElementById("one");
console. log(one);
// // one.css("backgroundColor"，"green"); // Uncaught TypeError: one.css is not a function
// one.style.backgroundcolor =“ green" ;
2.使用jQuery对象
使用jQuery选择器获取到的是jQuery对象
只能调用jQuery的方法不能调用的原生的
var $one = $("#one"); //获取到的是jQuery对象保存 jQuery对象变量命名的时候最好使用$开头
console. log($one);
// $one.css("backgroundColor", "green"); // jQuery对象调用jQuery方法
// $one. style . backgroundColor = "green"; // 报错不能调用原生 的方法或者属性
-
jQuery对象是什么?
根据特征来看像数组 ,验证是不是说数组
jQuery 对象是一 个伪数组 不能调用数组里面的方法console. log($one.__proto__ === Array. prototype); console. log(Object.prototype.toString.call($one)); -
DOM和jQuery对象 的相互转换
dom元素转换成jQuery对象 :直接把dom作为参数传递给$方法var $divOne = $(one); console.log($divOne);
把jQuery对象转换成dom元素直 接使用下标职值获取到的是就是dom元素
$divs = $("div");
console . log($divs);
var divOne = $divs[0];
console.log(divOne);
//调用jQuery的get方法 参数传索引
var divTwo = $divs . get(1);
console . log(divTwo)
经典案例：
<body>
<ul>
<li>我是第一个li元素</li>
<li>我是第二个li元素</li>
<li>我是第三个li元素</li>
<li>我是第四个li元素</li>
<li>我是第五个li元素</li>
<li>我是第六个li元素</li>
<li>我是第七个li元素</li>
<li>我是第八个li元素</li>
</ul>
</body>
<script src = ./jquery-1.12.4.min.js></script>
<script>
$(function(){
// 1.获取所有的1i元素
var $lis = $("li");
console.log($lis);
// 2.遍历每一个1i元素
for(var i = 0; i < $lis.length; i++) {
//判断是奇数行还是偶数行
if (i % 2 == 0) {
// $lis[i].css("background-color", "pink" );
$lis[i].style.backgroundColor = "pink";
}else{
// $lis[i]. style. backgroundColor = "skyblue" ;
$($lis[i]).css("background-color", "skyblue");
}
}
})
</script>
获取并设置文本
1. text() 获取和设置文本
获取这个文本
var text = $(".div1").text()
console.log(text);
获取全部的文本
console.log($("div").text());//jquery里面封装了迭代的方法 隐式迭代
2.设置文本
只需要给text（参数） 加了参数后 就是给参数设置文本
会覆盖原来的文本 包括子元素
如果新设置的文本包括了标签 那么他是不会解析标签的 当作文本内容来解析
$("#setBtn").click(function () {
$("#box").text("<p>我是新设置的文本</p>")
})
获取样式的方法
在所有的ie浏览器中，获取样式，要写准确的样式，例如我们这里写的获取上边框的宽度 颜色
console.log($(".div1").css("border-top-width"));
console.log($(".div1").css("border-top-color"));
eg：
$(".div1").css({
width:"300px",
height:300,
"background-color":"red",
backgroundColor:"green",
border:"10px solid gold"
})
选择器
基础选择器
id选择器
$("#id名")
类选择器
(".类名")标签选择器(" .类名")
标签选择器(".类名")标签选择器(“标签 名”)
交集选择器
$(“div.two”)要选择元素是div 而且类名要是two
并集选择器
$(" .one, .two") 这个是只要有类名为one 或者two的都可以
子代和后代选择器
子代选择器
$(“父元素>子元素”)
后代选择器
$(“父元素后代元素”)
eg:
$(function() {
//需求1 :找到类名为father的盒 子下的所有子代div标签
console.log($(".father>div"));
//需求2 :我要找到类 名为father的盒子下的所有的子代div标签和p标签
// console. 1og($(" . father>div, p")); // 获取到. father下的所有的子代div标签，和页面 上所有的p标签
// console.1og($(" . father>(div, p)")); // 报错jquery里面 压根没这种写法
console.log($(".father>div, .father>p" ));
//需求3 :找到. father盒子下所有的后代div
console.log($(".father div"));
})
过滤选择器
过滤选择器前面都会加一个冒号
: odd找到索引号为奇数行的元素
: even找到索引号为偶数行的元素
:eq(index)找到传 入的索引号对应的元素
eg:（隔行变色）
<script>
$(function () {
$("li:odd").css("backgroundColor","pink")
$("li:even").css("backgroundColor","yellow")
//把首行和最后一行变成金色
$("li:eq(0)").css("backgroundColor","gold")
$("li:eq(9)").css("backgroundColor","gold")
//给li元素注册鼠标移入事件
$("li").mouseover(function(){
//在颜色修改之前先获取样式
bgColor = $(this).css("backgroundColor");
//当鼠标移入哪一行 哪一行就变绿
$(this).css("backgroundColor","green")
})
//给li元素注册鼠标移出事件
$("li").mouseout(function () {
//当鼠标移出哪一行 哪一行就
$(this).css("backgroundColor",bgColor)
})
})
筛选选择器
主要是方法
children(选择器 ) 子代选择器 $(“父元素>子元素”) 用法 $(“父元素”).children(“子元素选择器”)
find(选择器) 后代选择器 $(“父元素>子元素”) 用法 $(“父元素”). find("子元素选择器i )_
siblings (选择器) 兄弟选择器(找的是兄弟节点不包括自己) $("兄弟元素 )siblingsg兄弟元素)
parent() 父元素选择器 $(“选择器”). parent()
next() 下一个兄弟元素 $(“选择器”).next()
prev() 上一个兄弟元素 $(“选择器”).prev()
eq(index) 找对应索引的元素 $(“1i:eq(B)”) $(“1i”).eq(0)
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
