jQuery基础

最近在做项目的过程中,前端的部分做起来很吃力,很大一部分原因就是jQuery部分知识不够熟练,会的太少

所以我决定从头再学一遍。。。

这一篇随笔先用于写jQuery的基础,我会在下一篇写jQuery'的应用,比如调用ajax,遍历表格等等

首先,什么是jQuery?[・_・?]

jQuery 是一个javascript库,jQuery极大地简化了javascript编程

 

要使用jQuery,我们必须要向页面引用jQuery库,一般写法:

1 <script type= "text/javascript" src="你要引的jquery文件名"><script>
2 <script>
3      jQuery初始化方法{
4         你要写的jQuery代码
5     });
6 </script>    

 

jQuery有三种初始化方法:

 1 第一种:
 2 $(document).ready(function(){
 3     xxxxxxxxxxxxxxxxxx;
 4 });
 5 
 6 第二种:
 7 $(function(){
 8     xxxxxxxxxxxxxxxxxx;
 9 });
10 
11 第三种:
12 jQuery(function($){
13     xxxxxxxxxxxxxxxxxx;
14 });

这三种方法效果是一样的,选任意一种使用都可以,但是千万不能忘记写。

 

jQuery选择器

jQuery代码简便的很大原因就是可以直接选中你想要操作的对象,太方便了有没有!φ(>ω<*) 

jQuery的选择器有三种,元素选择器、属性选择器和CSS选择器

下面举几个栗子:

元素选择器栗子:

 1 $("p")  选取所有<p>标签元素
 2 $("p.skr")  选取所有class为"skr"的<p>标签元素
 3 $("p#skrskr")  选取所有id为"skrskr"<p>标签元素
 4 $("p:first") 第一个<p>标签元素
 5 $("p:last") 最后一个<p>标签元素
 6 $("tr:even") 所有奇数<tr>元素
 7 $("tr:odd")所有偶数<tr>元素
 8 
 9 
10 $(this) 选中当前元素
11 $(ul li:first) 每个<ul> 第一个<li>元素
12 $("[href$='.jpg']") 所有以jsp结尾的href属性

属性选择器栗子:

1 $("[href]") 选取所有带href属性的元素
2 $("[href = 'xxx']") 选取所有带href属性且值为xxx的元素
3 $("[href != 'xxx']") 选取所有带href属性且值不为xxx的元素
4 $("[href$='.jpg']") 选取所有带href值以jsp结尾的元素

CSS选择器栗子:

$("p").css("background-color","red");

 

jQuery事件

既然已经选中了这些标签,接下来当然就是对他们搞事情啦~

以点击按钮事件为例:

 1 <script type="text/javascript" src = "jquery.js"></script>
 2 <script>
 3     $(document).ready(function(){
 4         $("button").click(function(){
 5             alert("啊啊啊啊啊啊啊啊啊啊啊啊!")
 6         });
 7     });
 8 </script>  
 9 
10 <button>xxx</button>
11           

在实际开发中,由于有很多重复的标签,所以用class或者id多一点(因为我们可以给指定标签赋奇怪的名字以免重复)

 

接下来列举一些基础的事件触发方法:

 1 change() 触发、或将函数绑定到指定元素的onchange 事件(改变)
 2 click() 触发、或将函数绑定到指定元素的cllick 事件(点击)
 3 dblclick() 触发、或将函数绑定到指定元素的declick 事件(双击)
 4 keydown()按下按键
 5 keyup()按钮被松开时
 6 该事件适用于任何带有url的元素(改变事件)
 7 mousedown()按下鼠标按钮时
 8 mouseenter()当鼠标指针进入(穿过)元素时,改变
 9 mouseleave()当鼠标指针离开元素时,改变
10 mousemove()获得鼠标指针在页面中位置
11 mouseout()当鼠标从元素上移开时,改变
12 mouseover()当鼠标指针位于元素上方时,改变
13 mouseup()当松开鼠标按钮时
14 submit()提交表单
15 toggle()方法将切换所有元素
16 unload()当用户点击链接离开本页时,只应用于window对象

 其中 toggle() 和 slideToggle都可以实现一个元素的隐藏/实现,用法相同。

 但是区别是:toggle:动态效果为从右至左。横向动作。

      slideToggle:动态效果从下至上。竖向动作。

 

