前端--jquery 01 jquery特点开发步骤选择器

来源：互联网发布：linux内核无法启动编辑：程序博客网时间：2024/06/05 12:47

一、前端--jquery

所有前端开发都是以js为基础，对js进行封装。使开发简化。1、常用js框架：jquery、bootstrap、angle js、ext2、什么是jquery?    是js框架（软件半成品），理念: 写得少, 做得多（write less do more）3、研发者:美国人:John Resig

二、jquery特点

轻量级 （Lightweight）强大的选择器 出色的DOM操作封装 （document object model）可靠的事件处理机制 出色的浏览器兼容性

三、开发步骤

1、引入js文件(http://jquery.com/download/ 去下载)2、在当前页引入文件:    <script src="...."></script>3、开发函数<script type="text/javascript">//第1种开发方法$(function() {// //相当于下面的go1函数 使用onload去调用alert("jquery开发方式 1!!!!")})function go1(){     alert("js开发方式 !!!")}//开发jquery第二种方式，实际开发中一般不使用$(document).ready(function(){        alert("jquery开发方式 2!!!!")})</script></head><body onload="go1()">

四选择器(找对象)

一、基础选择器1、#id ：ID匹配一个元素，和document.getElementById("")是等价（1）js的:document.getElementById("p1").innerHTML="我要高薪就业！！！！"和jquery:$("#p2").html("中国人都伟大！！");//设置其内容（2）document.getElementById("p1").innerHTML和$("#p2").html()是等价2 element:$("div").css("color","red");//可以对元素div起作用3 .class :可以对class起作用,名可以重复4 selector1,select2..selectn$("#p1,#p2,div").css("color","red");//, 指定任意多个选择器5 * 匹配所有元素二、层级选择器1 $("div p").css("color", "red") 父元素 所有后代元素2 $("div>p").css("color", "red") 父元素 > 子元素3$("div+p").css("color", "red")  紧邻4 $("div~p").css("color", "red")  相邻三、筛选选择器-基本    1: first     第1个    2: last  最后1个    3: not   去除    $("tr:not(:lt(2))").css("color","red");//去除所有与给定选择器匹配的元素    4: even  偶数的元素，从 0 开始计数     5: odd  奇数的元素，从 0 开始计数      6: eq   等于 从 0 开始计数     7: gt   大于 从 0 开始计数     8:lt   小于  从 0 开始计数 四、筛选选择器-内容    1:contains(text) 含 有指定文本的    2:empty 内容为空    3 has://含有指定元素    //$("td:has(p)").css("color","red");    4parent:;//含有匹配含有子元素或者文本的元素,和empty相反 $("td:parent(p)").css("color","red")五、筛选选择器--可见性    : hidden 属性隐藏     <img alt="" src="img/1.jpg" style="display:none">    alert("隐含图："+$("img:hidden").attr("src"))    : visible 属性显示    补充：//java中System.out.println(Math.ceil(6.89));//7.0System.out.println(Math.ceil(-6.89));//-6.0System.out.println(Math.floor(6.89));//6.0System.out.println(Math.floor(-6.89));//-7.0System.out.println(Math.round(6.89));//7System.out.println(Math.round(-6.89));//-7//js中document.write(Math.ceil(6.89));//7 document.write(Math.ceil(-6.89));//-6 document.write(Math.floor(6.89));//6 document.write(Math.floor(-6.89));//-7 document.write(Math.round(6.89));//7 document.write(Math.round(-6.89));//-7//范围公式    Math.random()范围是 >=0但小于1范围内的随机数    Math.floor(Math.random()*(最大值-最小值+1)+最小值)show();//显示     hide();//隐藏 toggle();//交替出现removeAttr("src");//移走属性,attr("src")); 获取其属性attr("src","img/"+a+".jpg");//设置其属性六 表单选择器    :input    :text    : password    : radio    : checkbox    : submit    : reset    : button    : file    : hidden[attribute]   有何属性[attribute=value]  等于属性[attribute!=value] //不等于属性[attribute^=value]  //以。。开头[attribute$=value]  //以。。结尾[attribute*=value]  //含 有[attrSel1][attrSel2][attrSelN] //多个条件

五 jQuery属性函数

1 获取innerHTML属性/设置innerHTML属性    html()   //获取其html内容    html(值) //设置其html内容2 获取text文本/设置text文本    text()   //获取其text内容    text(值) //设置其text内容3 获取value属性/设置value属性    val()   //获取其表单元素中的值    val(值)  //设置其表单元素中的值

阅读全文

0 0

前端--jquery 01 jquery特点开发步骤选择器

一、前端--jquery

二、jquery特点

三、开发步骤

四 选择器(找对象)

五 jQuery属性函数

四选择器(找对象)