jQuery的简单实用

来源：互联网发布：你凭什么看不起程序员编辑：程序博客网时间：2024/05/22 09:31

1.jquery和html的整合
jquery是单独的js文件,通过script标签的src属性导入即可。
2.获取一个jquery对象：
$("选择器") 或者 jQuery("选择器")
3.dom对象和jquery对象之间的转换
dom对象===>jquery对象
$(dom对象)
jquery对象===>dom对象
方式1:
jquery对象[index]
方式2:

jquery对象.get(index)

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><script src="../js/jquery-1.11.0.min.js"></script>    <body>    <input type="button" id="bb" value="点我吧" name="按钮"/>    <span id="span" >这是一个span标签</span>    </body>    <script type="text/javascript">    var but=document.getElementById("bb");//   alert(but.value);//  dom对象和jQuery对象之间的转换var $user=$(but);//alert($user.val());//jQuery对象和dom对象之间的转换var $dos=$("#bb");//alert($dos.name);var doms=$dos.get(0);//alert(doms.value)//alert(doms.name);var uu=document.getElementById('span');alert(uu.innerHTML)$dos=$("#span");alert($dos.innerHTML); //undefineddoms=$dos.get(0);alert(doms.innerHTML)    </script></html>

4.页面加载:
js:
window.onload=function(){}//在一个页面中只能使用一次
jquery 在一个页面中可以使用多次
方式1:
$(function(){...})
方式2:
$(document).ready(function(){});
5.派发事件:
$("选择器").click(function(){...});
等价于原生js中
dom对象.onclick=function(){....}
掌握事件:
focus
blur
submit
change
click
6.jquery中效果:
隐藏或展示
show(毫秒数) hide(毫秒数)
滑入或滑出
slideDown(毫秒数):向下滑入
slideUp(毫秒数):向上滑出
淡入或淡出
fadeIn(int):淡入

fadeOut(int):淡出

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><script src="../js/jquery-1.11.0.min.js"></script><script>//$(function(){})表示页面加载成功$(function(){$("#but1").click(function(){//alert("123");//$("#img1").hide(2000);//隐藏图片//$("#img1").fadeToggle(2000);//淡入淡出  表示切换//$("#img1").show(2000);//展示图片//$("#img1").toggle(2000);//$("#img1").slideToggle(2000);//滑入滑出切换});})</script><body><div id="div1"><input type="button" name="按钮" id="but1" value="展示" /><img src="../img/ad.jpg" width="100%" id="img1" /></div></body></html>

7.选择器总结:
基本选择器★
$("#id值") $(".class值") $("标签名")

获取所有:$("*")
获取多个选择器用逗号隔开
$("#id值,.class值")
层次选择器 ★
a b:a的所有b后代
a>b:a的所有b孩子
a+b:a的下一个兄弟(大弟弟)
a~b:a的所有弟弟
基本过滤选择器:★
:frist 第一个
:last 最后一个
:odd 索引奇数
:even 索引偶数
:eq(index) 指定索引
:gt(index) >
:lt(index) <
内容过滤:
:has("选择器"):包含指定选择器的元素
可见过滤:
:hidden 在页面不展示元素一般指 input type="hidden" 和样式中display:none
:visible
属性过滤器:★
[属性名]
[属性名="值"]
表单过滤:

:input 所有的表单子标签 input select textarea button

