JQuery 基础

最新推荐文章于 2022-11-15 10:08:40 发布
woi123
最新推荐文章于 2022-11-15 10:08:40 发布
阅读量130
点赞数
分类专栏： JAVA 学习文章标签： javascript ViewUI
本文链接：https://blog.csdn.net/woi123/article/details/84716061
版权
JAVA 学习专栏收录该内容
36 篇文章 0 订阅
订阅专栏
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。

jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>


一、Jquery语法结构
$(selector).action();
包含三个部分,$() 工厂函数，selector为选择器，action为执行方法。
工厂函数，$(）是Jquery()的缩写，作用是将DOM对象转化成jquery对象。jquery对象只能使用jquery中的方法，不能在使用DOM对象方法。比如
getElementById()等。

选择器
$("#userName")//获取DOM中id为userName的元素
$("div")//获取DOM中所有div的元素
$(".textbox")//获取DOM中class为textbox的元素。

方法
click()、mouseover()、mouseout()、addClass()
css("属性","属性值")
css方法是为元素设置给定的css样式，addClass是为元素添加新样式。


二、DOM对象与Jquery对象的互换

建议jquery变量前缀为$
juqery对象转化成DOM对象(不常见)。jquery对象是一个类似数组的对象，通过[index]或get(index)可以获取DOM对象。

var $txtName = $("txtName");
var txtName = $txtName[0];
或者
var txtName = $txtName.get(0);

DOM对象转换成jquery对象
var txtName = document.getElementById("txtName");
var $txtName = $(txtName);

三、
--页面加载完成后，执行事件
$(document).ready(function(){
  //执行代码
});
类似于
window.οnlοad=function(){
  //执行代码
};

两者区别:
jquery在所有DOM文档结构绘制完毕后即开始执行，可能与DOM元素无关联的内容(图片，视频，FLASH等)并没有加载完成。
同一个页面可以编写多个$(document).ready(function(){});
window.onload必须等待所有内容加载完毕后才执行，包括图片、视频等。此函数同一页面只有编写一个，不能编写多个。

四、基本选择器
标签选择器 $("input") 选取所有input元素
类选择器   $(.title) 选取所有class为title的元素
ID选择器   $("#title")  选取ID为title的元素
并集选择器 以逗号分隔 $("div,p,.title")选取所有div,p,及拥有class为title的元素.
交集选择器 elment.class或elment#id, 比如$(h2.title)选择所有class为title的h2元素。
全局选择器 *

五、层次选择器
后代选择器 $("#menu span") 选择#menu 下所有的span元素
子选择器 parent>child  示例 $("#menu>span") 选择#menu内的子元素span(被#menu标签阔起来的)
相邻元素选择器 prev+next 示例 $("h2+dl") 选择紧邻h2元素之后的同辈元素dl(h2标签之后相邻)
同辈元素选择器 prev~sibings, 示例 $("h2~dl") 选取h2元素之后所有的同辈元素dl(h2标签之后的同辈dl)

六、属性选择器
[attribute] 示例$("[href]") 选取含有href属性的元素
[attribute=value] 示例$("[href='#']") 选取含有href属性值等于#的元素
[attribute!=value] 示例$("[href!='#']") 选取含有href属性值不等于#的元素
[attribute^=value] 示例$("[href^='en']") 选取含有href属性值以en开头的元素
[attribute$=value] 示例$("[href$='.jpg']") 选取含有href属性值以.jpg结尾的元素
[attribute*=value] 示例$("[href*='txt']") 选取含有href属性值含txt的元素
[attribute*=value] 示例$("[href*='txt']") 选取含有href属性值含txt的元素

同时支持多个复合属性 $("li[id][title='新闻要点']") 选取含有id属性且title属性为新闻要点的<li>元素

七、条件过滤选择器
:first 选择第一个元素, 示例 $("li:first") 选取所有li元素中第一个li元素
:last 选择最后一个元素, 示例 $("li:last") 选取所有li元素中最后一个li元素
:not(selector) 选取去除所有与给定选择器匹配的元素, 示例 $("li:not(.three)") 选取所有li元素中class不是.three的元素
:even 选择偶数元素(index从0开始), 示例 $("li:even") 选取所有li元素中偶数li元素
:odd 选择奇数元素(index从0开始), 示例 $("li:odd") 选取所有li元素中奇数li元素
:eq(index) 选择元素索引等于index的元素, 示例 $("li:eq(1)") 选取所有li元素中索引等于1的元素
:gt(index) 选择索引大于index的元素(index从0开始), 示例 $("li:gt(1)") 选取所有li元素中索引大于1的元素，但不包含1
:lt(index) 选择索引小于index的元素(index从0开始), 示例 $("li:lt(1)") 选取所有li元素中索引小于1的元素，但不包括1.

:header 获取所有标题元素，如h1-h6.示例$(":header")选取网页中所有标题元素
:focus 获取当前获取焦点的元素，.示例$(":focus")选取当前获取焦点的元素

:visible 获取所有可见元素, 示例 $("p:visible").hidden()获取p标签中可见的标签
:hidden 选取所有隐藏元素,示例 $("p:hidden").hide()获取p标签中被隐藏的标签
show()和hide()都是jQuery中的方法，show方法是将隐藏的元素进行显示，hide是将显示的元素进行隐藏。
请注意，:hidden不仅获取包括display=none的元素，还包括<input type="hidden">和visibility:hidden的元素。

八、选择器注意事项。
1.选择器中含有特殊字符
 <div id="id#a">aa</div>
 <div id="id[2]">cc</div>

 按照普通的方式无法获取，只能采用\\转换
 $("#id\\#a")
 $("#id\\[2\\]")

2. 选择器中含有空格的注意事项。
<div class="test">
  <div style="display:none;">aa<div>
  <div style="display:none;">bb<div>
  <div style="display:none;">cc<div>
  <div class="test" style="display:none;">dd<div>
</div>
<div class="test" style="display:none;">ee</div>
<div class="test" style="display:none;">ff</div>

$(".test :hidden") 选取的aa,bb,cc,dd。因为是class为test的元素，后代中隐藏的元素。
$(".test:hidden") 选取的dd,ee,ff。因为是class为test的元素，且为隐藏的元素。

9、jquery中的事件与动画

javaScript中的事件处理：
DOM 对象. 事件名=函数;

jquery 
9.1 window事件 
ready(),示例 $(document).ready(function(){})
9.2 鼠标事件
click(): 单击鼠标
示例 $("input[name="btn"]").click(
	 function()
	{alert("the button is clicked")}
    );
mouseover():鼠标指针移过时
mouseout():鼠标指针移除时
$(document).ready(
 $("#nav li").mouseover(function(){ //当鼠标移过id为nav,后代中为li的元素
   $(this).addClass("heightlight");
  });
  $("#nav li").mouseout(function(){
   $(this).removeClass();
  })
)

9.3 键盘事件
keydown():按下按键时
keyup(): 按键被释放时
keypress():产生打印的字符时,在keyup事件之前可产生多个keypress事件。
$(document).ready({
 $("[type=password]").keyup(function(){
   $("#events").append("keyup");
 }).keydown(function(){
   $("#events").append("keydown");
 }).keypress(function(){
   $("#events").append("keypress");
 });
 $(document).keydown(function(event)){  //表示键盘事件作用于HTML DOM中的任意对象.
   if(event.keyCode=="13"){             //获取当前按键的键值(keyCode)，识别按下了哪个键。需注意方法中药定义一个参数,表示当前的事件对象
     alert("确认要提交么?");
   }
 });
});

