php开发中一些前端知识杂总

 

推荐几个jqyuey插件的好地方

http://jqueryui.com/

http://www.jq22.com/

 

背景：

服务端采用ci3.0框架，twig作为模板嵌套。

twig模板手册：

http://pengbotao.cn/twig-template-language.html

http://twig.sensiolabs.org/documentation

 

1、jqyuey使用get方法向服务端请求数据

1 $.get("url", function(data, state){ 2 //todo 3 })

url为通过http请求的地址，其中function为回调函数，data为服务端返回的数据，state为状态判断是否请求成功。

 

 

2、前端星级评分功能（采用jqyuey）http://www.jq22.com/jquery-info291

　　-下载代码，添加 jquery.raty.min.js 文件到项目的js文件夹里，然后在代码里引入。

　　-添加 star_on 和 star_off 两个图标文件到项目图片文件夹里。

　　具体添加代码：

　　添加html代码

　　

1 <label id="star"></label>

　　js代码

1 <script type="text/javascript" src="your_js_file_url/jquery.raty.min.js"></script> //星级评分js文件 2 <script> 3 /*星级显示控制*/ 4 $.fn.raty.defaults.path = 'your_image_file_url/images'; 5 $("#star").raty(); 6 </script>

　　之所以用lable的原因是因为可以被form提交。

 

 

3、输入快自动匹配功能

<input name="" id="name" type="text" class="txt" size="20"> 1 引入必要文件 2 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 3 <script src="//code.jquery.com/jquery-1.10.2.js"></script> 4 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 5 6 <script type="text/javascript"> 7 $(function(){ 8 //输入框自动 自动匹配 9 $.get("url", function(data,state){ 10 var availableTags = JSON.parse(data); 11 $( "#name" ).autocomplete({ 12 minLength: 0, 13 source: availableTags, 14 select: function( event, ui ) { 15 16 }) 17 return false; 18 } 19 }) 20 }) 21 })

select为选中事件，更多事件请看文章开头的地址。

 

4、jqyuey中一些html的操作

　　 设置id为sex的html便签内容，<>这里的</>

　　

1 document.getElementById('sex').innerHTML

　　获取id为name的值，若括号内有语句，则是赋值功能 ，与 document.getElementById('member_id').value = xx 一样

1 $( "#name" ).val()

　　设置id为a的超链接标签的链接地址

1 document.getElementById('a').setAttribute('href', 'you_url');

 

转载于:https://www.cnblogs.com/zhvon/p/5303513.html