jquery-1
jquery-1
—恢复内容开始—
jquery的基本概念：1.简介
jQuery = javascript Query(查询)。辅助javascript的开发库。jQuery是一个快速的简介的javascript库。也算是javascript的一个框架
jquery可以实现html页面保持代码和html内容分离。也就是说，在html中不用插入一堆js来调用命令了
神马互动百科上介绍的挺好的
2.优势
1.轻量级
2.强大的选择器
3.出色的DOM操作封装（对DOM节点属性的改变）
4.完善的事件和事件对象兼容机制
5.完善的ajax
6.不会污染全局变量。可以和其他js库兼容
7.出色的浏览器兼容
8.方便的链式操作
9.隐式迭代（jquery一般情况下不需要for循环dom对象）
10.完善的官方文档
11.丰富的插件
3.不足
1.不能向后兼容，现版本不兼容旧版本的东西
2.插件兼容性，比较早期的插件是不适用于新版jQuery的
3.插件之间可能会有冲突，特别是有相同的事件或者相同的选择器的时候
4.jquery在大型框架中，特别是打开投胎UI框架的时候，对公话的支持来说不是很好，但是我们可以使用 jquery UI 来弥补
4.cdn获取 百度CND http://libs.baidu.com/jquery/1.11.1/jquery.min.js
5.引入jquery本地
<script src=”jquery.js”></script>
引入CDN上的jquery
<script src=”http://libs.baidu.com/jquery/1.11.1/jquery.min.js”></script>
一：如何能够使用jquery
1.在写juqery代码之前，要引入js文件，单独写一个<script>
2.这是与js所做的对比：
$(function(){ ——–>window.onload=function(){ //是在js加载时就绑定函数
$(“#btnId”) ———–>var btnId=document.getElementById(“btnId”); //此处是获取元素的节点
click ———->btnId.onclick=function(){ //此处是绑定点击函数
二：选择器
$(function(){
//1.选择 id 为 one 的元素
$(“#btn1”).click(function(){ //解释一个：首先是在窗体加载事件里名写的获取元素的节点，然后为其绑定点击函数，函数内写代码用选择器，是ID选择器用的是#加ID名
$(“#one”).css(“background-color”,”#bbffaa”);
});
//2.选择 class 为 mini 的所有元素
$(“#btn2”).click(function(){
$(“.mini”).css(“background-color”,”#bbffaa”);
});
//3.选择 元素名是 div 的所有元素
$(“#btn3”).click(function(){
$(“div”).css(“background-color”,”#bbffaa”);
});
//4.选择所有的元素
$(“#btn4”).click(function(){
$(“*”).css(“background-color”,”#bbffaa”);
});
//5.选择所有的 span 元素和id为two的元素
$(“#btn5”).click(function(){
$(“span,#two”).css(“background-color”,”#bbffaa”);
});
三：层次选择器
$(function(){
//1.选择 body 内的所有 div 元素 后代选择器
$(“#btn1”).click(function(){
$(“body div”).css(“background”, “#bbffaa”);
});
//2.在 body 内, 选择div子元素 子代选择器
$(“#btn2”).click(function(){
$(“body>div”).css(“background”, “#bbffaa”);
});
//3.选择 id 为 one 的下一个 div 元素 同为兄弟的下一个元素
$(“#btn3”).click(function(){
$(“#one+div”).css(“background”, “#bbffaa”);
});
//4.选择 id 为 two 的元素后面的所有 div 兄弟元素 为当前元素除自己外以后所有的兄弟
$(“#btn4”).click(function(){
$(“#two~div”).css(“background”, “#bbffaa”);
});
});
四：基本过滤选择器
$(document).ready(function(){
//1.选择第一个 div 元素
$(“#btn1”).click(function(){
$(“div:first”).css(“background”, “#bbffaa”);
});
//2.选择最后一个 div 元素
$(“#btn2”).click(function(){
$(“div:last”).css(“background”, “#bbffaa”);
});
//3.选择class不为 one 的所有 div 元素
$(“#btn3”).click(function(){
$(“div:not(.one)”).css(“background”, “#bbffaa”);
});
//4.选择索引值为偶数的 div 元素
$(“#btn4”).click(function(){
$(“div:even”).css(“background”, “#bbffaa”);
});
//5.选择索引值为奇数的 div 元素
$(“#btn5”).click(function(){
$(“div:odd”).css(“background”, “#bbffaa”);
});
//6.选择索引值为大于 3 的 div 元素
$(“#btn6”).click(function(){
$(“div:gt(3)”).css(“background”, “#bbffaa”); //括号内填的是索引值
});
//7.选择索引值为等于 3 的 div 元素
$(“#btn7”).click(function(){
$(“div:eq(3)”).css(“background”, “#bbffaa”);
});
//8.选择索引值为小于 3 的 div 元素
$(“#btn8”).click(function(){
$(“div:lt(3)”).css(“background”, “#bbffaa”);
});
//9.选择所有的标题元素
$(“#btn9”).click(function(){
$(“:header”).css(“background”, “#bbffaa”);
});
//10.选择当前正在执行动画的所有元素
$(“#btn10”).click(function(){
$(“:animated”).css(“background”, “#bbffaa”);
});
});
五：内容过滤选择器
$(document).ready(function(){
//1.选择 含有文本 ‘di’ 的 div 元素
$(“#btn1”).click(function(){
$(“div:contains(di)”).css(“background”, “#bbffaa”); //contains()中写是是否含有
});
//2.选择不包含子元素的div元素
$(“#btn2”).click(function(){
$(“div:empty”).css(“background”, “#bbffaa”); //empty不包含子元素
});
//3.选择含有 class 为 mini 元素的 div 元素
$(“#btn3”).click(function(){
$(“div:has(.mini)”).css(“background”, “#bbffaa”);//为选择div中有类名为mini的元素
});
//4.选择含有子元素的div元素
$(“#btn4”).click(function(){
$(“div:parent”).css(“background”, “#bbffaa”); //选择含有子元素的div元素
});
});
六：可见性过滤选择器
$(document).ready(function(){
//1.选取所有可见的 div 元素
$(“#btn1”).click(function(){
$(“div:visible”).css(“background”, “#bbffaa”);
});
//2.选择所有不可见的 div 元素
//不可见：display属性设置为none，或visible设置为hidden
$(“#btn2”).click(function(){
$(“div:hidden”).show(“normal”).css(“background”, “#bbffaa”);
});
//3.选择所有不可见的 input 元素
$(“#btn3”).click(function(){
alert($(“input:hidden”).val());
});
七：属性过滤选择器
$(function() {
//1.选取含有 属性title 的div元素
$(“#btn1”).click(function() {
$(“div[title]”).css(“background”, “#bbffaa”);
});
//2.选取 属性title值等于’test’的div元素
$(“#btn2”).click(function() {
$(“div[title=test]”).css(“background”, “#bbffaa”);
});
//3.选取 属性title值不等于’test’的div元素(没有属性title的也将被选中)
$(“#btn3”).click(function() {
$(“div[title!=test]”).css(“background”, “#bbffaa”);
});
//4.选取 属性title值 以’te’开始 的div元素
$(“#btn4”).click(function() {
$(“div[title^=te]”).css(“background”,”#bbffaa”);
});
//5.选取 属性title值 以’est’结束 的div元素
$(“#btn5”).click(function() {
$(“div[title$=est]”).css(“background”,”#bbffaa”);//这是以什么结束的元素
});
//6.选取 属性title值 含有’es’的div元素
$(“#btn6”).click(function() {
$(“div[title*=es]”).css(“background”, “#bbffaa”);
});
//7.组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有’es’的 div 元素
//对于属性过滤选择器，如果多个写在一起，则后面过滤的对象是前面选择器过滤的结果
$(“#btn7”).click(function() {
$(“div[id][title*=es]”).css(“background”, “#bbffaa”);//这是选取id选则器中title是以es开头的
});
//8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素
$(“#btn8”).click(function() {
$(“div[title][title!=test]”).css(“background”, “#bbffaa”);//是选取含有title的属性值,企鹅title的属性值不等于test的div元素
});
八；子元素过滤选择器
//1.选取每个class为one的div父元素下的第2个子元素
$(“#btn1”).click(function(){
//索引值从1开始
//父元素选择器>子元素选择器 是div中的字元素有.one的然后其中的第二个儿子
$(“div.one>:nth-child(2)”).css(“background”,”#bbffaa”);
$(“div.one>:nth-child(2)”).css(“background”,”#bbffaa”);//不能太放纵是要还的
});
//2.选取每个class为one的div父元素下的第一个子元素
$(“#btn2”).click(function(){
$(“div.one>:first-child”).css(“background”,”#bbffaa”);
});
//3.选取每个class为one的div父元素下的最后一个子元素
$(“#btn3”).click(function(){
$(“div.one>:last-child”).css(“background”,”#bbffaa”);
});
//4.如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素
$(“#btn4”).click(function(){
$(“div.one>:only-child”).css(“background”,”#bbffaa”);
});
九：表单对象属性过滤器
//1.选取每个class为one的div父元素下的第2个子元素
$(“#btn1”).click(function(){
//索引值从1开始
//父元素选择器>子元素选择器 是div中的字元素有.one的然后其中的第二个儿子
$(“div.one>:nth-child(2)”).css(“background”,”#bbffaa”);
$(“div.one>:nth-child(2)”).css(“background”,”#bbffaa”);//不能太放纵是要还的
});
//2.选取每个class为one的div父元素下的第一个子元素
$(“#btn2”).click(function(){
$(“div.one>:first-child”).css(“background”,”#bbffaa”);
});
//3.选取每个class为one的div父元素下的最后一个子元素
$(“#btn3”).click(function(){
$(“div.one>:last-child”).css(“background”,”#bbffaa”);
});
//4.如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素
$(“#btn4”).click(function(){
$(“div.one>:only-child”).css(“background”,”#bbffaa”);
});
这就是基础jquery第一部分，希望可以帮助到大家。
—恢复内容结束—