Jquery 每天记一点2009-7-2

走远了吗. 提交于 2020-03-06 12:32:56

 

 

1. <script language="javascript" type="text/javascript">  
    $(document).ready(function(){
        $("a").click(function() {
        alert("Hello world!");
   });
});
<script>
     上边的效果是点击文档中所有a标签时将弹出对话框,$("a") 是一个jQuery选择器,$本身表示一个jQuery类,所有$()是构造一个jQuery

对象,click()是这个对象的方法,同理$(document)也是一个jQuery对象,ready(fn)是$(document)的方法,表示当document全部下载完毕时

执行函数。

2. $("p")和$("#p")的区别,$("p")表示取所有p标签(<p></p>)的元素,$("#p")表示取id为"p"(<span  id="p"></span>)的元素
3.
属性
我们以<img id="a" scr="5.jpg"/>为例,在原始的javascript里面可以用var o=document.getElementById('a')取的id为a的节点对象,在用

o.src来取得或修改该节点的scr属性,在jQuery里$("#a")将得到jQuery对象[ <img id="a" scr="5.jpg"/> ],然后可以用jQuery提供的很多

方法来进行操作,如$("#a").scr()将得到5.jpg,$("#a").scr("1.jpg")将该对象src属性改为1,jpg。下面我们来讲jQuery提供的众多jQuery方

法,方便大家快速对DOM对象进行操作
herf()   herf(val)
说明:对jQuery对象属性herf的操作。
例子:
未执行jQuery前 <a href="1.htm" id="test" onClick="jq()">jQuery</a>jQuery代码及功能: function jq(){
   alert($("#test").href());
   $("#test").href("2.html");
}运行:先弹出对话框显示id为test的连接url,在将其url改为2.html,当弹出对话框后会看到转向到2.html
同理,jQuery还提供类似的其他方法,大家可以分别试验一下:
herf()  herf(val)   html()  html(val)   id()  id (val)  name()  name (val)   rel()  rel (val)
src()    src (val)   title()  title (val)   val()  val(val)


4.
$.browser()  判断浏览器类型,返回boolen值 $(function(){
    if($.browser.msie) {
        alert("这是一个IE浏览器");}
    else if($.browser.opera) {
        alert("这是一个opera浏览器");}
})当页面载入式判断浏览器类型,可判断的类型有msie、mozilla、opera、safari
5.  传统javascript对css的操作相当繁琐,比如<div id="a" style="background:blue">css</div>取它的background语法是

document.getElementById("a").style.background,而jQuery对css更方便的操作,$("#a").background(),$("#a").background(“red”)
$("#a")得到jQuery对象[ <div id="a" … /div> ]
$("#a").background()将取出该对象的background样式。
$("#a").background(“red”)将该对象的background样式设为red
上面第5条,现在的版本好像不能用,用第六条吧
6.1取得第一个段落的color样式属性的值。

jQuery 代码:
$("p").css("color");

6.2将所有段落的字体颜色设为红色并且背景为蓝色。

jQuery 代码:
$("p").css({ color: "#ff0011", background: "blue" });描述:
6.3
如果属性名包含 "-"的话,必须使用引号:

jQuery 代码:
$("p").css({ "margin-left": "10px", "background-color": "blue" });

6.4将所有段落字体设为红色

jQuery 代码:
$("p").css("color","red");

6.5
$("#msg").css("background");              //返回元素的背景颜色
$("#msg").css("background","#ccc")       //设定元素背景为灰色
$("#msg").height(300); $("#msg").width("200");       //设定宽高
$("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式
$("#msg").addClass("select");       //为元素增加名称为select的class
$("#msg").removeClass("select");       //删除元素名称为select的class
$("#msg").toggleClass("select");       //如果存在(不存在)就删除(添加)名称为select的class

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!