9.4 表单事件
focus(): 获得焦点
blur(): 失去焦点
示例
$(document).ready(
  $("[name=member]").focus(function(){
    $(this).addClass("input_focus");
  })
  $("[name=member]").blur(function(){
    $(this).removeClass("input_focus");
  })
});

9.5 复合事件
hover(enter,leave): 当鼠标移动到元素上，出发enter函数，当鼠标移除这个事件时，会触发leave函数。
$(document).ready(function(){
  $("#myaccound").hover(function(){
    $("#menu_1").css("display","block");
  }),function(){
    $("#menu_1").css("display","none");
  }
});
toggle(fn1,fn2,...,fnN): 此方法用于模拟鼠标连续click事件。如果参数为空，则模拟show(),hide()事件
$(document).ready(function(){
  $("#body").toggle(function(){
    $(this).css("backgroundColor","red");  //表示当前对象
  },
  function(){
    $(this).css("backgroundColor","green");  //表示当前对象
  },
  function(){
    $(this).css("backgroundColor","blue");  //表示当前对象
  } )
});

$(document).ready(function(){
 $("input[name=more_btn]").click(function(){
   $("li:gt(5):not(:last)").toggle();  //代替show()方法和hide()方法
 })
})

9.6 动画事件
$(selector).show([speed],[callback])  显示
$(selector).hide([speed],[callback])  隐藏
$(selector).fadeIn([speed],[callback]) 淡入
$(selector).fadeout([speed],[callback]) 淡出
$(selector).slideUp([speed],[callback]) 元素从下到上直至隐藏
$(selector).slideDown([speed],[callback]) 元素从上往下延伸显示
speed: 规定元素从隐藏到完全可现的速度，默认为"0"，选项包括毫秒(1000)，slow，normal，fast.
callback: s函数执行完成后, 要执行的函数

