欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Jquery学习笔记,全面实用,需要的可以留下邮箱,给大家发原稿文档

程序员文章站 2022-05-18 11:02:32
JQuery 第一章:Jquery概念介绍 1.1 Jquery介绍 (1)并不是一门新语言。将常用的、复杂的操作进行函数化封装,直接调用,大大降低了使用JavaScript的难度,改变了使用JavaScript的习惯。 (2)常用插件网站:www.jq22.com (3)导入jquery插件两种方 ......

jquery

Jquery学习笔记,全面实用,需要的可以留下邮箱,给大家发原稿文档

 

第一章:jquery概念介绍

1.1 jquery介绍

(1)并不是一门新语言。将常用的、复杂的操作进行函数化封装,直接调用,大大降低了使用javascript的难度,改变了使用javascript的习惯。

(2)常用插件网站:

(3)导入jquery插件两种方法:

1、网上插件: <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

2、官网下载,本地导入: <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>

1.2 jquery和jscript对比

js的缺点:(1)选择器功能弱;

    (2)dom操作繁琐

    (3)浏览器兼容性不好

    (4)动画功能弱

jq的优点:(1)有强大的选择器

    (2)dom操作简便

    (3)浏览器兼容性好

    (4)有丰富的插件支持,强大的动画效果

第二章:jq的引入及js互相转换

(1)获取对象区别:

var varjs = document.getelementbyid("uname");

var varjq = $("#uname");

(2)js转换为jq

var varjq = $(varjs);

(3)jq转换为js

方法一:var varjs = varjq.get(0);

方法二:var varjs2 = varjq[0];

注:jq所有对象均为数组类型

val():返回或设置被选中元素的值,即value的值

第三章:javaquery常用选择器

3.1 五种基本选择器

(1)标签选择器

例如:$("div").css("color","red");

(2)id选择器

例如:$("#unameid")

(3)类选择器

例如:$(".classname")

(4)通配选择器

例如:$("*")

(5)组合选择器

例如:$("#unameid,h3,.myclass");

3.2 四种层级选择器

(1)后代选择器

例如:$("#ul01 li").css("font-size","30px");

           $("#ul01 li").css("color","blue");

(2)父子选择器

例如:$("#div03 > h3")

(3)后面第一个兄弟元素

注:必须紧挨当前元素,中间不能 插入其他标签

例如:$("#div03 + div").css("background-color","blue");

(4)后面所有兄弟元素

例如:$("#div03 ~ div").css("background-color","red");

3.3 七种属性选择器

(1)元素名[attribute]:包含一个属性

例如:$("div[id]").css("background-color","red");

(2)元素名[attribute][attribute]:同时包含两个属性

例如:$("div[id][class]").css("background-color","gray");

(3)元素名[属性=value]:一个属性,且属性名=xx值

例如:$("div[class=myclass]").css("color","gold");

(4)元素名[属性!=value]:一个属性,且属性不等于value值

例如:$("div[class!=myclass]").css("background-color","aqua");

(5)元素名[属性^=value]:一个属性,以xx开头

例如:$("div[class^=my]").css("background-color","black");

(6)元素名[属性$=value]:一个属性,以xx结尾

例如:$("div[class$=2]").css("background-color","black");

(7)元素名[属性*=value]:包含xx值

例如:$("div[class*=c]").css("background-color","black");

3.4 九种位置选择器

(1)匹配找到的第一个元素:first

例如:$("tr:first")

(2)匹配找到的最后一个元素:last

例如:$("tr:last")

(3)选择除了xx之外的选择器:not

例如: $("div:not(#div02)")

(4)匹配所有索引值为偶数的元素:even

注:从0开始计数

例如:$("tr:even")

(5)匹配所有索引值为奇数的元素:odd

注:从0开始计数

例如:$("tr:odd")

(6)匹配一个给定索引值的元素:eq(index)

例如: $("tr:eq(1)")

