第2课:JQuery语法实例

本节开始讲一些jquery的基础操作,以后逐步的深入,循序渐进

在学习jquery过程中,经常会看到
$(document).ready(function(){
  //在这里写你的代码
});在DOM加载完成时运行的代码
可以简写成
jQuery(function(){
});
表示在DOM元素加载完成之后运行对应的JS代码,防止一些JS依赖元素存在,提前运行出错

而(function($) {})(jQuery)是什么意思呢?
(function(){
})(jQuery);
其实际上是执行()(para)匿名方法,只不过是传递了jQuery对象
相当于
function godeye($){}
godeye(jQuery)
是初始化jquery对象的惯用方法,通俗点说就是在页面加载完成后执行你需要的代码

1.对于html元素,最基本的操作是如何定位选择某个元素,进而进行操作
在jquery中,选择某个元素用
$('#id') 或者$('.class')  两者的区别在于#id是用唯一id来定位 .class是用class来定位
id是html元素设置的id class是html元素设置的CSS样式class

当然还有一种方式是用name来定位,但是用的不是很多
方法:
$("input[name='value']") 定位name为value的输入框

2.定位之后就是操作,操作包括很多种,这里列出来常见的几种
基础语法是:$(元素).action()  其中的action表示操作方式

$(this).hide()
隐藏当前的 HTML元素。
$("id").hide()
隐藏 id="id"的元素。
$("p").hide()
隐藏所有<p>元素。
$(".class").hide()
隐藏所有 class="class" 的元素。
针对隐藏,相反的操作就是显示
$("id").show()
表示显示id="id"的html元素,其他类似

3.复杂定位之选择器
不是所有的html元素都有id的或者class的,还有一些更复杂的场景,我们不能直接选择元素,就要通过JQuery的过滤选择器,逐步定位
$("p.intro") 选取所有 class="intro" 的 <p> 元素
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
$("[href]") 选取所有带有 href 属性的元素
$("[href$='.png']") 选取所有href值以".png"结尾的元素
$(this) 当前 HTML 元素
$("p") 	所有<p>元素
$("p.intro") 	所有 class="intro" 的 <p> 元素
$(".intro") 	所有 class="intro" 的元素
$("#intro") 	id="intro" 的元素
$("ul li:first") 	每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']") 	所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head") 	id="intro" 的 <div>元素中的所有class="head"的元素

如果多个元素执行同一个操作,可以直接用逗号分隔
例如:$('#id1, #id2').action()

$("p").parent()  $("p").children()可以对元素的父元素 子元素进行定位操作
.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈)。参数可选,添加参数表示通过选择器进行过滤,对元素进行筛选。
.find(selector)方法是返回匹配元素集合中每个元素的后代。参数是必选的,可以为选择器、jquery对象可元素来对元素进行筛选。
.find() 与 .children() 方法类似,不同的是后者仅沿着 DOM 树向下遍历单一层级,find是遍历当前元素集合中每个元素的后代。只要符合,不管是儿子辈,孙子辈都可以

4.JQuery数组操作
这里用一个例子来说明
var pids = [];//定义一个数组
var param = $("input[name='param[]']");
param.each(function(i) {//对数组进行遍历操作
    if ($(this).val()) {
	pids[i] = $(this).val();//这里也可以用pids.push($(this).val())来把值加入数组
    }
});
//得到pids数组之后,如果还想进行进一步的操作,比如把数组元素用逗号分隔,变成一个字符串,可以用下面语句
var idstr = pids.join(',');

each处理二维数组  
var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]      
$.each(arr, function(i, item){      
    alert(i);   
    alert(item);      
});

还有一些有用的函数
$.unique(array) 删除数组中重复元素
$.merge(first, second)合并两个数组
$.unique(array) 删除数组中重复元素

5.常用HTML元素操作
在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?
对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法
像checkbox,radio和select这样的元素,选中属性对应"checked"和"selected",这些也属于固有属性,因此需要使用prop方法去操作才能获得正确的结果。
$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

获取选中元素的值
var info = $(":checkbox[name='tag_name[]']:checked");
var class_id = $("input[name='class']:checked").val();

判断checkbox是否选中
if($("#remember").is(':checked')) {
    remember = 1;
}
checkbox选中个数
$("input[name='ChooseOne']:checked").length

jquery html字符转义
var escapeStr = $("<div></div>").text(oriStr).html();
var unescapeStr = $("<div></div>").html(escapeStr).text();
原理不复杂,text赋值会将参数当成原始字符串,因此会自动html转义,去除html即可 html赋值会将参数当成html字符串,因此会自动html反转义,去其中的text即可

jquery 判断一个元素是否存在
使用jQuery则比较简单,只需判断此元素的长度是否为0,如果为0则此元素不存在,代码如下:
if ($("#div").length > 0){ 
    // 找到对应id=div的元素,然后执行此块代码 
} 

移除某个元素
$("#class_name, #addclass").remove();

设置select默认选中第一个option
$("#allclass").get(0).selectedIndex=0;

打赏  如对你有帮助,请我喝杯咖啡吧!