<script>$(function(){$("#btn1").click(function(){$("#one").css("background-color","greenyellow");})$("#btn2").click(function(){$(".mini").css("background-color","aqua");})$("#btn3").click(function(){$("div").css("background-color","blueviolet");})$("#btn4").click(function(){$("*").css("background-color","deepskyblue");})$("#btn5").click(function(){$("span,#two").css("background-color","palevioletred");})})</script><script type="text/javascript"> $(function(){ $("#btn1").click(function(){ $("body div").css("background-color","greenyellow");//a b :表示a的所有b后代 }) }) $(document).ready(function(){ $("#btn2").click(function(){ $("body>div").css("background-color","aqua")//a>b 表示a的所有b孩子 }) }) $(function(){ $("#btn3").click(function(){ $("#one+div").css("background-color","greenyellow");//a+b :表示a的下一个兄弟 }) }) $(function(){ $("#btn4").click(function(){ $("#two~div").css("background-color","lightblue");//a~b :表示a的所有弟弟 }) }) </script><script type="text/javascript"> $(function(){ $("#btn1").click(function(){ $("div:first").css("background-color","greenyellow");// :frist 第一个元素 }) }); $(function(){ $("#btn2").click(function(){ $("div:last").css("background-color","blue");// :last第一个元素 }) }); $(function(){ $("#btn3").click(function(){ $("div:even").css("background-color","yellow");// :even 索引值为偶数的元素 }) }); $(function(){ $("#btn4").click(function(){ $("div:odd").css("background-color","yellow");// :odd 索引值为奇数的元素 }) }); $(function(){ $("#btn5").click(function(){ $("div:eq(3)").css("background-color","yellow");// :eq(index) 指定索引处的元素 }) }); $(function(){ $("#btn6").click(function(){ $("div:gt(3)").css("background-color","yellow");// :gt(index) 大与 给定索引的元素 }) }); $(function(){ $("#btn7").click(function(){ $("div:has('.mini')").css("background-color","yellow");// :has("选择器"):包含指定选择器的元素 }) }); </script> <script type="text/javascript"> $(function(){ $("#btn1").click(function(){ //选取含有 属性title 的div元素 $("div[title]").css("background-color","greenyellow"); }) $("#btn2").click(function(){ //选取 属性title值等于“test”的div元素 $("div[title='test']").css("background-color","aqua"); }) }); </script>

8.遍历数组
数组.each(function(){});
$.each(遍历数组,function(){});

注意:
each的function中可以加两个参数 index和dom
index是当前遍历的索引值
dom指代的是当前遍历的dom对象(开发中一般使用this即可)
//////////////////////////////
设置或者获取value属性
jquery对象.val():获取
jquery对象.val("...."):设置
/////////////////////////////////////////
设置获取获取标签体的内容
html()
text()
设置的区别:
html:会把字符串解析
text:只做为普通的字符串
获取的区别:
html:获取的html源码
text:获取只是页面展示的内容
//////////////////////////////////////////////
创建一个元素: $("<标签></标签>")
///////////////////////
9.文档操作:
内部插入
a.append(c):将c插入到a的内部(标签体)后面
a.prepend(c):将c插入到a的内部的前面

appendTo
prependTo
外部插入
a.after(c):将c放到a的后面
a.before(c):将c放到a的前面

a.insertAfter(c)
a.insertBefore(c)
删除
empty() 清空元素

remove() 删除元素

<!DOCTYPE html><html>  <head>  <title>01_内部插入节点.html</title>  <meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script><script type="text/javascript">$(document).ready(function(){//1.在city的后面内部追加 反恐//$("#city").append($('#fk'))//2.在city的前面内部插入 反恐//$("#city").prepend($('#fk'))//3.在city外部插入//$("#city").after($('#fk'))//4.删除id为city的ul元素//$("#city").remove('ul')});$(function(){//$("#city").text("<a>新来的</a>");//会把“<a>新来的</a>”整体写入ul标签中$("#city").html("<a>后来的</a>");//会解析字符串中的内容，指只会把“后来的”写入标签中//alert($("#city").html())//获取到id为city的标签体中的内容是 <a>新来的</a> alert($("#city").text())  //获取到id为city的标签体中的内容是 后来的})</script></head><body> <ul id="city">  <li id="bj" name="beijing">北京</li> <li id="tj" name="tianjin">天津</li> <li id="cq" name="chongqing">重庆</li> <a>你好吗</a></body></html>

阅读全文

0 0