javaweb-jquery

1.定义：

jQuery是一个快速、简洁的JavaScript框架，一个优秀的JavaScript代码库。

2.作用：

jQuery设计的宗旨是“write Less，Do More”。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。

简单来说：对常用的方法和对象进行封装,方便我们使用.

3.Jquery和HTML整合

注意：jquery是单独的js文件

通过script标签的src属性导入即可。

我这里用的是1.11.3.min.js版本，

eg：在Hbuider中：

       在eclipse中：

8.jquery中效果:

     1.隐藏或展示
        show(毫秒数) hide(毫秒数)
     2.滑入或滑出
        slideDown(毫秒数):向下滑入
        slideUp(毫秒数):向上滑出
     3 .淡入或淡出
        fadeIn(int):淡入
        fadeOut(int):淡出

//没有引入css忽略

 

9.应用实例-弹出广告

注意：其中的function是函数，不管是js还是jquery都是这样写的，而且方法是可以写多个的

不要和jquery中的$(function(){...})加载页面的 方式混淆

10.Jquery中的选择器

选择器总结:
   1. 基本选择器★
        $("#id值")  $(".class值")  $("标签名")  
        

eg:
$(function(){//加载页面的
 		 //  
 		 $("#btn1").click(function(){//选择器型的#+id的值，派发事件
 		 	$("#one").css("background-color","#ff0");//key --value的形式
 		 });
需要注意的是表达样式这里可以用。css的形式js中的是style

        了解:$("*")
        理解:获取多个选择器 用逗号隔开
            $("#id值,.class值")
    2.层次选择器 ★
        a b:a的所有b后代
        a>b:a的所有b孩子
        a+b:a的下一个兄弟(大弟弟)
        a~b:a的所有弟弟

eg:
$(function(){
// 		
		$("#btn1").click(function(){
			$("body div").css("background-color","#f0f");
//这代表的是所有的div
	});

   3.  基本过滤选择器:★
        :frist 第一个
        :last 最后一个
        :odd  索引奇数
        :even 索引偶数
        :eq(index) 指定索引
        :gt(index) >
        :lt(index) <

eg:
$(function(){
// 		
		$("#btn1").click(function(){
			$("div:first").css("background-color","#f0f");//第一个div
		});

    4.内容过滤:
        :has("选择器"):包含指定选择器的元素

eg：

    5.可见过滤:
        :hidden   在页面不展示元素 一般指 input type="hidden" 和 样式中display:none
        :visible 

    6.属性过滤器:★
        [属性名]
        [属性名="值"]

     7.表单过滤:
        :input  所有的表单子标签  input select textarea button
        //input是form下的子标签，所以先过滤掉form    比如#+form1是第一个的表单的id选择器

 

10应用实例-隔行换色（jquery实现）

11.属性和css操作总结:

对属性的操作:

attr():设置或者获取元素的属性
            方式1:获取
                attr("属性名称")

$function()
{
 //给username添加title属性
 var $username =$("[name="username"]")
 $username.attr("title",姓名)；
}

            方式2:设置一个属性
                attr("属性名称","值");
            方式3:设置多个属性  json
                attr({
                    "属性1":"值1",
                    "属性2":"值2"
                })
        removeAttr("属性名称"):移除指定属性

addClass("指定的样式值"); 相当于 attr("class","指定的样式值");

对css操作:操作元素的style属性&和上类似
        css():获取或者设置css样式
            方式1:获取    
                css("属性名")

 

//给div添加边框样式
var $div=$("div");
$div.css("border","1px, solid, red)

            方式2:设置一个属性
                css("属性名","值")
            方式3:设置多个
                css({
                    "属性1":"值1",
                    "属性2":"值2"
                });
    获取元素的尺寸:
        width()
        height()

12.应用实例-全选或全不选（jquery）一句话搞定

12应用实例-省市联动（jquery）

补充：

1.遍历数组
        数组.each(function(){});
        $.each(遍历数组,function(){});
        
    注意:
        each的function中可以加两个参数 index和dom
            index是当前遍历的索引值
            dom指代的是当前遍历的dom对象(开发中一般使用this即可)
    //////////////////////////////
    2.设置或者获取value属性
        jquery对象.val():获取
        jquery对象.val("...."):设置
    /////////////////////////////////////////
  3. 设置获取获取标签体的内容 
        html()
        text()
        
        xxxxx():获取标签体的内容
        xxxxx("....."):设置标签体的内容
            
            设置的区别:
                html:会把字符串解析
                text:只做为普通的字符串
            获取的区别:
                html:获取的html源码
                text:获取只是页面展示的内容

4.文档操作:
    内部插入
        a.append(c):将c插入到a的内部(标签体)后面
        a.prepend(c):将c插入到a的内部的前面

补充：表单对象属性过滤选择器
        :enabled   可用的
        :disabled  不可用
        :checked     选中的(针对于单选框和复选框的)
        :selected     选中的(针对于下拉选)