小四
JQuery
什么是jQuery
他是一个快速小巧的JavaScript的函数库
官网介绍:写的少 做得多
可以下载函数库 .js非压缩版本 用于开发 可以提供详细的错误说明 比压缩版本大
.min.js 压缩版本 用于上线
支持的浏览器 几乎都支持
什么是dom对象
使用js的语法创建的对象就是DOM对象 它具备DOM的属性和方法
// var txts=document.getElementsByClassName(“mytxt”); 得到DOM对象
// alert(txts[1].value); //获得dom对象的属性
什么是jQuery对象
使用jQuery语法创建的对象就是JQuery对象 它具备jQuery对象的属性和方法
!!!它 是一个数组
var txt1=$(#txt1“) //jQuery对象
alert(txt1.val))//jQuery对象的方法 val()
DOM对象转JQuery对象
口诀: 包一包
使用$()包dom对象 包完之后就是jQuery对象
<script type=“text/javascript”>
function btnClick(){
//使用DOM的方式得到按钮对象
//var btn=document.getElementById(“btn”);
//转为jQuery对象
//var jObj=$(btn); //jOBj 就已经是jQuery对象 注意 不加”” 这是上行新建的对象
//alert($(btn).val());
//使用jQuery的方法输出内容
//alert(jObj.val());
var btn=document.getElementById(“btn”); //这里必须加上””
var jObj=$(btn);
alert(jObj.val());
}
</script>
jQuery对象转DOM对象
口诀: 扒拉出来
<script type=“text/javascript”>
function btnClick() {
//使用jQuery的方式得到对象 就是得到jQuery对象
var txt = $(“#txt”) // 警号后面加id
//转为DOM对象
//var dom =txt[0]; //第一种方法
var dom = txt.get(0);//第二种方法
//取出计算的平方
var mul = dom.value * dom.value;
//将结果赋值给文本框
//alert(mul)
dom.value = mul;
}
</script>
有两种方式
使用下标直接取出对象
使用get(下标)取出对象
选择器
什么是选择器
选择器就是对元素的一个定位 从页面抓取元素 在js中进行内容 样式 动画 事件等等操作
基本选择器
/1 id选择器
语法:$(“#id名称”) : 是根据元素的id属性进行定位, 一般id属性是唯一 的 所以通过id选择器返回的元素也是唯一的,如果有相同的id 则只返回第一个id的名称
!!!只返回一个
/2 类选择器
语法: $(“”.类名(样式名称)“) :定位返回一组相同类样式的元素,返回多个
/3 标签选择器
语法 $(“标签名称“):通过标签返回相同样式的元素 返回多个
/4所有选择器
$(“*“) :选中页面上的所有元素
/5组合选择器
语法
$(“id选择器1,id选择器2,类选择器,也可以是标签选择器“)
按指定选择器定位元素
注意!!! 如果id选择器不唯一 则返回相同id名称的元素
层次选择器
<script type=“text/javascript”>
function xian(){
var v=$(“form input”);// 只要是from元素下的所有input子元素，不管该子元素是否在另一个容器元素中
//var v=$(“form>input”);// 仅仅是本form元素下的不在其他容器包裹中的的input子元素才可以，
//如果input元素又被放到本from下另一个div的容器中，则不被选择
//var v=$(“form+input”);//只取form元素一个同辈份的紧挨着的input元素,一定是同级元素
//var v=$(“form~input”);//只取form元素所有同辈份的兄弟input元素,一定是同级元素,挨不挨着无所谓
var s=“”;
for(var i=0;i<v.length;i++)
s=s+v[i].id+“\n”;
alert(s);
}
</script>
表单属性选择器
只有表单元<input>type属性值可以作为选择器的依据
常见的有 text password button checkbox radio submit reset
以下都不是
<select ><textarea><button>
语法
$(“:type属性的名称”):根据不同的表单元素的类型进行统一定位
事件
对页面元素的操作(发出的动作)称为事件 单击 双击 鼠标悬停
jQuery对事件的处理可以通过on进行事件绑定
语法
$(“选择器”).on(“事件名称”,“事件处理程序”);
事件名称:就是js中的事件去掉on部分
事件处理程序 就是当事件发生后的响应
实例
$(“#btn”).on
jQuery 提供了一个页面加载的函数
过滤器
他是跟在选择器后面(不能独立存在) 根据指定条件进行二次或者多次筛选
基本过滤器
1 :first 第一个
2 :last 最后一个
3 :eq(下标) 得到指定下标的元素
4 :lt(下标) 小于指定下标
5 :gt(下标) 大于指定下标
表单对象属性过滤器
可以在标签后面加disabled //不可操作
<input type=“text” value=“text2” disabled=“disabled”><br>
checked 自动选中
<input type=“checkbox” name=“hobby” value=“健身” checked=“checked”/>健身
<input type=“checkbox” name=“hobby” value=“旅游” checked/>旅游
:disable 表单中不可用元素
:enable 表单中所有可用元素
:checked 单选复选被选中元素
:selected 下拉列表框被选中元素
<p>下拉列表框</p>
//默认是java语言 但是加了selected 默认选择go语言
<select id=“language” >
<option value=“java”>java语言</option>
<option value=“c”>c语言</option>
<option value=“go” selected>go语言</option>
</select>
显示隐藏过滤器
:hidden
:cisible 可见的
:empty
<script type=“text/javascript”>
function show1(){
var s=$(“tr:hidden”).html();//找到所有隐藏的tr
alert(s);
}
function show2(){
$(“tr:visible”).addClass(“bg”);//找到所显示的tr改变背景颜色
}
function show3(){
var vs=$(“td:empty”);//找到所有内容为空的td
var str=“”;
for(var i=0;i<vs.length;i++){
str=str+vs[i].id+“\n”;
}
alert(str);
}
</script>
内容限制过滤器
<script type=“text/javascript”>
function show(){
var vs=$(“div:contains(John)”); //匹配包含给定文本的元素(区分大小写)
var str=“”;
for(var i=0;i<vs.length;i++){
str=str+vs[i].id+“\n”;
}
alert(str);
}
function h(){
$(“div:has(p)”).addClass(“bg”); //给所有包含 p 元素的 div 元素添加一个 bg 类样式
}
function he(){
$(“:header”).css(“background”, “red”); //匹配如 h1, h2, h3之类的标题元素
}
</script>
子元素过滤器
!!!!!注意子元素下标从1开始
<script type=“text/javascript”>
function show(){
//var vs=$(“ul li:nth-child(2)”);//匹配每个父元素下的第N个子或奇偶元素,下标从1开始
//var vs=$(“ul li:nth-child(even)”); //匹配每个父元素下所有偶元素,下标从1开始
//var vs=$(“ul li:nth-child(odd)”); //匹配每个父元素下所有奇元素,下标从1开始
//var vs=$(“ul li:first-child”); //匹配每个父元素下第一个子元素
//var vs=$(“ul li:last-child”); //匹配每个父元素下最后一个子元
var vs=$(“ul li:only-child”); //如果某个元素是父元素中唯一的子元素，
var vs=$(“ul li : “)
//那将会被匹配,如果父元素中含有其他元素，那将不会被匹配。
var str=“”;
for(var i=0;i<vs.length;i++){
str=str+vs[i].id+“\n”;
}
alert(str);
}
</script>
函数
常见函数
1) val() 专门真对表单元素的value值进行操作
val() :无参表示取值
val(参数):一参代表赋值
2) text () 专门针对非表单元素进行操作 他不解析html标签
text():无参表示取值 如果内容中包含html标签 则忽略html标签取出内容
text(参数):一参代表赋值如果遇到标签,则将标签当字符串处理 并不解析标签
3) html () 专门针对非表单元素进行操作 他不解析html标签
html():无参表示取值 如果内容中包含html标签 则将html标签当做字符串一并取出
html(参数):一参代表赋值如果遇到html标签,则解析html标签
4)attr(): 专门针对所有元素的除了以上方法操作的内容之外的属性进行操作
attr(属性名称):一参表示取出指定参数的属性的值
attr(属性名称,属性的值):两参表示给指定属性赋值
<script type=“text/javascript”>
$(function(){
$(“#btn1”).on(“click”,function(){
// 获取第一个文本框的值val
alert($(“:text:first”).val())
})
$(“#btn2”).on(“click”,function(){
//”设置所有文本框的值val”
$(“:text”).val(“hello”)
})
$(“#btn3”).on(“click”,function(){
// 获取所有div的文本text
alert( $(“div”).text())
})
$(“#btn4”).on(“click”,function(){
// 获取第一个div的文本text
alert($(“div:first”).text);
})
$(“#btn5”).on(“click”,function(){
//设置div新文本text
$(“div”).text(“这是div的<b>新文本<b> text不能识别html的标签”)
})
$(“#btn6”).on(“click”,function(){
// 显示span中的html
alert( $(“span”).html() );
})
$(“#btn7”).on(“click”,function(){
// 设置span中的html
$(“span”).html(“这是设置span中的html <b>HTML可以识别HTML的标签</b>”)
})
$(“#btn8”).on(“click”,function(){
// 显示img图片的src属性
alert($(“img”).attr(“title”))
})
$(“#btn9”).on(“click”,function(){
// 设置img图片
$(“img”).attr(“src”,“images/ex4.jpg”)
})
})
</script>
5) hide(): 隐藏选中的元素
hide(速度参数) 一般取毫秒 也可以 fast slow normal
6) show() :显示选中元素 如果当前的元素是显示状态 则不做处理
show(速度参数)
7) remove() 将选中的元素从页面移除
empty() 删除子元素
append() 在选中元素末尾添加元素
<script type=“text/javascript”>
$(function() {
$(“#btn1”).on(“click”, function() {
//”隐藏所有div”
$(“div”).hide(“normal”);
})
$(“#btn2”).on(“click”, function() {
//”显示全部div”
$(“div”).show(“slow”)
})
$(“#btn3”).on(“click”, function() {
//”删除下拉列表中的选项”
$(“select”).empty();
})
$(“#btn4”).on(“click”, function() {
//删除整个下拉列表
$(“select”).remove();
})
$(“#btn5”).on(“click”, function() {
//追加元素
//.class 的名字
$(“.three”).append(
`<table border=”1″ width=”200px”>
<tr><td>1111</td> <td>2222</td> </tr>
<tr><td>1111</td> <td>2222</td> </tr>`
)
})
});
</script>
each函数
each() 循环遍历的函数
过去
var cks=$(“:checkbox”);
for (var i=0 ;i<cks.length;i++)
{
var temp=cks[i]//===>temp就是dom对象 他就是一个复选框
//alert(temp.value)
//由于业务复杂 输出要根据条件处理再输出
print(i,temp)
}
function print(i,temp){
alert(temp.value)
}
each函数的用法
each(){
$each(遍历数组或对象的名称,function(循环下标,遍历出来的对象或值){
})
}
第二种
$each(“:checkbox”).each(function(循环下标,遍历出来的对象或值){
})
<script type=“text/javascript”>
$(function(){
$(“#btn1”).on(“click”,function(){
// var texts= $(“:text”);
// $.each(texts,function(i,item){
// alert(i+”=====”+item.value);
// });
$(“:text”).each(function(i,item){
alert(i+“=====”+item.value);
})
$(“:text”).each(function(i,item){
alert(i+“====”+item.value)
})
})
$(“#btn2”).on(“click”,function(){
var arr=[11,22,33];
$.each(arr,function(i,item){
alert(i+“=====”+item)
})
})
$(“#btn3”).on(“click”,function(){
//”遍历json对象数组”
var stu={“name”:“李四”,“age”:“22”};
$.each(stu,function(k,v){
alert(k+“====”+v);
})
})
$(“#btn4”).on(“click”,function(){
var stu=[{“name”:“李四”,“age”:“22”},{“name”:“王五”,“age”:“25”},{“name”:“赵六”,“age”:“26”}];
$.each(stu,function(k,v){
$.each(v,function(i,j){
alert(i+“====”+j)
})
})
})
$(“#btn5”).on(“click”,function(){
var stu =[{“name”:“AA”,“age”:“1”},{“name”:“BB”,“age”:“2”},{“name”:“CC”,“age”:“3”}];
$.each(stu,function(k,v){
$.each(v,function(i,j){
alert(i+“*****”+j)
})
})
})
})
</script>
什么是json
是javascript中的对象的表示方法
事件处理
1) 事件绑定
语法$(“选择器”),on(“事件名称”,事件处理程序)
2)事件监听
语法 $(“选择器”).事件名称(事件处理程序)
<script type=“text/javascript”>
$(function() {
//事件绑定
// $(“#btn1”).on(“click”, function() {
// alert(“ok”)
//
// })
//监听事件
$(“#btn1”).on(“click”,function(){
$(“#mydiv”).append(“<input id=newbtn type=button value=新按钮>”)
$(“:button:last”).click(function(){
alert(“点我了”)
})
})
//事件传参
$(“span”).on(“click”,{“name”:“张三”},function(event){
//alert(“111”)
alert(event.data.name)
})
})
</script>
全选 全不选
<script type=“text/javascript”>
$(function(){
//全选按钮处理事件
$(“#all”).on(“click”,function(){
//alert(this.checked)
//prop 擅长:disable enable ,checked,selected
$(“:checkbox:gt(0)”).prop(“checked”,this.checked)
})
//给四个选项处理事件
$(“input[name=ck]”).on(“click”,function(){
$(“#all”).prop(“checked”,$(“input[name=ck]”).length==$(“input[name=ck]:checked”).length)
//if()
})
})
</script>
本页面展示的文章资讯、图片、视频音频等内容部分来源于互联网，仅供学术交流、学习参考及讨论，无任何商业目的。如展示的内容侵犯您的相关权益，请联系我们，我们将确认后做删除处理。联系方式：308410122@qq.com
-
扫码下载安卓APP
-
微信扫一扫关注我们
微信扫一扫打开小程序
手Q扫一扫打开小程序
-
返回顶部
Copyright © 24资源网 |
2023-2024 |
苏ICP备2022019458号|
queries in 0.334 s | design by：parklot
发表评论