我看jquery

来源：互联网发布：网络电视机顶合编辑：程序博客网时间：2024/06/05 04:51

jqurey是轻量级的javascript的库；兼容css和各种浏览器，完善的事件机制，丰富的ui，出色的ajax封装；

链式操作，回调函数，迭代器，延迟对象，队列等等，比较抽象；

引入jquery.js 压缩版比开发板体积小，1.x 与2.x与3.x 2.x不支持ie6,7,8；

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.111/jquery.js"></script>

</head>
<body>
<script type="text/javascript">alert($) </script>
</body>

$(document).ready的作用是等页面文档（document）的所有节点加载完之后在执行；div可以设置样式

基本语法结构：$(selector).action() ,selector是选择器，包括元素选择器如$（“p”）获取制定元素标签名的所有节点，原生方法是getElementsByTagName()获得一个合集，然后通过循环方式对每个元素修改样式

,$('p#username') id 选择器：$("#id") 页面的id一般是唯一的，如果id有重复的，则选择集合中的第一个id 的dom元素；

$(".class")类选择器通过类名获取节点,当class有相同的多个时，使用此选择器可以得到一个合集，然后在调用.css方法渲染，css方法带了一个隐式的循环方法；原生的方法是getElementsByClassName方法获取，然后通过循环给合集中的每个元素修改样式；

$("*")全选择器获取页面所有元素;

原生的方法会考虑到浏览器的兼容问题，jquery的出现有效地解决此问题；

层级选择器

$("parent>child")子选择器获取指定父元素的直接的子元素

$("ancestor decendant")后代选择器选择指定祖先元素的所有后代元素；

$("pre+next")相邻兄弟选择器选择紧接在prev元素后的next元素；

$("prev~sibliings")一般兄弟选择器选择匹配所有prev元素的兄弟元素，具有共同的父元素，匹配过滤siblings元素就是兄弟元素节点是相同的。

基本筛选选择器:$(":first")

$(":last") $(":even") $(":odd")$(":header") $(":root") $(":animated") $(":not(selector)")$(":"lt(index"))$(":gt(index)") $(":eq(index)") $(":language(language)")

注jqurey合集是从0开始的索引，gt是段落筛选，从指定的下一个元素开始gt（1）索引从2开始

内容筛选选择器：$(":parent”) $(":empty") $(":has(selector)")$("contain(text)")

可见性筛选选择器：$(":visible") $(":hidden")

属性筛选选择器：$("[attribute='value']")

子元素选择器：$(":first-child") $(":last-child")$(":nth-child(index)")$(":only-child") $(:nth-last-child(index)")index从1开始；

表单元素选择器：大概10个$(":input")$(":text")$(“:password”)$(":button")$(":reset")$(":radio")$(“:checkbox”)$(":submit")$(":image")$(":file")

表单对象属性筛选选择器：$(":enabled")$(":disabled") $(":checked")$(":selected")

特殊选择器：this当前的上下文对象，调用的是html对象的方法和属性，$(this)是jquery的上下文对象，调用其方法和属性；传入当前元素对象的引用

以上是常用的选择器，下面是属性与样式：

attr设置和获取属性的值4个方法，设置key value ，value可以是属性值，也可以是函数值；获取key得到对应的value 设置keys，removeAttr删除属性的值key；

.html().text(),读取、输出或者说是修改元素和文本的值；

.va()处理表单元素的值；设置和获取值，获取select元素选中的值；

.addClass（）增加样式；为指定的元素增加一个或多个样式名，用空格隔开；

.removeClass()删除样式；

.toggleClass（）互斥逻辑，如果有删除，无增加；

.css()设置css属性或者获取元素样式值；

数据的存储：jJquery.data(element,key,value) Jquery.data(element,key)静态接口，实例接口: .data（key,value） .data(key)

一般是$.data(key, value).......... var element=$(this) ; element.data(key,value)

基本上jquery的样式内容；

head 中： $(document).ready(function(){

$("div").html("jquery is good for learner!");

})

body中

jquery对象和dom对象的相同处都能操作dom，不同在于，获得对象的方式不同，var p=document.getElementById('my').获的dom元素就是一个dom对象，它是一个单独的dom元素，在调用它的属性：innerHTML和style属性-js的原声语法；课

var $p=$('#my');获得query对象$p，是类数组对象，包含了dom对象的信息，封装了dom对象的很多方法，更能关注业务逻辑的开发，调用jquery的api 然后调用其方法html（）方法，css（）方法；my是p元素的id

可以用两种方法获得jqurey对象中的dom对象，var p=$p.get(0) $p[0]

常用的是dom对象转换jquery对象：var p=document.getElementsByTagName('p')，获取dom对象集； var $p=$('p'),然后调用其方法var $first=$p.first();获取数组中的第一个jqueay对象

阅读全文

0 0