前端基础---jquery

标签：基础   python   前端   

1、jQuery简介

［1］   jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team。

［2］   jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!

［3］  它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器

［4］  jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

［5］  jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

2、jQuery对象

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法

$("#test").html()   

        意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法

        这段代码等同于用DOM实现代码： document.getElementById(" test").innerHTML;

        虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错

        约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.

var $variable = jQuery 对象

var variable = DOM 对象

$variable[0]：jquery对象转为dom对象     

$("#msg").html()          //jquery代码实现

$("#msg")[0].innerHTML      //DOM代码实现

3、寻找元素（选择器和筛选器）

【1】选择器

基本选择器：

$("*")          通配符（全部）

$("#id")         id选择器

$(".class")       class选择器

$("element")     标签选择器

$(".class,p,div")   组合选择器

层级选择器：

$(".outer div")       后代元素选择器

$(".outer>div")       子元素选择器

$(".outer+div")       毗邻元素选择器

$(".outer~div")      普通兄弟选择器

基本筛选器

$("li:first")        筛选第一个li标签

$(“li:last”)       筛选最后一个li标签

$("li:eq(2)")          筛选第3个li标签

$("li:even")         筛选排序为奇数的li标签（隔行筛选）

$("li:gt(1)")        筛选排序大于1的li标签

属性选择器

$(‘[id="div1"]‘)       

$(‘["alex="sb"][id]‘)

表单选择器：只适用于表单标签

$("[type=‘text‘]")     等同于$(":text")        

注意只适用于input标签  : $("input:checked")

【2】筛选器

过滤筛选器

$("li").eq(2)           筛选第2个li标签（推荐使用，方便传参）

$("li").first()          筛选第1个li标签

$("ulli").hasclass("test")     筛选class中含有test的ul、li标签

查找筛选器

查找子标签：        

$("div").children(".test")      //找儿子标签的test

$("div").find(".test")         //找所有后代标签中的test

向下查找兄弟标签：   

$(".test").next() $(".test").nextAll()     

$(".test").nextUntil()      //开区间查找，不含尾

向上查找兄弟标签：   

$("div").prev()      $("div").prevAll()      $("div").prevUntil()  

查找所有兄弟标签：   

$("div").siblings()               

查找父标签：

$(".test").parent()             

$(".test").parents()           找所有父标签，到html

$(".test").parentUntil(“.outer”)    查找父标签（不含outer）

4、文本操作

Jquery事件绑定

$(“.p1”).click(function (){

      alert(123)

})

练习：

html>
    
    
    
P1
P2
P3
p4

本文出自 “lyndon” 博客，请务必保留此出处http://lyndon.blog.51cto.com/11474010/1976510

前端基础---jquery

标签：基础   python   前端   

原文地址：http://lyndon.blog.51cto.com/11474010/1976510