jQuery技术

JQuery学习笔记 - 小孩不笨

字号+ 作者:H5之家 来源:H5之家 2016-01-19 19:04 我要评论( )

JQery是对javascript的封转库 也就是调用JQuery的一句函数 JQuery的扩展插件非常多 JQuery的优点:尺寸

JQery是对javascript的封转库
也就是调用JQuery的一句函数JQuery
JQuery的扩展插件非常多

JQuery的优点:尺寸小、使用简便、链式编程、隐式迭代(自动对于多个元素进行迭代方法调用)、屏蔽游览器差异跨浏览器兼容性好、插件丰富、开源、免费


vsdoc是vs2008sp1以后增加的一个技术,将js技术未见对应的vsdoc(相当于一个js库提供的数据库)放到js
一起,就会有这个第三方js的自动提示的功能

onload只能注册一次,后注册的取代前注册的,而
ready则可以多次注册都会被执行

$(document).ready(function (){alert("你好!")})
ready简写方式

$(function(){alert("你好")});

ready则是dom元素创建完毕被触发,这样可以提高网页的响应速度
早jquery中可以使用$(window).load那种事件调用的时机

$其实是一个函数


jquery提供的函数:
$.map(array,fn)对数组array中每一个元素调用fn函数逐个进行处理,fn函数将处理返回,最后得到一个新数组
例如:
 var array = [3, 5, 8];
        var array2 = $.map(array, function (item) {
            return item * 2;
        })
$.

$.map不能处理Dictionary风格的数组

$.each(array,fn)对数组array每个元素进行遍历,相当于dom中屈指的for循环
$.each(arr, function () {
            alert(this);//表示当前遍历到的value,dictionary也一样
        })

普通数组用以上表达式


****jquery对象、dom对象

jquery对象就是通过jquery包装dom对象后产生的对象


 alert($(div1).html());//取到div1中innerHTML的值
jquery对象只能调用jquery对象封装的方法,不能调用dom对象的方法,dom对象也不能调用jquery对象的方法,所以alert($(div1).innerHTML)是错的,因为innerHtml是dom对象的属性

array是js语言本身的对象,不是dom对象,因此不需要转换为jquery对象才能用

将dom转换为dom对象,$(dom对象);当调用jquery没有封装的方法的时候必须用dom对象,转换方法:
var domobj=jqobj[0] 或者var domobj=iqobj.get(0)


jquery修改样式:$("#div1").css("background","red");
获得样式$("#div1").css("background");


$("#div1").val(new date())赋值//有参数就是赋值
$("#div1").val()取值

$("#div1").html("")赋值//相当于dom中的innerHTML
$("#div1").html()取值

$("#div1").text("")赋值//相当于dom中的innerText
$("#div1").text()取值

****jquery选择器
jquery选择器用于查找满足条件的元素,比如可以用
$("#控件id")来根据控件id获得控件的jquery对象

可以根据控件的类名称,比如$("div").click()

css选择器
<style type="text/css">
.test{background-color:red;}
</style>

 $(".test").css("background", "blue");

多条件选择器:$("p,div,span.test"),同时选择p标签、div标签和拥有test样式的span标签的元素
注意选择器表达式中的空格不能多不能少

层次选择器
$("div li")获取div下的所有li元素(后代、子代、子的子)
$("div > li")获取div下的直接li子元素

$(".test + div")获取样式名为test之后的第一个div元素(不常用)

$(".test ~ div")获取样式名为test之后的所有div元素(不常用)

***jquery的迭代
就算写错id名称也不会报错
可以用以下方式判断:
if($("div1".length<=0))
{
   alert("该控件没有找到!");
}

****节点遍历;
next()方法用于获取节点之后的挨着的第一个同辈元素
nextAll()方法用于获取节点之后的方法用于获取所有元素nextAll("div")可以过滤
siblings方法用于获取所有同辈元素


*****链式编程
jquery是javascript的一个库,所以基本都为方法,所以可以一直点下去,

******基本过滤选择器

:first选取第一个元素。$("div:first")选取第一个div

:last选取第一个元素。$("div:last")选取最后一个div

:not(选择器)选取不满足“选择器”条件的元素i
$("input:not(.test)")选取样式名不是test的<input>

:even、:odd 选取索引是奇数、偶然的元素:
$("input:even")选取索引是奇数的<input>
(多用于隔行变色)

:eq(索引序号)、:gt(索引序号)、:lt(索引序号)选取索引序号等于、大于、小于索引序号的元素,比如$("input:lt(5)")选取索引小于5的input

***相对选择
只要在$()指定第二个参数,第二个参数为相对的元素。
  $("ul", $(this).css("background", "red"));

(责任编辑:hybbj)

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Jquery学习,一道笔试题:关于表格【最近记】

    Jquery学习,一道笔试题:关于表格【最近记】

    2016-01-18 11:02

  • jquery学习。。

    jquery学习。。

    2016-01-16 10:50

  • JQuery学习(一)

    JQuery学习(一)

    2016-01-16 09:18

  • jQuery学习之操作元素属性和特性

    jQuery学习之操作元素属性和特性

    2016-01-16 09:17

网友点评
>