$(document).ready(function(){
  $("#del").click(function(){
    $(".tipsbox").show("slow");
  });
  $("input[name=cancel]").click(function(){
    $(".tipsbox").hide("fast");
  });
})

10、使用jquery操作DOM

10.1 样式操作
css(name,value) 设置单个属性
css({name:value,name:value,name:value}) 同时设置多个属性
addClass(class1 class2 class3) 增加类样式 各类样式之间以空格隔开
removeClass(class1 class2 class3) 移除类样式各类样式之间以空格隔开
toggleClass(class) 模拟了addClass()与removeClass()实现样式切换
$(document).ready(function(){
  $("dl").mouseover(function(){
    $(this).css("border","0px")
  });
  $("dl").mouseout(function(){
    $(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"})
  });
})

10.2 内容操作
html([content])  等同于javaScript中的innerHTML，用于设置匹配元素的HTML内容或文本内容
text([content]) 用于设置所有匹配元素的文本内容
val([content]) 当参数为空时，返回第一个被选元素的value值。或者设置匹配元素的value值
$(document).ready(function(){
  var html_txt = $("div.left").html; //获取div标签中，class为left的标签
  $("input[type=button]").click(function(){
    $(div.left).html("div class='content'><h2>良好习惯从今天开始养成!</h2></div>")
  })
});

$(document).ready(function(){
  $("#searchtxt").focus(function(){  //当搜索框获得鼠标焦点
    var txt_value = $(this).val();
    if(txt_value =="空调"){
     $(this).val("")；		     //如果符合条件,则清空文本框内容
    }
  })
  $("#searchtxt").blur(function(){  //当搜索框获得鼠标焦点
    var txt_value = $(this).val();
    if(txt_value ==""){
     $(this).val("空调")；	     //如果符合条件,则清空文本框内容
    }
  })
});

  
11、jquery创建HTML元素


11.1 $(html)创建元素:

var $newNode = $("<li></li>"); //创建空的<li>元素节点
var $newNode1 = $("<li>死神</li>"); //创建含文本的<li>元素节点
var $newNode2 = $("<li title='标题为千与千寻'>千与千寻</li>"); //创建包含文本与属性的。属性以单引号包括

11.2 将元素插入

内部插入
向所选择的元素结尾插入内容:
$(A).append($B); 表示将B追加到A中。 $("ul").append($newNode1); 
$(A).appendTo($B); 表示将A追加到B中。 $newNode1.appendTo$("ul"); 

向所选择的元素开头插入内容:
$(A).prepend($B); 表示将B追加到A中。 $("ul").prepend($newNode1); 
$(A).prependTo($B); 表示将A追加到B中。 $newNode1.prependTo$("ul"); 

外部插入：
after : $(A).after(B);将B插入到A之后。
insertafter: $(A).insertAfer(B), 表示将A插入到B之后。
before: $(A).before(B),将B插入A之前.
insertBefore: $(A).insertBefore($B),将A插入到B之前。

11.3 删除节点：

$(selector).remove([expr]),expr为可选项，为筛选元素的jQuery表达式。
$(ul li:eq(1)).remove();

11.4 清空节点
$(selector).empty()
与remove的不同点，remove是删除整个节点，empty仅仅是删除了节点中的内容。

11.5 替换节点
$(selector).replaceWith($newNode1);
$($newNode1).replaceAll($(selector));
替换某个节点，两个语句的功能一样，只是写法不同。

11.6 克隆节点
$(selector).clone([includeEvents]);
参数includeEvents为可选值，为布尔ture或false。规定是否赋值元素的所有事件处理。
例如
$("ul li:eq(1)").clone(true).appendTo("ul");

11.7 属性的操作:
$(selector).attr([name]); //设置及获取某个属性值
$(selector).attr({[name1,value1],[name2,value2],[nameN,valueN]}); //设置属性值

11.8 //获取和设置单个属性的值
$($newNode4).attr("alt");
$("img").attr({width:"50",height:"100"});

11.9 删除属性
$(selector).removeAttr(name);
$($newNode2).removeAttr("title");

12.元素遍历
遍历子元素
$(selector).children();
遍历父元素
$(selector).parent();

同辈元素
获取紧邻之后的元素
$(selector).next();
获取紧邻之前的元素
$(selector).prev();
获取匹配元素前后的同辈元素
$(selector).siblings()

13. CSS-DOM操作
$(selector).css();
$(selector).height();
$(selector).width();

14.表单验证
表单有个onsubmit事件，提交表单时触发此事件，事件将根据返回结果决定是否提交表单到服务器.
$("myform").submit(function(){
  return check();
})
onblur: 失去焦点，当光标离开某个文本框时触发
onfocus：获得焦点，当光标进入某个文本框时触发
blur:从文本域中移开焦点
focus：在文本域中设置焦点，即获得鼠标光标
select：选取文本域中的内容，突出显示输入区域的内容.
示例
$(function(){
  $("$email").focus(clearText); //当点击文本框时，触发clearText方法.
  $("$email").blur(checkEmail);//当鼠标指针离开时, 触发checkEmail方法. 
  $("myform").submit(function(){
  return check();
  });
});

15.正则表达式

1)普通方式
var reg = /表达式/附加参数(也可以不加参数)
附加参数：
g:代表可以进行全局匹配(若未设置,则只会匹配第一个,设置后匹配全局)
i:代表不区分大小写匹配
m:代表进行多行匹配

