Jquery学习

一个简单的例子：

    
        
        
    
    
        

            
if you click Hello Wolrd, i will disapper.
        
    

备注：
1、代码中的函数：
1) hide：隐藏对象。
2) click：点击事件。

3. ready: 文档就绪函数(为了防止文档在完全加载（就绪）之前运行 jQuery 代码)。
   举例：
   a> 试图隐藏一个不存在的元素
   b> 获得未完全加载的图像的大小
   2、其它：
   1）jquery内库引入:
   // 引入Jquery内库，需要注意
   2)关键字：
   this:用于代表此函数对象。

---

Jquery特性：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX

---

选择器：

元素选择其：
$("p.intro") 选取所有 class="intro" 的 p元素。
$("p#demo") 选取所有 id="demo" 的 p元素。

属性选择器：
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

CSS选择器：
$("p").css("background-color","red");

总结：jquery中目前包含三种选择器

1.元素选择器。2.属性选择器。3.CSS选择器。

---

事件：

$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)  触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

show/hide函数使用：

语法：

// 1.speed用来设置隐藏或显示的速度（毫秒），callback：回调函数,默认不需要填写参数。
//2.toggle介于hide和show之间，如果目前对象是隐藏执行toggle函数可以显示对象，相反目前对象是显示执行toggle函数可以隐藏对象。
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);

代码：

    
    
        
            
            
        
        
            

                
if you click Hello Wolrd, i will disapper.
                hide
                show
                toggle
            
        
    

---

获取内容和属性：

1. 获取内容：
   1> text():设置或返回所选元素的文本内容。
   2> html()：设置或返回所选元素的内容（包括 HTML 标记）。
   3> val():设置或返回表单字段的值。

2.获取属性：
attr():用于获取属性值

代码：

    
        
        
    
    
        

            
这是一段操作的粗体字符串.
        

            
        

            
W3School.com.cn
        
        Text
        html
        val
        attr
    

---

修改内容和属性：

    
        
        
    
    
        

            
这是一段操作的粗体字符串.
        

            
这是一段操作的粗体字符串.
        

            
        

            
W3School.com
        
        Text
        html
        Text
        attr
    

添加内容和属性：

1、append() - 在被选元素的结尾插入内容。
2、prepend() - 在被选元素的开头插入内容。
3、after() - 在被选元素之后插入内容。
4、before() - 在被选元素之前插入内容。

    
        
        
    
    
        

            
if you click Hello Wolrd, i will disapper.
            append
            prepend
            password
            after
            before
        
    

---

删除内容和属性：

1、remove() - 删除被选元素（及其子元素）
2、empty() - 从被选元素中删除子元素

代码:

    
        
        
    
    
        

            

                    
This is some text in the div.
                    
This is a paragraph in the div.
                    
This is another paragraph in the div.
            

            

                    
This is some text in the div.
                    
This is a paragraph in the div.
                    
This is another paragraph in the div.
            
            remove
            empty
        
    

---

CSS操作：

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

代码：

    
        
        
        
    
    
        
标题1
        
标题2

        
这是一个段落
        
另一个段落
        

            重要的段落
        
        addCssStyle
        removeCssStyle
        toggleCssStyle
        getCssStyle
    

---

Ajax操作：