除此之外还有 bind() 方法,bind() 方法为被选中元素添加一个或者多个事件处理程序,并规定事件发生时运行的函数

用法:$(selector).bind( event ,data,function );

栗子:

 1 //先定义一个按钮和一个p
 2 <p>xxxxxxxxxxxx</p>
 3 <button>点我</button>
 4 
 5 //绑定一个方法:
 6 $("button").bind("click",function(){
 7    $("p").slideToggle(); 
 8 });
 9 
10 //绑定多个方法:
11 $("button").bind({
12     click : function(){$("p").slideToggle();},
13     mouseover : function(){$("p").css();},
14     dblclick : function(){$("p").attr();},
15     ...................
16 });

 

jQuery效果:

主要是hide(),show(),toggle().下面还是举几个栗子

 1 假装有个<img id="hide">
 2 下面用于控制这个图片的显示或是淡出
 3 $("#hide").hide()
 4 $("#hide").show()
 5 我们也可以向 hide() 和 show()添加参数,来控制它如何显示,淡出:
 6 $(selector).hide(speed,callback);
 7 $(selector).show(speed,callback);
 8 可选的speed参数规定隐藏/显示的速度,可以取:"slow","fast"或毫秒
 9 可选的callback参数是隐藏或显示完成后所执行的函数名称
10 
11 toggle():
12 toggle()方法来切换hide()和show()方法(状态)
13 显示被隐藏元素,并隐藏已经显示的元素
14 $("button").click(function(){
15                 $("p").toggle();
16             });
17 
18 语法:
19 $(selector).toggle(speed,callback);
20 可选的speed参数规定隐藏/显示的速度,可以取"slow","fast"或毫秒
21 可选的callback参数是toggle()方法完成后所执行的函数名称
22 
23 还有fadeIn(),fadeOut()让元素逐渐消失,用法与上面类似

 

jQuery HTML

(1)获取内容和属性:

text() --> 设置或返回所选元素文本内容

html() --> 设置或返回所选元素内容(包括html标记)

val() --> 设置或返回所选元素的值

栗子:

1 $("#btn1").click(function(){
2    alert("text:"+$("#text").text());
3  });
4 $("#btn2").click(function(){
5    alert("html:"+$("#text").html());
6  });
7 $("#btn1").click(function(){
8    alert("value:"+$("#text").val());
9  });

在开发时,时常会用到选中元素的val()进行判断,在进行下一步操作

(2)获取属性 - attr()

attr()用于获取标签的属性值或是给标签的属性赋值

栗子:

$("#btn1").click(function(){
     alert("text:"+$("#text").text(“aaaa”));
 });
$("#btn2").click(function(){
     alert("html:"+$("#text").html(“aaaa”));
 });
$("#btn1").click(function(){
     alert("value:"+$("#text").val(“aaaa”));
 });
$("#btn1").click(function(){
     $("#text").attr("id","xxx")); 
    //使用attr给属性赋值时要考虑标签是否有想要添加的属性(html5中很多属性失效了,造成报错)
 });

(3)添加元素

append() - 在被选元素的结尾插入内容
$("p").append("aaaaaaaaaa");

prepend() - 在被选元素开头插入内容
$("p").prepend("aaaaaaaaaa");

after() - 在被选元素之后插入内容
$("img").after("aaaaaaaa");

before() - 在被选元素之后插入内容
$("img").before("aaaaaaaa");

after和before较为常用,所以只有这两个的栗子
1 function afterText(){
2        var txt1 = "<p>Text</p>";   以html创建新元素
3        var txt2 = $("<p></p>").text("Text.");    以jQuery创建新元素
4        var txt3 = document.createElement("p");    以DOM创建新元素
5        txt3.innerHTML"Text.";
6        $("p").after(txt1,txt2,txt3);    p之后插入新元素
7 }

 

 jQuery还支持链式调用,写法类似lamada表达式:

1 $('a').attr('target', '_blank')
2       .append(' <i class="uk-icon-external-link"></i>')
3       .click(function () {});

 

除此之外还有each()方法用于循环,$.ajax{}用于异步传值,select动态选取等等
这部分真的是一言难尽,所以就决定写在下一篇随笔了!
以上就是个人总结的jQuery基础部分,希望能带给你帮助~



 

posted @ 2018-09-26 01:03 儒雅随和的小郭 阅读(...) 评论(...) 编辑 收藏