文章目录
jQuery基础
jQuery是一个非常优秀的JavaScript框架
通用功能实现完毕,编写自己的特殊功能
jQuery特点:
- 支持CSS3技术
- 实现浏览器兼容性,跨域浏览器. 从2.0版本开始,不在支持IE678
- 代码越小越少,功能越多越好
- AJAX异步请求
基础语法
<script type="text/javascript">
/**
* 使用jQuery框架
* 先调用核心函数: jQuery()
* 核心函数的参数,传递自己编写匿名函数
* 会在页面加载完成后调用匿名函数
* 核心函数名字可以简写为$
*/
$( function(){
alert("jquery");
});
/*window.onload = function(){
alert(1);
}
window.onload = function(){
alert(2);
}*/
</script>
DOM对象和jQuery对象
DOM对象
document对象获取的页面元素,称为DOM对象, document.getElementById()
jQuery对象
使用jQuery方式获取的页面元素,称为jQuery对象, $("#id")
注意: DOM对象和jQuery对象不通用的
function fn(){
//dom方式,获取文本框输入的内容
var user = document.getElementById("user");
alert(user.value);
//jQuery方式,获取文本框输入的内容
var $user = $("#user");
alert( $user.val() );
}
DOM对象和jQuery对象互转
<script type="text/javascript">
function fn(){
//dom方式,获取文本框输入的内容
var user = document.getElementById("user");
//alert(user.value);
//jQuery方式,获取文本框输入的内容
var $user = $("#user");
//alert( $user.val() );
//DOM对象转成jQuery对象,穿马甲
//alert( $(user).val() )
//jQuery对象转成DOM对象,脱马甲
//jQuery对象本质上是个数组,数组存储的元素是DOM对象
alert ( $user[0].value );
}
</script>
jQuery选择器
选择器作用: 快速的精准的定位到页码中的html元素
和css选择器一致的
基本选择器
- 元素选择器 $(“标签名”)
- id选择器 $("#id属性值")
- class选择器 $(".class属性值")
<script type="text/javascript">
//<input type="button" value="改变 id 为 one 的元素的背景色为 红色" id="b1"/>
//jQuery对象调用函数(事件函数)
$("#b1").click( function(){
//css函数,操作样式表,CSS的属性和属性值
$("#one").css("background-color","red");
});
// <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色" id="b2"/>
$("#b2").click(function(){
$("div").css("background-color","red");
});
//<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色" id="b3"/>
$("#b3").click(function(){
$(".mini").css("background-color","red");
});
// <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色" id="b4"/>
$("#b4").click(function(){
/* $("span").css("background-color","red");
$("#two").css("background-color","red");*/
$("#two ,span").css("background-color","red");
});
</script>
层次选择器
- $(“A B”)获取A元素的所有后代B元素
- $(“A>B”)获取A元素的所有后代子元素B
- $(“A+B”)获取A元素的同级的后面的下一个B元素
- $(“A~B”)获取A元素的同级后面的所有B元素
<script type="text/javascript">
//<input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色" id="b1"/>
$("#b1").click(function(){
$("body div").css("background-color","red");
})
//<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色" id="b2"/>
$("#b2").click(function(){
$("body>div").css("background-color","red");
});
//<input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 红色" id="b3"/>
$("#b3").click(function(){
$("#one+div").css("background-color","red");
});
//<input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 红色" id="b4"/>
$("#b4").click(function(){
$("#two~div").css("background-color","red");
});
//<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为红色" id="b5"/>
$("#b5").click(function(){
/**
* id="two" 所有的兄弟元素
* 即有哥哥,也有弟弟
*/
$("#two").siblings("div").css("background-color","red");
});
</script>
属性选择器
- 获得有属性名的元素：$(“A[属性名]”)
- 获得属性名 等于 值 元素：$(“A[属性名=值]”)
- 获得属性名 不等于 值 元素：$(“A[属性名!=值]”)
- 获得属性名 以 值 9开头 元素：$(“A[属性名^=值]”)
- 获得属性名 以 值 结尾 元素： ( " A [ 属 性 名 ("A[属性名 ("A[属性名=值]")
- 获得属性名 含有 值 元素：$(“A[属性名*=值]”)
- **复合属性选择器，多个属性同时过滤：$(“A[属性名!=值][属性名!=值][属性名!=值]”)
<script type="text/javascript">
//<input type="button" value=" 含有属性title 的div元素背景色为红色" id="b1"/>
$("#b1").click(function(){
//属性选择器,选择带有title
$("div[title]").css("background-color","red");
});
// <input type="button" value=" 属性title值等于test的div元素背景色为红色" id="b2"/>
$("#b2").click(function(){
//获取属性值是test的元素
$("div[title=test]").css("background-color","red");
});
// <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色" id="b3"/>
$("#b3").click(function(){
//属性值不等于test
$("div[title!=test]").css("background-color","red");
});
// <input type="button" value=" 属性title值 以te开始 的div元素背景色为红色" id="b4"/>
$("#b4").click(function(){
//属性值以te开始的
$("div[title^=te]").css("background-color","red");
});
// <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色" id="b5"/>
$("#b5").click(function(){
//属性值是est结束的
$("div[title$=est]").css("background-color","red");
});
// <input type="button" value="属性title值 含有es的div元素背景色为红色" id="b6"/>
$("#b6").click(function(){
//属性值含有es的
$("div[title*=es]").css("background-color","red");
});
// <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色" id="b7"/>
$("#b7").click(function(){
$("div[id][title*=es]").css("background-color","red");
});
</script>
过滤选择器
- 获得选择的元素中的第一个元素： :first
- 获得选择的元素中的最后一个元素： :last
- 不包括指定内容的元素例如： :not(selecter)
- 偶数，从 0 开始计数： :even
- 奇数，从 0 开始技术： :odd
- 指定第几个： :eq(index)
- 大于n个： :gt(index)
- 小于n个： :lt(index)
- 获得标题 （< h1> /< h2> …） :header — 固定写法
- 获得动画的 :animated —固定写法 正在执行的动画
<script type="text/javascript">
// <input type="button" value=" 改变第一个 div 元素的背景色为 红色" id="b1"/>
$("#b1").click(function(){
$("div:first").css("background-color","red");
});
// <input type="button" value=" 改变最后一个 div 元素的背景色为 红色" id="b2"/>
$("#b2").click(function(){
$("div:last").css("background-color","red");
});
// <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色" id="b3"/>
$("#b3").click(function(){
$("div:not(.one)").css("background-color","red");
});
// <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色" id="b4"/>
$("#b4").click(function(){
$("div:even").css("background-color","red");
});
// <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色" id="b5"/>
$("#b5").click(function(){
$("div:odd").css("background-color","red");
});
// <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色" id="b6"/>
$("#b6").click(function(){
$("div:gt(3)").css("background-color","red");
});
// <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色" id="b7"/>
$("#b7").click(function(){
$("div:eq(3)").css("background-color","red");
});
// <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色" id="b8"/>
$("#b8").click(function(){
$("div:lt(3)").css("background-color","red");
});
// <input type="button" value=" 改变所有的标题元素的背景色为 红色" id="b9"/>
$("#b9").click(function(){
//所有标题,特指的h1-h6标签 选择器 :header
$(":header").css("background-color","red");
});
// <input type="button" value=" 改变当前正在执行动画的所有元素的背景色为 红色" id="b10"/>
$("#b10").click(function(){
//选择正在执行动画的,选择器 animated
$(":animated").css("background-color","red");
});
function abc(){
$("#mover").slideUp(3000);
}
abc();
</script>
表单选择器
- 可用： :enabled
- 不可用： :disabled
- 选中（单选radio ，多选checkbox）： :checked
- 选择（下列列表 ）： :selected
<script type="text/javascript">
// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/>
$("#b1").click(function(){
//获取多个input标签属性值是 enabled, type属性值是text 返回数组
var inputs = $("input[type=text]:enabled");
for(var i=0;i<inputs.length;i++){
//jQuery对象就是个数组,遍历出来,数组的元素是DOM对象
alert ( $(inputs[i]).val());
}
});
// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/>
$("#b2").click(function(){
//获取多个input标签属性值是disabled,返回数组
var inputs = $("input[type=text]:disabled");
for(var i=0;i<inputs.length;i++){
$(inputs[i]).val("修改后的");
}
});
// <input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数" id="b3"/>
$("#b3").click(function(){
var inputs = $("input:checked");
alert(inputs.length);
});
// <input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容" id="b4"/>
/*
* html()==DOM对象的innerHTML
* text()==DOM对象的innerText
*/
$("#b4").click(function(){
var inputs = $("option:selected");
for(var i=0;i<inputs.length;i++){
alert( $(inputs[i]).text());
}
});
</script>
jQuery的DOM操作
jQuery函数的特点:
函数支持方法的调用链,链式编程
函数支持多种调用方式, css(属性名,属性值)赋值, css(属性名)取值\
DOM操作一
<script type="text/javascript">
//页面加载完成
$(function(){
//获取张三
//dom对象获取值,value属性, jQuery获取值val()函数
//alert( $("#myinput").val());
//获取标题文本
//dom对象使用属性innerText,jQuery使用的是text()函数
alert( $("#mydiv").text() );
//获取mydiv的后的所有内容
//dom对象使用属性innerHTML,jQuery使用的是html()函数
alert( $("#mydiv").html() );
});
</script>
DOM操作二
<script type="text/javascript">
/**
* 属性操作:
* DOM对象函数 setAttribute,getAttribute
* jQuery中函数 attr(属性名,属性值) attr(属性名)
*/
//获取北京节点的name属性值
//alert( $("#bj").attr("name") );
//设置北京节点的name属性的值为dabeijing
$("#bj").attr("name","dabeijing");
//新增北京节点的discription属性 属性值是didu
$("#bj").attr("discription","didu");
//删除北京节点的name属性并检验name属性是否存在
$("#bj").removeAttr("name");
//获得hobby的的选中状态
alert( $("#hobby").prop("checked"));
/**
* jQuery新增函数
* prop property
* prop函数适用于,固有属性:
* checked=checked selected=selected
*
* attr函数适用于其他的属性
*/
</script>
DOM操作三
<script type="text/javascript">
//<input type="button" value="采用属性增加样式(改变id=one的样式)" id="b1"/>
$("#b1").click(function(){
$("#one").attr("class","second");
});
//<input type="button" value=" addClass" id="b2"/>
$("#b2").click(function(){
$("#one").addClass("second");
});
//<input type="button" value="removeClass" id="b3"/>
$("#b3").click(function(){
$("#one").removeClass("second");
});
//<input type="button" value=" 切换样式" id="b4"/>
$("#b4").click(function(){
$("#one").toggleClass("second");
});
//<input type="button" value=" 通过css()获得id为one背景颜色" id="b5"/>
$("#b5").click(function(){
alert( $("#one").css("background-color"));
});
// <input type="button" value=" 通过css()设置id为one背景颜色为绿色" id="b6"/>
$("#b6").click(function(){
$("#one").css("background-color","green");
});
</script>
DOM操作四
<script type="text/javascript">
/**将反恐放置到city的后面*/
//$("#city").append($("#fk"));
/**将反恐放置到city的最前面*/
$("#city").prepend($("#fk"));
</script>
DOM操作五
<script type="text/javascript">
//删除<li id="bj" name="beijing">北京</li>
/**
* DOM中,删除节点,需要父节点删除子节点(浏览器支持)
* jQuery支持自杀
*/
$("#bj").remove();
//删除所有的子节点 清空元素中的所有后代节点(不包含属性节点).
//测试(id='city')并没有被删除
$("#city").empty()
</script>
隔行变色案例
<script type="text/javascript">
$(function(){
/**
* 偶数行背景色: even
* 奇数行背景色: odd
*/
$("tr:gt(1):even").css("background-color","blanchedalmond");
$("tr:gt(1):odd").css("background-color","brown");
});
</script>
全选和全不选
<script type="text/javascript">
/**
* 点击事件实现功能
* 全选和全不选:
* 所有的分选框的属性 checked = 总选框的属性checked
* checked属于固有属性,函数prop
*/
function selectAll(){
//获取总选框
//var zong = $("#zong").prop("checked");
//获取分选框
$(".itemSelect").prop("checked",$("#zong").prop("checked") );
}
</script>
定时广告
<script type="text/javascript">
/**
* 页面打开后3秒,显示广告
* 动画效果,观看3秒中
*/
$(function(){
setTimeout(function(){
$("#guanggao").slideDown(3000);
},3000);
setTimeout(function(){
$("#guanggao").slideUp(3000);
},9000);
});
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
