选择器
什么叫选择器
其实 jquery的所有方法 都是通过$或者是以某种形式在使用这个选择器
选择器有什么用
选择器可以选择元素对象 通过对象我们可以对它本身进行一系列的操作
格式$(选择器内容)
例:
我在<body>之中 定义一个div 使其 id="banner" 那么我们要获取这个div的对象我们应该怎么去获取呢
很简单 我们只需要在script标签之中 或者是在外部引入的文件之中 定义$("#banner") 我们就可以选定这个对象
$("#banner") 所代表的意义是 选择$ #代表的是id banner紧跟着#那么就代表着id=banner
不仅有这种选择模式 还有其他的选择模式 请跟我来 不要走开
$(".banner") 这段代码的意思是选择页面中所有class="banner"的元素对象
$("input") 这段代码所代表的意思是 选择页面之中 所有的input 标签
$("form > input") 这段代码表示的是form元素下面的所有的input 标签 注意 这里选择的范围是儿子辈 而不是孙子辈 如果孙子辈也出现了input 那么选择不到的
看到这里我想我自己也应该知道了吧 ">" 能选择前面父集元素之中所以的子集
$("input#banner") 这段代码的意思是选择所有input标签元素 并且其id="banner"的这一个元素 这就属于连贯的选择了
$("input[type='text']") 这段代码表示的是选择的所有的input标签并且其属性值type='text'的符合这一属性的对象组
$("input:eq(0)") 这段代码意为选择的是页面中所有的input 标签 并且选择其中的第一个对象
$("input:lt(3)") 这段代码的意思是页面之中所有的input标签之中选择元素对象小于3的input元素对象组
$("input[type!='text']") 这段代码的意思是选择input标签中所有的type不等于text的对象组
同理还有许多的选择方式 具体的请参考手册 我这里实在是难的打字 所以就不一一列举了
对象的操作
对象的操作我会以下内容:属性值的获取与设置、form表单子标签的val获取与设置、文本的获取与设置、以及添加类、删除类、删除元素、添加元素
1.属性值的获取与设置attr
首先我们要选择我们要操作的对象 我这里选择的是#banner
$("#banner").attr('src') 这样我们就获取id=banner 对象的src属性值 由此我们就可以扩展 这样的方式我们也可以去获取 href、type、name、等等关于对象自定义的一些属性值
$("#banner").attr({src:'http://localhost/xxmdb/index.php/Home/Index/index'})
这样我们就设置对象的属性值 解释将对象中的src属性值设置成http://localhost/xxmdb/index.php/Home/Index/index我们就改变对象的属性值
2.form表单的val值获取以及设置
在javascript中我们获取form表单的值的时候我采用的是
document.getElementById("对象id值").value; 通过这种方式我们去获取表单的对象 .value后 我们就获得了他的value值
如<input type="text" id="yongge" value="我的名字叫什么?">
通过原生态的javascript代码我们需要写成
document.getElementById("yongge").value 前面在定义一个变量去接收我们获取的值就可以了
那么我们在jquery中我们怎么获取对象的值呢
$("#user").val() 就这样我们获得了id=user对象的值 是不是很简单
那么我们怎么去设置它的默认值呢
在javascript之中我们是这样去设置的
注意:value属性一般只有表单的元素才有
document.getElementById("#user").value=要设置的值 通过这种方式我们就设置其对象的value值
那么我们jquery是如何去实现默认值的定义呢
$("#user").val('要设置的值') 通过这种方式我们就设置了对象的默认值
3.文本的获取与设置
文本获取根据需要有两种获取方式 第一种是text只获取其文本的内容值
第二种是html获取包含html标签代码的值
例 我这里就简单的举连个列子
<div id="bannerText"><p>我的名字叫什么?</p></div>
获取div的text文本值
$("#bannerText").text(); 我们就获取到了其中结果: 我的名字叫什么这个值
$("#bannerText").html(); 我们就获取到了其中结果： <p>我的名字叫什么</p>
看到这一步我想 这两个函数之间的区别我想大家都理解吧
设置文本的值
同样是用text() 与 html() 也是根据用户的需求去设置的
$("#bannerText").text('我的名字叫谭勇') 通过这样的方式我们会将替换我们定义的<p>我的名字是什么</p>替换的结果是 我的名字叫谭勇
这样的方式是只改变其中内容的文本而不去改变其结构
$("#bannerText").html('<div id="myImg">我的生日是几号</div>') 通过这样的方式我们就可以替换id="banner"对象的结构
改变后的形式是<div id="bannerText"><div id="myImg">我的生日是几号</div></div>
这两种方法之间的区别我想大家有想法了吧
4.添加和删除类
添加类
在用户使用中我们有时需要对对象进行类的添加 需要使用的语法 我先讲解一下
$("#banner").addClass("myName") 首先还是一样的我们需要选择我们要操作的对象 在之后调用方法addClass 向这个对象里面添加类 类名叫 myName
就是这样没设么复杂的
删除类
$("#banner").removeClass("myName") 还是老样的要选择我们要操作的对象 在之后调用方法removeClass 向这个对象删除类 类名叫 myName
手酸啊
添加元素和删除元素 (等下我去看下手册了来,打字从未这么犀利过)
好了 来
append 向匹配元素的对象之中的末尾添加内容
例：
<div id="myName"><p class="myName">我的名字叫什么</p></div>
$("#myName").append("<p>我的名字叫谭勇</p>"); 处理后的结果是
<div id="myName">
<p class="myName">我的名字叫什么</p>
<p>我的名字叫谭勇</p>
</div>
我想看到这一步 大家都知道这个原理了吧
append函数就是向匹配的对象之中添加元素的内容 这个内容可以是html代码标签包含的数据 也可以就是一段数据
each 属性的用法
//假设页面页面之中有四个<p></p>标签
var arr=new Array('myName','isFunction','isArray','data');
$("p").each(function(i){
$("p:eq("+i+")").text(arr[i]); //其中i代表着每个标签p在这个标签p集合之中所处的位置 默认从0开始计数
})
/*无用这是用tp 进行的数据分页样式判断
:not(:eq)扩展
tp 与 jquery 搭配使用
加入当前页使用的样式是 curen 其他也使用的样式是sour 那么怎么去判定呢 首先我们要清楚 当前是第几页 总页数就多少 从第几页开始的循环
<for start="$start" end="$end" step="1">
<if condition="$i eq $page">
<li><a href="curen">$i</a></li>
<else/>
<li><a href="">$i</a></li>
</if>
</for>
*/
/*二级导航特效*/
<script>
$(function(){
$("#banner > li").click(function(){
$(this).css({background:"#000",color:"#fff"});
$("#banner > li:not(:eq("+$(this).index()+"))").css({background:'f00',color:'#fff'});
})
})
</script>
综上 获得属性值和设置属性值attr()函数 获得表单value值和设置表单value值val()函数 获得文本值和设置文本值text()和html()函数
动画播放
jquery之中的动画函数有以下几种
fadeIn() 显示
fadeOut() 隐藏
animate() 动画
slideUp() 向上滑动隐藏
slideDown() 向下滑动显示
show() 无动画显示
hide() 无动画隐藏
设置代码 一下代码是关于一个二级导航的样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="./jquery-1.9.1.js">
</script>
<script>
$(function(){
$("#banner-ul > li").mouseenter(function(event){
$(this).children("ul").slideDown(200);
event.stopPropagation();
})
$("#banner-ul > li").mouseleave(function(event){
$(this).children("ul").slideUp(200);
})
})
</script>
</head>
<style>
body{text-align:center;color:#000;}
*{margin:0px;padding:0px;}
ul{list-style-type: none;}
a{text-decoration: none;display:block; width:150px;height:29px;}
#banner{margin:auto;margin-top:20px;width:600px;}
#banner > ul > li > ul{display:none;position:absolute;height:116px;width:150px;}
#banner > ul > li > a:hover{background:#0f0;}
#banner > ul > li{float:left;}
#banner li{width:150px;height:29px;line-height:29px;background-color:#ccc;}
#banner > ul > li > ul > li:hover{background:#f00;color:#fff;}
</style>
<body>
<div id="banner" >
<ul id="banner-ul">
<li><a href="">连接一</a>
<ul>
<li><a href="http://www.baidu.com">连接1-1</a></li>
<li>连接1-2</li>
<li><a href="http://www.baidu.com">连接1-3</a></li>
<li><a href="http://www.baidu.com">连接1-4</a></li>
</ul>
</li>
<li><a href="">连接二</a>
<ul>
<li>连接2-1</li>
<li>连接2-2</li>
<li>连接2-3</li>
<li>连接2-4</li>
</ul>
</li>
<li><a href="" >连接三</a>
<ul>
<li>连接3-1</li>
<li>连接3-2</li>
<li>连接3-3</li>
<li>连接3-4</li>
</ul>
</li>
<li><a href="">连接四</a>
<ul>
<li>连接4-1</li>
<li>连接4-2</li>
<li>连接4-3</li>
<li>连接4-4</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
如上便是一段二级导航的代码
例子
$("#banner").animate({'width':'+200','height':'+300','marginTop:'+600'},'3000',function(){alert('动画执行完成')})
解释：让对象banner执行动画 执行的动画为:
1.宽度在原有的基础之上+200个像素
2.高度在原有的基础之上+300个像素
3.外边距margin-top在原有的基础之上+600个像素
所有的动画必须在3秒这个事件完成
执行完成后触发函数 function() 弹出提示框动画执行完成
$(function(){
$("div").each(function(i)){
alert('当前div相对于整个div组的位置是:'+i);
}
$("#btn").click({'name':'谭勇','obj':$("#banner")},function(event){
alert('传递过来的数据是:'+event.data.name+'\n'+'传递过来的对象是:'+event.data.obj);
})
})
在javascript语言之中 截取字符串的函数是substring(begin.end) 函数
参数详解
begin 从第几个参数开始
end 在第几个参数结束
如var strOne='myName is tanyong';
var strTwo=strOne.substring(6); //意思是从字符串strOne中截取字符 从第6个值开始截取后面的所有数据 也可以向里面添加第二个参数
jquery ajax请求
ajax是什么？ 一种可以不刷新页面 也可以与服务器后台进行数据通信的技术
要使用ajax 我们首先就要获得ajax对象 针对不同的浏览器 ajax对象是不同的 但是在jquery之中 他已经为我们预定义好了去获得ajax对象
ajax 能做什么?
有很多事情我们ajax都可以做
就比如说是我们的用户登录
我们需要去验证其用户名是否被注册 身份证号码是否被使用等等的信息
如何使用ajax?
ajax使用的技术有很多
比如你看我们qq空间的背景音乐 你有没有发现不管我们进入那个应用里面 背景音乐是否都没有停止或者是重新播放呢
我猜测这是就是ajax技术实现的 我们看到的页面变换其实是向服务器端发送请求 返回的是一个以html格式的数据
使用ajax
$.ajax({
url:"http://localhost/xxmdb/index.php/Home/Index/getAjax", //请求的页面
data:{user:$("#user").val(),id_Card:$("#id_Card").val()}, //所要向目标页面传递的数据 在请求会自动加载在请求的地址栏上
type:'get', //传递的方式 支持get post 一般我们使用的是get 如果数据量很大的话 建议使用post
datatype:'json', //对返回的数据进行的处理
context:$("#returnAjax"), //当这里选择了页面对象后 在后面的success与error中$(this)就将代表这个对象
success:function(data){ //当请求成功时 调用的函数 其中的data代表的是去接收返回的数据 由于我们前面
//定义的是对返回的数据进行json格式处理 那么这里的data接受的也应该是一个Json数据
alert('响应成功，您返回的数据时'+data.name);
},
error:function(){ //当请求失败的时候将会调用这个函数
alert('请求失败');
},
})
是不是感觉这个ajax请求很复杂 不怕也有简单的
$.get("http://localhost/luyou/index.php/Home/Index/getAjax",{name:$("#name")},function(){
//第一个参数 htpp--------------------- 代表着请求的目标地址
//第二个参数 向目标页面传递的参数
//第三个参数 当相应成功的时候会调用这个函数
//注意 该方法使用的是get的方式请求 传递大数据还是不要使用这个函数了
//且第二个参数 以及第三个参数是可选参数
});
$("#spanP").load("http://localhost/xxmdb/index.php/Home/Index/getAjax",{name:$("#user").text()},function(){})
//参数1 同上不解释
//参数2同上 不解释
//参数3 同上不解释
//函数注释 这个函数的作用是在目标对象之中载入改请求方法的结构 如qq空间音乐不听使用的技术 我发觉这个就是一个关键的技术
$("#spanp").ajaxStart(function(){})
//这个函数只有一个参数就是这个函数 用于当对象spanp 在加载之中 注意是还没有加载完成的时候调用这个函数
$("#spanp").ajaxComplete(function(){})
//这个也只有一个参数就是这个函数 用于用户ajax请求完成的时候就会调用这个函数
$("#spanp").ajaxSend(function(){})
//这个函数也只有一个参数也就是这个函数 用于发送ajax请求前将执行这个函数
$("#spanp").ajaxStop(function(){})
//这个函数也只有一个参数 也就是这个函数 用于ajax请求结束时调用这个函数
$.ajaxSetup({
url:'http://localhost',
type:'get',
})
//这个函数是设置默认请求的参数 是一个全局的ajax函数 有点像面向对象语言之中的类继承 所有ajax请求都会先读取该参数的内容
1147
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