(7)匹配所有大于给定元素索引值的元素:gt(index)

注:不包括本索引代表的元素

例如: $("tr:gt(0)")

(8)匹配所有小于小于给定索引值的元素:lt(index)

注:不包括本索引代表的元素

例如: $("tr:lt("+($("tr").length-1)+")")

(9)匹配如h1、h2、h3之类的标题元素:header

例如:$(":header")

3.5 四种内容选择器

(1)匹配包含给定文本的元素:contains(text)

例如:$("div:contains(div02)")

(2)匹配所有不包含子元素或文本的空元素:empty

例如: $("td:empty")

(3)匹配含有选择器所匹配的元素的元素:has(selector)

例如:$("div:has(h1)")

(4)匹配含有子元素或者文本的元素:parent

例如:$("td:parent")

3.6 两种可见性选择器

<body>
                <table>
                  <tr style="display:none"><td>value 1</td></tr>
                  <tr><td>value 2</td></tr>
                </table> 
        </body>

 

(1)匹配所有的不可见元素:hidden

例如:$("tr:hidden")

(2)匹配所有的可见元素:visible

例如:$("tr:visible")

3.7 四种子元素选择器

(1)匹配相关子元素:nth-child()

例如:$("div h3:nth-child(odd)").css("color","#0000ff");

     $("div h3:nth-child(even)").css("color","#0000ff");

     $("div h3:nth-child(2n+1)").css("color","#0000ff");//n从0开始                               

(2)匹配第一个元素:first-child

例如:$("div h3:first-child").css("color","#0000ff");

(3)匹配最后一个元素:last-child

例如:$("div h3:last-child").css("color","#0000ff");

(4)匹配唯一一个子元素:only-child:

例如: $("div h3:only-child").css("color","#0000ff");

3.8 表单选择器

(1)匹配所有的input、textarea、select、button元素: :input

例如:$(":input").addclass("myclass");

(2)所有的单行文本框:  :text

例如:$(":text").addclass("myclass");

(3)所有的密码框:    :password

(4):radio  :checkbox  :submit   :reset

  :botton         :file                

(5):hiddle 匹配所有的不可见元素,或者type为hidden的元素

例如:$("input:hidden").val()

3.9 四个表单对象属性选择器

(1):select  下拉框

例如:$("select option:selected").text()

(2):checked   复选框

例如:$("input:checked").val()

(3):enabled   

例如:$(":enabled").addclass("myclass")

(4):disabled

例如:$(":disabled").addclass("myclass")

第四章 jquery操作dom

4.1 取值与赋值

(1)html()取值  html(txt) 赋值  相当于js中innerhtml

取值:$("#div01").html()   ,取出所有文本,包括html

赋值:$("#div01").html('<font style="color: gold;">hello word</font> '),会将文本中的html解析进行显示

(2)text()取值  text(txt) 赋值  相当于js中innertext

取值:$("#div01").text(),仅仅取出文本,不包括html

赋值:$("#div01").text('<font style="color: gold;">hello word</font> ');会将html标签当做普通文本进行赋值

(3)val() 取值  val(val)  赋值  相当于js中value

例如:$("#textid").val()

4.2 jquery操作元素属性

(1)获取属性值:attr(attr)

例如:$("#unameid").attr("name")

(2)给指定属性赋值:attr(attr,val)

例如:$("#unameid").attr("value","李四")

(3)去掉指定属性:removeattr(attr)

例如:$("#unameid").removeattr("id")

(4)获取属性值:prop(prop)

例如:$("#unameid").prop("name")

  赋值:prop(prop,val)

例如:$("#unameid").prop("value","王五")

(5)对符合条件的元素逐个处理:each(index)

 function testeach(){
                      $("input[name=fav]").each(function(index){
                       //alert(index);
                        alert(this.value);
                         })
                     }

 

注:jquery 1.6增加了.prop()方法。

    如 checked, selected、readonly、disabled 使用prop()等,返回值是true或者false更加方便处理。   

