JQuery 学习(一)

jquery可以说是一个框架其实也就是一个javascript的代码库

 

jquery的使用：首先去htt://jquery.com下载一个jquery的js文件,然后在需要的页面<script src="jquery.js"  type="text/javascript"></script>引用

 

jquery的作用：

    获取页面内容

    修改页面外观和内容

    为页面添加动态效果

    Ajax  

jquery的选择符有：标签选择器、ID选择器、类选择器我们通常使用ID选择器来操作DOM

 

选择器的使用：

下面使用这几个选择器来操作页面样式

 

1.标签选择器

<style type="text/css">

.bor {

     border : solid 1px;

}

</style>

<script type="text/javascript">

$('td').addClass(' bor ');        //这样就为td标签添加了一个css样式

$('td').removeClass('bor');   //这样就为td标签移除了一个css样式

</script>

 

 

2.ID选择器

<script type="text/javascript">

$('#main-content-left-div').addClass(' bor '); //这样就为一个DIV加了一个css样式(main-content-left-div'为DIV的一个ID属性);

$('#main-content-left-div').removeClass(' bor '); //这样就为一个DIV移除了一个css样式(main-content-left-div'为DIV的一个ID属性);

</script>

 

3.类选择器

<div id="content-div">

   <div class="news-class" id="news">AAAAAAAAAA</div>

</div>

 

$(' #content-div  .news-class ').addClass(' bor ');           //添加CSS样式

$(' #content-div  .news-class ').removeClass(' bor ');     //移除CSS样式

 

 

4使用事件来控件页面元素的样式

 <div class="news-class" id="news">AAAAAAAAAA</div>

<script type="text/javascript">

 

     //$()为jquery的工厂函数

     //bind()为事件绑定函数,在这里是绑定了一个单击事件

     //#跟名字表示一个ID选择器

     $(document).bind('click',function() {

           $('#news').addClass(' bor');

    });

</script>