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

最新推荐文章于 2024-04-27 02:33:39 发布

qq1350048638

最新推荐文章于 2024-04-27 02:33:39 发布

阅读量154

点赞数

本文链接：https://blog.csdn.net/qq1350048638/article/details/78469855

版权

一、前端--jquery

所有前端开发都是以js为基础，对js进行封装。使开发简化。

1、常用js框架：jquery、bootstrap、angle js、ext

2、什么是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.0
System.out.println(Math.ceil(-6.89));//-6.0
System.out.println(Math.floor(6.89));//6.0
System.out.println(Math.floor(-6.89));//-7.0
System.out.println(Math.round(6.89));//7
System.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(值)  //设置其表单元素中的值