例如: $("#submitid").prop("disabled",!($("#checkid").prop("checked")));

4.3 jquery操作dom节点

示例代码:

<body>
                <ol id="olid">
                        <li id="li01">北京</li>
                        <li>上海</li>
                        <li>武汉</li>
                        <li>深圳</li>
                </ol>
                <div id="div01"></div>
                
                <hr />
                <input type="button" value="添加子节点" onclick="addchild()"/>
        </body>

 

(1)在末尾添加子元素:append()、appendto()

例如:

例如:var varli = $("<li class='liclass'>西安</li>")
     $("#olid").append(varli);
     varli.appendto($("#olid"));

 

(2)添加子元素前置:prepend()、prependto()

例如:$("#olid").prepend(varli)

  varli.prependto($("#olid"))

(3)添加平级元素(前面)insertbefore()、before()

例如:var vardiv = $("<div>div02</div>")

           vardiv.insertbefore($("#div01"));

           $("#div01").before(vardiv);

(4)添加平级元素(后面)insertafter()、after()

例如:vardiv.insertafter($("#div01"));

           $("#div01").after(vardiv);

(5)替换某个节点replacewith()、replaceall()

例如:var varli = $("<li>郑州</li>");

      $("#li01").replacewith(varli);

      varli.replaceall($("#li01"));

(6)删除元素:remove()

例如:$("#olid").remove()

(7)删除子元素:empty()

例如:$("#olid").empty();

4.4 jquery操作css样式

(1) css(css,val)

例如:$("#divid").css("background-color",“red”)

(2)css({css1:val1,css2:val2,…..})

例如:$("#divid").css({"background-color":"red","color":"gold"});

4.5 jquery操作类样式

(1) hasclass(class) 判断当前对象是否有这个样式(类的样式)--返回是boolean类型的值

例如:$("#divid").hasclass("myclass")

(2)addclass(class) 添加样式, 而不是覆盖类样式

例如:"#divid").addclass("myclass myclass2"

(3) removeclass(class) 移除样式,如果()不写移除的样式默认移除所有的样式

例如:$("#divid").removeclass("myclass")

(4)toggleclass(class) 切换样式

例如:$("#divid").toggleclass("myclass myclass2");

第五章 jquery动画效果

(1)显示:show()

例如:$("#img01").show(3000)

(2)隐藏:hide()

例如: $("#img01").hide(3000)

(3)从上到下显示:slidedown()

例如: $("#div01").slidedown(3000)

(4)从下到上隐藏:slideup()

例如: $("#div01").slideup(3000)

(5)淡入:fadein()

例如: $("#img01").fadein(3000)

(6)淡出:fadeout()

例如:  $("#img01").fadeout(3000)

注:3000代表延时时间,3秒

第六章 jquery事件

(1)点击事件:click()

鼠标移动事件:mousemove()

鼠标移出事件:mouseout()

当鼠标指针位于元素上方时:mouseover()

(2)事件绑定

bind():jquery1.7版本之前使用

live():在jquery1.9版本删除

on():jquery1.7版本出现,推荐使用

on()优势:统一接口,提高性能。

事件绑定两种方式:

 //1 直接 对象.事件()
/*$("#aid").click(function(){
$("#divid").css("display","block");
}).mouseout(function(){
   $("#divid").css("color","red");
    $("#divid").css("font-size","30px");
    });*/

 //2 on() 使用on绑定事件
/*$("#aid").on("click",function(){
 $("#divid").css("display","block");
 }).on("mouseout",function(){
 $("#divid").css("color","red");
 $("#divid").css("font-size","30px");
  })*/

 

(3)解除绑定

unbind():

传参代表解除指定事件

无参代表默认解除所有事件

//4 unbind() 解绑
function testunbind(){
 //$("#aid").unbind();//不传参表示解除所有事件,
 $("#aid").unbind("mouseenter");
}