RegExp对象的属性
global: RegExp对象是否具有标志g
ignoreCase: RegExp对象是否具有标志i
multiline: RegExp对象是否具有标志m

2)构造方式
var reg = new RegExp("表达式","附加参数");
两者区别，普通方式必须是一个常量字符串，而构造函数中可以是变量
正则表达式方法
exec：检索字符中是正则表达式的匹配，返回找到的值，并确定其位置
test：检索字符串中指定的值，返回true或false

语法：正则表达式对象实例.test(字符串);
示例
var Str = "my cat";
var reg = /cat/
var result = reg.test(str);
js除了支持RegExp对象的正则表达式方法外，还支持String对象的正则表达式方法.
字符串对象.match(RegExp对象或字符串) 找到一个或多个正则表达式的匹配的值,并返回.
字符串对象.search() 检索与正则表达式相匹配的值
字符串对象.replace(RegExp对象或字符串,"替换的字符串") : 替换与正则表达式匹配的字符串
字符串对象.split(RegExp对象或字符串,n)：将字符串分割为字符串组(n为限制输出数组个数)
正则表达式常用符合：
/.../ 代表一个模式的开始和结束
∧  代表字符串的开始
$  匹配字符串的结束
\s  任何空白字符串
\S  任何非空白字符串
\d  匹配一个数字字符,等于[0-9]
\D  除了数字之外的任何字符,
\w  匹配一个数字,字母,下划线
\W  任何非单字字符
.  除了换行符之外的任何字符
{n}  匹配前一项N次
{n,}  匹配前一项N次, 或者多次
{n,m}  匹配前一项至少N次, 但是不能超过M次
*  匹配前一项0次或多次, 等价于{0,}
+  匹配前一项1次或多次, 等价于{1,}
?  匹配前一项0次或1次, 等价于{0,1}
转义字符,使用反斜杠\来进行字符转义.
表单选择器：
:input: 匹配所有input,textarea,select和button  $(#myform :input)
:text:   匹配单行文本
:password 
:radio
:checkbox 
:submit
:image
:file
:button: 
表单过滤器
:enabled  $(#userform :enabled) 匹配form内部可用元素
:disabled :
:checked : $(#userform :checked) 匹配form中选中元素(单选,复选,select)
:selected ： (匹配选中的option)
woi123
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery 基础

jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。&lt;head&gt;&lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;&lt;/he...
复制链接

扫一扫