Jquery入门
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Jquery入门,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含13412字,纯文字阅读大概需要20分钟。
内容图文
![Jquery入门](/upload/InfoBanner/zyjiaocheng/1019/4c7d9c34694e41dc919a5b46ddd736ac.jpg)
一、jQuery简介
1.jQuery封装js,成为一个js类库
2.可以兼容各种浏览器,方便处理html,事件,动画效果,且方便为网站提供AJAX交互,写法简单,使用简单
3.使用jQuary需要引入jquery的js文件
//使用jquery前要引入js文件,放在使用项目的js文件夹下
<script src="文件名.js"></script>
二、jquery对象和DOM对象
1.DOM对象
使用js方法获取的对象就是DOM对象
var domObj=document.getElementById("id");
2.jquery对象
使用jquery方法获取的对象就是jquery对象
jquery对象是DOM对象的包装集,但jquey对象中无法使用DOM对象的任何方法
var $obj=$("#id");
3.DOM对象->jQuary对象
外面加$和圆括号
var obj=document.getElementById("d1");
var $obj=$(obj);
$obj.html("hello jQuery");
4.jQuary对象->DOM对象
var $obj=$("#d1");
//var obj=$obj.get(0);
var obj0=$obj[0];
obj0.innerHTML="hello jQuery";
5.使用jquary来操作DOM对象
//查询
html();//可获得节点的文本和子标签,与DOM的innerHTML属性对应//$div1.html()
text();//可获得节点的文本,html标签会被解析,与innerText属性对应//$div1.text()
val();//针对表单,获取或修改节点的value属性值//$username.val()
attr();//读取,修改节点属性
//读取属性值:$username.attr("name")//name为属性名
//设置属性值:$username.attr("name","tom")//name为属性名,tom为属性值
//创建
$(html标签);
$span=$("<span>我是内联元素</span>");
$a=$("<a href='#'>我是链接</a>")
//插入
append():将DOM节点作为父节点的最后一个孩子节点添加//$div1.append($span)
prepend():作为父节点的第一个孩子节点添加//$div1.prepend($span);
after():作为下一个兄弟节点添加//$span.after($("<a href='#'>我也是链接</a>"));//在span标签后面添加一个超链接
before():作为上一个兄弟节点添加//$span.before($("<a href='#'>我是链接</a>"));//在span标签前面添加一个超链接
//删除
remove():移除DOM//$span.remove();//移除名为span的DOM对象
remove():可以按选择器定位后删除
empty():清空节点//$div1.empty();//清空父节点下的所有子节点,父节点不删除
6.使用jquary来操作属性
attr与prop的区别:html固有元素使用prop();自定义属性用attr
getElementsByName只能用于input里面有name的
//读取属性:attr("属性名");
$username.attr("name")
//读取属性:prop("属性名");
$username.prop("name")
//修改属性:attr("属性名","属性值");
$username.attr("value","tom")
//修改属性:prop("属性名","属性值");
$username.prop("value","tom")
//删除节点属性:removeAttr("属性名");
//删除username这个节点的id属性
$username.removeAttr("id");
7.使用jquery修改对象样式
//获取和设置
$username.attr("class","");
//追加样式
<script>
//给div1追加s1样式
$div1.addClass("s1");
</script>
<style type="text/css">
.s1{
background-color: greenyellow;
}
</style>
//移除样式
$div1.removeClass("s1");
//移除所有样式
$div1.removeClass("s1","s2");
//切换样式
//s2为要切换的新样式
$div1.toggleClass("s2");
//判断是否有某个样式
$div1.hasClass("s2")
//读取css样式:$元素.css("属性");一次只能读取一个属性
$div1.css("background-color");
//设置css样式:$元素.css("属性","属性值");
$div1.css("background-color","yellow");
//设置css的多个样式:$元素.css({"属性":"属性值","属性":"属性值"});
$div1.css({"background-color":"yellow","float":"right"});
8.使用jquery遍历数组
//i代表下标,n代表每个元素
//方法一:$(数组).each(function(i,n){ });
$(arrs).each(function(i,n){
var $option=$("<option>"+n+"</option>");
$(shi).append($option);
});
//方法二:$.each(数组,function(i,n){ })
$.each(arrs,function(i,n){
var $option=$("<option>"+n+"</option>");
$(shi).append($option);
});
9.使用jquery遍历节点
children()/children(selector):
next()/next(selector):获得匹配元素集合中每个元素紧邻的同胞元素
prev()/prev(selector):
parent()/parent(selector):匹配元素集合中每个元素的父元素
siblings()/siblings(selector)
find(selector)
//子节点(只考虑直接子节点):children()/children(selector)
//i为下标,n为当前被遍历的元素
var childrens=$div1.children();
$.each(childrens,function(i,n){
console.info(n);
});
//下一个兄弟节点:next()/next(selector)
//获得每一个p标签下一个紧邻节点
$("p").next();
//获得每一个p标签下一个紧邻节点,且选中类名为 "selected" 的,并设置它们的背景为黄色
$("p").next(".selected").css("background", "yellow");
//上一个兄弟节点:prev()/prev(selector)
//获得每一个p标签上一个紧邻节点
$("p").prev();
//获得每一个p标签上一个紧邻节点,且选中类名为 "selected" 的,并设置它们的背景为黄色
$("p").next(".selected").css("background", "yellow");
//父节点:parent()/parent(selector)
//选择类为.selected的p标签段落的父标签,并设置其背景颜色
$("p").parent(".selected").css("background", "yellow");
//其他兄弟节点:siblings()/siblings(selector)
//选择类为.selected的p标签段落的其他兄弟节点,并设置其背景颜色
$("p").siblings(".selected").css("background", "yellow");
//查找满足选择器的所有后代:find(selector)
$("p").find(".selected")
三、选择器
1.分类
①.基本选择器 ②.层次选择器 ③.过滤选择器 ④.表单选择器
2.基本选择器
//id选择器
$("#id");
//类选择器
$(".class");
//元素选择器
$("元素名");
//通配符选择器
$("*");
//并列选择器
$("选择器,选择器,选择器");
3.层次选择器
//后代选择器(包括孙子及以下的元素):用空格
//获取id=div3的标签为span的所有后代
var $div3=$("#div3 span");
//子元素选择器(只包括第一层):用>
//获取id=div3的直接子元素标签为span的
console.info($("#div3>span"));
//下一个同辈元素:用+
console.info($("#span2+span"));
//兄弟元素(后面所有的同辈元素):用~(将空格不算作一个标签了,js是将空格也当中一个子标签)
console.info($("#span2~span"));
4.其他选择器
①.过滤选择器
以":“或者”[]"开始,根据某一类过滤规则进行元素匹配,分类有以下四种
1.基本过滤选择器
2.内容过滤选择器
3.可见性过滤选择器
4.属性过滤选择器
//1.基本过滤选择
//:first
console.info($(":first"));//过滤掉的是网页中的第一个元素html
console.info($("div:first"));//过滤掉的是div中的第一个元素
//:last
console.info($(":last"));//过滤掉的是网页中的最后一个元素
console.info($("div:last"));//过滤掉的是div中的最后一个元素
//:not(selector)
//将selector排除在外
console.info($("div:not('#div4')"));//过滤掉id=div4的元素
//:eq(index)
console.info($("div:eq(0)"));//过滤掉下标等于0的
//:gt(index)
console.info($("div:gt(0)"));//过滤掉下标大于0的
//:lt(index)
console.info($("div:lt(0)"));//过滤掉下标小于0的
//:even
//挑选偶数行
console.info($("tr:even"));
//:odd
//挑选奇数行
console.info($("tr:odd"));
//2.内容过滤选择器
//:contains(text)
//匹配包含该文本的所有元素
$(":contains('我是内联span2')")
//:empty
//匹配空元素,即不包含子标签和文本的元素
$(":empty")
//:parent
//匹配父元素,即包含子标签和文本的元素
$(":parent"))
//:has(selector)
//匹配含有选择器所匹配的元素
$("div:has(p)")
//3.可见性过滤选择器
//可见不可见是由style里面的display设置的
//display为none(不可见),display为block(可见)
<div id="div5" style="display: none;"></div>
//:hidden
//匹配不可见元素
console.info($(":hidden"));
//:visible
//匹配可见元素
console.info($(":visible"));
//4.属性过滤选择器,[]里面是属性
console.info($("div[id]"));//匹配div中拥有属性id的元素
console.info($("span[id]"));
console.info($("div[class!=div]"));//匹配div中class属性不等于div的元素
console.info($("div[id=div3]"));//匹配div中id属性等于div3的元素
console.info($("div[id^=di]"));//匹配div中属性id是以di开头的元素
console.info($("div[id$=v4]"));//匹配div中属性id是以v4结尾的元素
console.info($("div[id*=v]"));//匹配div中属性id是包含v的元素
②.表单选择器
//:input
//选取表单元素,并设置背景色为黄色
$(":input").css("background-color","yellow");
//:text
//选择文本输入框元素
console.info($(":text"));
//:passward
//选择密码框元素
console.info($(":password"));
//:radio
//:checkbox
//:submit
//:image
//:reset
//:button
//:file
//:hidden
四、jquery事件
js实现初始化加载window.οnlοad=function(){}
jquery实现初始化加载$(function(){});
1.触发示例
$("button #demo").click()
2.绑定示例
$("button #demo").click(function(){
$("img").hide();
});
1.click()鼠标点击事件
<script>
$(function(){
$("#bt").dblclick(function(){
alert("按钮被点击");
})
});
</script>
2.dblclick()鼠标双击事件
$("#bt").dblclick(function(){
alert("按钮被点击");
})
3.change()表单元素发生改变时触发事件
$("#sel").change(function(){
//this是一个DOM对象,要把this变成一个jquery对象才能使用jquery专有方法val()
console.info($(this).val());
})
4.其他事件
3.focus()/blur(); //鼠标聚焦/失焦
4.focusin()/focusout();//鼠标聚焦/失焦,focusin可以在父元素上检测子元素获取焦点的情况
5.hover(function1(){},function2(){});//鼠标移入触发function1(){},鼠标移出触发function2(){}
6.mousedown()/mouseup();//鼠标按下/弹起
7.mouseenter()/mouseleave();//鼠标进入/离开
8.mouseout()/mouseover();//当鼠标移入/移出
9.mousemove();//鼠标移入
10.select();//文本元素被选中时触发
11.submit();//表单提交时触发
12.keydown()/keyup();//键盘按键按下
13.trigger("event");//触发事件event
14.triggerHandler();//触发事件
五、jquery效果
1.
hide()/show()
:隐藏(将显示的标签隐藏起来)显示(将隐藏的标签显示起来)
2.fadeIn()/fadeOut()
:淡入淡出
3.slideDown()/slideUp()
:滑动
4.jquery对象.toggle(fn1,fn2..)
:单击切换,单击第一下的时候执行fn1,第二下的时候执行fn2
$("span:hidden").show();//将span标签被隐藏的显示出来
$("input:visible").hide();//将input标签被显示的隐藏起来
$("#bt").toggle(function(){
alert("单击第一次");
},function(){
alert("单击第二次");
});
六、案例
1.用jQuery实现隔行换色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第五章用jQuery实现隔行换色</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("tr:odd").css("background-color","green");
$("tr:even").css("background-color","yellow");
});
</script>
</head>
<body>
<table border="1px" cellspacing="1px" align="center" id="tab1">
<tr id="tr3">
<td><input type="checkbox"></td>
<td>序号</td>
<td>学科</td>
<td>描述</td>
<td>操作</td>
</tr>
<tr id="tr4">
<td><input type="checkbox"></td>
<td>1</td>
<td>java</td>
<td>万物皆对象,学了java不愁没对象!</td>
<td><a>修改</a>|<a>删除</a></td>
</tr>
<tr id="tr5">
<td><input type="checkbox"></td>
<td>2</td>
<td>大数据</td>
<td>海量数据的存储分析与处理,超强大的!</td>
<td><a>修改</a>|<a>删除</a></td>
</tr>
<tr id="tr6">
<td><input type="checkbox"></td>
<td>3</td>
<td>前端</td>
<td>网站和APP的页面全是他们写出来的,厉害吧!</td>
<td><a>修改</a>|<a>删除</a></td>
</tr>
</table>
</body>
</html>
2.用jquery实现省市二级联动
<!DOCTYPE html>
<html>
<head>
<!--代码注释,创建两个下拉列表,第一个下拉列表给一个onchange事件,只要改变了option的选项,将会触发getshi()这个函数,并且将value值传到这个函数中,在函数中value值用形参index代替,每触发一次函数,只要不是value值为空就将之前的第二个下拉列表的选项置空,然后创建一个二维数组,将所选中value值的数组arrs[index][i],进行数组遍历,将每一个option元素加入到下拉列表当中-->
<title>第五章用jQuery完成二级联动</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery.js"></script>
<script>
function getshi(index){
var shi=document.getElementById('shi');
if(index!=""){
$(shi).empty();
}
var arrs=new Array(3);
arrs[0]=["杭州市","温州市","义乌市","嘉兴市"];
arrs[1]=["南京市","苏州市","扬州市","无锡市"];
arrs[2]=new Array("武汉市","襄阳市","宜昌市");
$.each(arrs[index],function(i,n){
var $option=$("<option>"+n+"</option>");//创建一个option元素
$(shi).append($option);//将option元素放入shi的下拉列表里
});
/*$.each(arrs[index],function(i,n){
var $option=$("<option>"+n+"</option>");
$(shi).append($option);
});*/
}
</script>
</head>
<body>
<h1><b>省市二级联动</b></h1>
籍贯:
<select id="sheng" onchange="getshi(this.value)">
<option value="">请选择</option>
<option value="0">浙江省</option>
<option value="1">江苏省</option>
<option value="2">湖北省</option>
</select>
<select id="shi">
<option>请选择</option>
</select>
</body>
</html>
3.用jquery实现定时弹出广告
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第五章定时弹出广告</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var time;
$(function(){
time=setTimeout("show()",2000);
})
function show(){
var img=$("#img1").show();
clearTimeout(time);
time=setTimeout("hide()",2000);
}
function hide(){
var img=document.getElementById("img1");
img.style.display="none";
clearTimeout(time);
time=setTimeout("show()",2000);
}
</script>
</head>
<body>
<h1>这是一个定时弹出的广告</h1>
<img src="./1.jpg" id="img1">
</body>
</html>
4.用jquery实现复选框全选
<!DOCTYPE html>
<html>
<head>
<!--代码注释:实现全选,首先把表格的表头和表体分开,首先获得表头的checked属性,看看有没有被选中,若被选中,则用getElementsByName("name")获得所有表体的checked属性,将它们都设置为true,否则设置成false-->
<meta charset="utf-8">
<title>第五章jquery实现复选框全选2</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
window.onload=function(){
var td1=document.getElementById("td1");
var tab1=document.getElementById("tab1");
var length=tab1.rows.length;
for(var i=1;i<length;i++){
if(i%2==0){
tab1.rows[i].style.backgroundColor="yellow";
}else{
tab1.rows[i].style.backgroundColor="pink";
}
}
}
/*function choiceAll(){
var All=document.getElementById("All");
var choices=document.getElementsByName("choice");//getElementsByName只能用于input里面有name的
if($(All).prop("checked")==true){
$.each(choices,function(i,n){
$(choices[i]).prop("checked",true);
});
}else{
$.each(choices,function(i,n){
$(choices[i]).prop("checked",false);
});
}
}*/
function choiceAll(){
var All=$("#All");
var choices=$("[name=choice]");
if(All.prop("checked")){
choices.prop("checked",true);
}else{
choices.prop("checked",false);
}
}
</script>
</head>
<body>
<table border="1px" cellspacing="1px" align="center" id="tab1">
<thead>
<tr>
<th><input type="checkbox" id="All" onclick="choiceAll()"></th>
<th>序号</th>
<th>学科</th>
<th>描述</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td id="td1"><input type="checkbox" name="choice"></td>
<td>1</td>
<td>java</td>
<td>万物皆对象,学了java不愁没对象!</td>
<td><a>修改</a>|<a>删除</a></td>
</tr>
<tr>
<td id="td1"><input type="checkbox" name="choice"></td>
<td>2</td>
<td>大数据</td>
<td>海量数据的存储分析与处理,超强大的!</td>
<td><a>修改</a>|<a>删除</a></td>
</tr>
<tr>
<td id="td1"><input type="checkbox" name="choice"></td>
<td>3</td>
<td>前端</td>
<td>网站和APP的页面全是他们写出来的,厉害吧!</td>
<td><a>修改</a>|<a>删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>
内容总结
以上是互联网集市为您收集整理的Jquery入门全部内容,希望文章能够帮你解决Jquery入门所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。